在提交ajax后清除表单值

Question

我正在使用以下脚本来验证我的联系表单。

//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> 

我需要成功提交后清除表单字段值。我怎样才能做到这一点？

Answer 1

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

或在普通的JavaScript：

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

Answer 2

使用本：

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

，或者如果你有一个this参考形式：

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

---

:input === <input> + <select> S + <textarea>小号

Answer 3

你可以这样做你的$ .post的内部调用成功回调这样

$.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(''); 

      }); 

Answer 4

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

    //...more form stuff... 

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

     //...more success stuff... 

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

Answer 5

只需

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

Answer 6

$.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/

Answer 7

它的工作原理：在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> 

Answer 8

集ID形式，当你提交表单

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

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

    </form> 

    set in jquery 

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

的