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开始，成功和错误被折旧并且you should use done and fail instead。

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();
});

在提交按钮上重置表单

2 个答案: