제출 후 양식 값 지우기 Ajax

제출 후 양식 값 지우기 Ajax

다음 스크립트를 사용하여 연락처 폼을 검증하고 있습니다.

//submission scripts
  $('.contactForm').submit( function(){
        //statements to validate the form   
        var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        var email = document.getElementById('e-mail');
        if (!filter.test(email.value)) {
            $('.email-missing').show();
        } else {$('.email-missing').hide();}
        if (document.cform.name.value == "") {
            $('.name-missing').show();
        } else {$('.name-missing').hide();} 

        if (document.cform.phone.value == "") {
            $('.phone-missing').show();
        } 
        else if(isNaN(document.cform.phone.value)){
        $('.phone-missing').show();
        }
        else {$('.phone-missing').hide();}  

        if (document.cform.message.value == "") {
            $('.message-missing').show();
        } else {$('.message-missing').hide();}  

        if ((document.cform.name.value == "") || (!filter.test(email.value)) || (document.cform.message.value == "") || isNaN(document.cform.phone.value)){
            return false;
        } 

        if ((document.cform.name.value != "") && (filter.test(email.value)) && (document.cform.message.value != "")) {
            //hide the form
            //$('.contactForm').hide();

            //show the loading bar
            $('.loader').append($('.bar'));
            $('.bar').css({display:'block'});

        /*document.cform.name.value = '';
        document.cform.e-mail.value = '';
        document.cform.phone.value = '';
        document.cform.message.value = '';*/

            //send the ajax request
            $.post('mail.php',{name:$('#name').val(),
                              email:$('#e-mail').val(),
                              phone:$('#phone').val(),
                              message:$('#message').val()},

            //return the data
            function(data){

              //hide the graphic
              $('.bar').css({display:'none'});
              $('.loader').append(data);

            });

            //waits 2000, then closes the form and fades out
            //setTimeout('$("#backgroundPopup").fadeOut("slow"); $("#contactForm").slideUp("slow")', 2000);

            //stay on the page
            return false;


        } 
  });

이게 제 폼이에요

<form action="mail.php" class="contactForm" id="cform" name="cform" method="post">
  <input id="name" type="text" value="" name="name" />
  <br />
  <span class="name-missing">Please enter your name</span>
  <input id="e-mail" type="text" value="" name="email" />
  <br />
  <span class="email-missing">Please enter a valid e-mail</span>
  <input id="phone" type="text" value="" name="phone" />
  <br />
  <span class="phone-missing">Please enter a valid phone number</span>
  <textarea id="message" rows="" cols="" name="message"></textarea>
  <br />
  <span class="message-missing">Please enter message</span>
  <input class="submit" type="submit" name="submit" value="Submit Form" />
</form>

정상적으로 송신한 후, 폼 필드의 값을 클리어 할 필요가 있습니다.어떻게 해야 하죠?

$("#cform")[0].reset();

또는 플레인 Javascript:

document.getElementById("cform").reset();

$.post calls success callback에서는 이 작업을 다음과 같이 수행할 수 있습니다.

$.post('mail.php',{name:$('#name').val(),
                              email:$('#e-mail').val(),
                              phone:$('#phone').val(),
                              message:$('#message').val()},

            //return the data
            function(data){

              //hide the graphic
              $('.bar').css({display:'none'});
              $('.loader').append(data);

              //clear fields
              $('input[type="text"],textarea').val('');

            });

사용방법:

$('form.contactForm input[type="text"],texatrea, select').val('');

또는 이 폼에 대한 참조가 있는 경우this:

$('input[type="text"],texatrea, select', this).val('');

---

:input===<input>+<select>s +<textarea>s

$('.contactForm').submit(function(){
    var that = this;

    //...more form stuff...

    $.post('mail.php',{...params...},function(data){

        //...more success stuff...

        that.reset();
    });
});

간단하게

$('#cform')[0].reset();

동작: Ajax 성공 후 이 함수를 호출하여 폼 ID를 파라미터로 전송합니다.예를 들어 다음과 같습니다.

이 함수는 버튼, 제출, 재설정, 숨김 필드를 포함한 모든 입력 필드 값을 지웁니다.

function resetForm(formid) {
 $('#' + formid + ' :input').each(function(){  
  $(this).val('').attr('checked',false).attr('selected',false);
 });
}

* 이 함수는 버튼, 송신, 리셋, 숨김 필드를 제외한 모든 입력 필드 값을 지웁니다 */

 function resetForm(formid) {
   $(':input','#'+formid) .not(':button, :submit, :reset, :hidden') .val('')
  .removeAttr('checked') .removeAttr('selected');
  }

예:

<script>
   (function($){
       function processForm( e ){
           $.ajax({
               url: 'insert.php',
               dataType: 'text',
               type: 'post',
               contentType: 'application/x-www-form-urlencoded',
               data: $(this).serialize(),
               success: function( data, textStatus, jQxhr ){
                $('#alertt').fadeIn(2000);
                $('#alertt').html( data );
                $('#alertt').fadeOut(3000);
               resetForm('userInf');
            },
            error: function( jqXhr, textStatus, errorThrown ){
                console.log( errorThrown );
            }
        });

        e.preventDefault();
    }

    $('#userInf').submit( processForm );
})(jQuery);

 function resetForm(formid) {
$(':input','#'+formid) .not(':button, :submit, :reset, :hidden') .val('')
  .removeAttr('checked') .removeAttr('selected');
 }
  </script>

$.post('mail.php',{name:$('#name').val(),
                          email:$('#e-mail').val(),
                          phone:$('#phone').val(),
                          message:$('#message').val()},

        //return the data
        function(data){
           if(data==<when do you want to clear the form>){

           $('#<form Id>').find(':input').each(function() {
                 switch(this.type) {
                      case 'password':
                      case 'select-multiple':
                      case 'select-one':
                      case 'text':
                      case 'textarea':
                          $(this).val('');
                          break;
                      case 'checkbox':
                      case 'radio':
                          this.checked = false;
                  }
              });
           }      
   });

http://www.electrictoolbox.com/jquery-clear-form/

양식을 제출할 때 양식에 ID 설정

     <form action="" id="cform">

       <input type="submit" name="">

    </form>

   set in jquery 

   document.getElementById("cform").reset(); 

$('#formid).reset();

또는

document.getElementById('formid').reset();

바닐라!

이 게시물이 꽤 오래되었다는 것을 알고 있습니다.
OP는 jquery ajax를 사용하기 때문에 이 코드가 필요합니다.
하지만 바닐라를 찾는 사람들을 위해.

    ...
    // Send the value
    xhttp.send(params);
    // Clear the input after submission
    document.getElementById('cform').reset();
}

다음과 같이 폼태그만 사용합니다.

  $.ajax({
    type: "POST",
    url: "/demo",
    data: dataString,
    success: function () {
      $("form")[0].reset();
      $("#test").html("<div id='message'></div>");
      $("#message")
        .html("<h2>Contact Form Submitted!</h2>")
        .append("<p>We will be in touch soon.</p>")
        .hide()
        .fadeIn(1500, function () {
          $("#message").append(
            "<img id='checkmark' src='images/check.png' />"
          );
        });
    }
  });
  e.preventDefault();
});

전송 후 ajax reset() 메서드를 사용하여 폼을 클리어할 수 있습니다.

위의 스크립트에서 예:

const form = document.getElementById(cform).리셋();

양식에서 양식 태그를 사용하는 경우.그리고나서

$("#cform")[0].reset();

이 코드는 완벽하게 동작하지만 폼태그를 사용하지 않을 경우 각 입력 필드에 다음과 같이 빈 값을 설정할 수 있습니다.

$('input[type="text"],textarea').val('');

언급URL : https://stackoverflow.com/questions/10633605/clear-form-values-after-submission-ajax