在提交按鈕上重置表格

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