1

Подскажите, пожалуйста, как правильно написать аякс скрипт так, чтобы при отправке второй формы не перезагружалась страница. Необходимо чтобы оставалось именно 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>
2
  • насколько я вижу $('.rating').submit(); вызывает сабмит и перерисовку, нужно сделать вместо этого такой же второй аякс для рейтинга 30 мая 2022 в 16:02
  • внутри этого аякса или отдельно, а если отдельно, то как он будет вызываться. Если можно, накидайте пример плиз. 30 мая 2022 в 16:33

1 ответ 1

0

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

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

$("#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>

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.