在提交按钮上重置表格

Question

当用户提交表单时，ajax将验证表单，并且不会重新加载页面。 现在它将保留用户输入的详细信息。

用户提交表单后，如何重置表单？

<form id="contact-form" method="post">
<input name="name" type="text"/>
<button type="submit">Submit</button>
</form>

这是我的ajax

$('#contact-form').on('submit',function(e) {  
$.ajax({
  url:'contact.php', 
  data:$(this).serialize(),
  type:'POST',
  success:function(data){
    console.log(data);
    swal("Thank you", "Message is sent :)", "success");
  },
  error:function(data){
    swal("Sorry", "Failed to send. Please try later :(", "error");
  }
});
e.preventDefault(); 
});

Answer 1

纯JavaScript

document.getElementById("contact-form").reset();

jQuery的

$("form").trigger("reset"); 您可能需要用form的ID替换表格。

另一个jQuery $("#contact-form")[0].reset();

您使用什么版本的Jquery？ 从版本1.8开始，成功和错误已弃用， 您应该改用done和fail 。

Answer 2

jQuery.ajax（）现在使用done()和fail() ，而从jQuery 1.8开始不建议使用success() 。

$(document).on('submit', '#contact-form', function(e){
  $.ajax({
    url: 'contact.php',
    method: 'POST',
    data:$(this).serialize()
  })
    .done(function(data) {
      console.log(data);
      swal("Thank you", "Message is sent :)", "success");
      $('#contact-form')[0].reset();
    })
    .fail(function(data) {
      console.log(data);
      swal("Sorry", "Failed to send. Please try later :(", "error");
    });
  e.preventDefault();
});