Отправка 2х форм одним ajax скриптом

Question

Подскажите, пожалуйста, как правильно написать аякс скрипт так, чтобы при отправке второй формы не перезагружалась страница. Необходимо чтобы оставалось именно 2 формы.

Что происходит в коде: При отправке первой формы add_review через ajax, в success отправляю вторую форму $('.rating').submit();, но страница в таком случае перезагружается. Возможно ли дописать скрипт так, чтобы вторая форма отправлялась но страница не перезагружалась.

Конструкция:

<form class="rating" method="POST" action="updates/add_review_stars.php" enctype="multipart/form-data">
    <input type="hidden" class="uk-input" value="<?echo $product_id;?>" name="product_id" id="product_id">
    <label>
    <input type="radio" name="stars" value="1" />
    <span class="icon">★</span>
    </label>
    <label>
    <input type="radio" name="stars" value="2" />
    <span class="icon">★</span>
    <span class="icon">★</span>
    </label>
    <label>
    <input type="radio" name="stars" value="3" />
    <span class="icon">★</span>
    <span class="icon">★</span>
    <span class="icon">★</span>   
    </label>
    <label>
    <input type="radio" name="stars" value="4" />
    <span class="icon">★</span>
    <span class="icon">★</span>
    <span class="icon">★</span>
    <span class="icon">★</span>
    </label>
    <label>
    <input type="radio" name="stars" value="5" />
    <span class="icon">★</span>
    <span class="icon">★</span>
    <span class="icon">★</span>
    <span class="icon">★</span>
    <span class="icon">★</span>
    </label>
    </form>

    <form id ="add_review" enctype="multipart/form-data">
    <input type="hidden" class="uk-input" value="<?echo $product_id;?>" name="product_id" id="product_id">
    <input type="hidden" class="uk-input" value="0" name="approved" id="approved">
    </br>
    <label class="uk-form-label" for="form-stacked-text">Имя</label>
    <input type="text" class="uk-input" name="name" id="name" required>
    <label class="uk-form-label" for="form-stacked-text">Отзыв</label>
    <textarea class="uk-textarea" name="review" id="review" required></textarea>
    <div class="uk-margin">
    <input type="submit" name="submit" value="Добавить отзыв" data-dismiss="modal" class="uk-button uk-button-default">
    </div>
    </form>

    <script>
    $("#add_review").submit(function(send){
    send.preventDefault();
    $.ajax({
        url: 'updates/add_review.php',
        type: 'POST',
        data: new FormData(this),
        contentType: false,
        cache: false,
        processData:false,
        success: function(html){  
            $("#addresult_review").html(html);
            $('.rating').submit();
        }  
    });
    });
    </script>

Answer 1

Можно например так написать, я добавил очистку форм в конце, ну и сделать кнопки не активными было бы хорошо, чтобы случайно дважды не отправилось если первый запрос не успел отработать то такое может произойти теоретически.

Как вариант еще можно сделать функцию с аяксом, которую и вызывать для этих двух форм (с разными аргументами) ну и в начале функции дизейблить кнопку отправки, пока не придет ответ или не произойдет ошибка отправки.

$("#add_review").submit(function(send){
    send.preventDefault();
    $.ajax({
        url: 'http://httpstat.us/200',
        type: 'POST',
        data: new FormData(this),
        contentType: false,
        cache: false,
        processData:false,
        success: function(html){  
            //$("#addresult_review").html(html);
            sendRating()
        }  
    });
    });

    function sendRating(){
      var postData = $('.rating').serialize(); // данные
      $.ajax({
          url: 'http://httpstat.us/200',
          type: 'POST',
          data: postData,  
          contentType: false,
          cache: false,
          processData:false,
          success: function(html){  
             console.log('Отправлено')
             // чистим формы
             $("#add_review").trigger("reset");
             $('.rating').trigger("reset");
          }  
      });
    }

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<form class="rating" method="POST" enctype="multipart/form-data">
<input type="hidden" class="uk-input" value="<?echo $product_id;?>" name="product_id" id="product_id">
<label>
<input type="radio" name="stars" value="1" />
<span class="icon">★</span>
</label>
<label>
<input type="radio" name="stars" value="2" />
<span class="icon">★</span>
<span class="icon">★</span>
</label>
<label>
<input type="radio" name="stars" value="3" />
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>   
</label>
<label>
<input type="radio" name="stars" value="4" />
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
</label>
<label>
<input type="radio" name="stars" value="5" />
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
</label>
</form>

<form id ="add_review" enctype="multipart/form-data">
<input type="hidden" class="uk-input" value="<?echo $product_id;?>" name="product_id" id="product_id">
<input type="hidden" class="uk-input" value="0" name="approved" id="approved">
</br>
<label class="uk-form-label" for="form-stacked-text">Имя</label>
<input type="text" class="uk-input" name="name" id="name" required>
<label class="uk-form-label" for="form-stacked-text">Отзыв</label>
<textarea class="uk-textarea" name="review" id="review" required></textarea>
<div class="uk-margin">
<input type="submit" name="submit" value="Добавить отзыв" data-dismiss="modal" class="uk-button uk-button-default">
</div>
</form>

БЛОГ НА HUSL

Отправка 2х форм одним ajax скриптом

Ответы (1 шт):