Блог

Главная - Вопросы по программированию - Сбросить форму после отправки с помощью jQuery

Сбросить форму после отправки с помощью jQuery

#jquery

Вопрос:

Это мой код jQuery:

 $('#contactForm').submit(function(e){
    e.preventDefault()

    $('#loading').css("display", "block")

    $.ajax({
        type : "POST",
        url : "/contact/",
        data: {
            sender_name : $('#name').val(),
            sender_email : $('#email').val(),
            message_subject : $('#subject').val(),
            message_text : $('#message').val(),
            csrfmiddlewaretoken : csrftoken,
            datatype : "json",
        },

        success: function(){
            $('#loading').css("display", "none"),
            $('#sent-message').css("display", "block")
        },
    });
});

Это работает без каких-либо проблем. Однако я пытаюсь сбросить его после отправки, и после поиска в StackOverflow я добавил это:

         success: function(){
            $('#loading').css("display", "none"),
            $('#sent-message').css("display", "block"),
            $('#contactForm').trigger('reset')

        },

И это:

         success: function(){
            $('#loading').css("display", "none"),
            $('#sent-message').css("display", "block"),
            $('#contactForm')[0].reset()

        },

И ни один из них не работает. Чего мне не хватает?

Комментарии:

1. $('#contactForm')[0].reset() работает правильно. Обратите внимание, что reset() поля будут возвращены к своим начальным значениям, а не пустым значениям, поэтому, если вы предварительно заполнили поля, вам нужно будет вручную установить val('') их вместо сброса всей формы. Если это все еще не работает для вас, убедитесь, что у вас есть только 1 #contactForm элемент в DOM и никаких ошибок в консоли.

2. @Sravani Операция уже идет

3. @RoryMcCrossan Форма не заполнена заранее. Это контактная форма, и reset() она не возвращает полям их первоначальные значения, которые являются пустыми. У меня есть только один contactForm (остальная часть кода jQuery работает без проблем), и ошибки нет.

4. @Sravani Вы прочитали мой вопрос и код?

5. Вызывается ли success обработчик?

Ответ №1:

Пожалуйста, посмотрите мой фрагмент кода. Сбросить свойство работ. Если это не работает, вам нужно обновить свой html-код здесь.

 <form id="contactForm">
      <input type="text" />
      <input type="button" onClick="resetForm();" value="Reset">
    </form>
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"></script>
     <script>
      function resetForm()
      {
        $.ajax({
          url:"test.php",
          success:function(){
            $("#contactForm")[0].reset();    
          },
          error:function(){
            $("#contactForm")[0].reset();    
          }
          
        });
        
      }
     </script>
Метки: