如何在ajax提交後清除表單？

我有一個小的聯繫表單。發送消息正在工作，但提交後表單仍與文本保持一致。我搜索並嘗試了一些代碼來清除它，但沒有成功。如何在ajax提交後清除表單？

// JavaScript Document 
$('#contact-form').submit(function (e) { 
"use strict"; 
e.preventDefault(); 
$.ajax({ 
    type: "POST", 
    url: "contactform.php", 
    data: $(this).serialize(), //get form values 
    sucess: function (data) { 
     document.getElementById("contact-form").reset(); 
    } 

}).done(function (data) { 
    console.log(data); // will contain success or invalid 
}); 
});

而且一些PHP

<?php 
$firstname = $_POST["firstname"]; 
$lastname = $_POST["lastname"]; 
$email = $_POST["email"]; 
$phone = $_POST["phone"]; 
$message = $_POST["message"]; 

$EmailTo = "[email protected]"; 
$Subject = "New Message Received"; 

// prepare email body text 
$email_content .= "Firstname: $firstname\n"; 
$email_content .= "Lastname: $lastname\n"; 
$email_content .= "Email: $email\n"; 
$email_content .= "Phone: $phone\n"; 
$email_content .= "Message: $message"; 

// send email 
$success = mail($EmailTo, $Subject, $email_content, "From:".$email); 

// redirect to success page 
if ($success){ 

    echo "success"; 

} else { 
    echo "invalid"; 
} 
?>

和HTML

<form id="contact-form" method="post" action="contactform.php" role="form"> 
    <div class="messages"></div> 
    <div class="form-group"> 
    <input id="form_name" type="text" name="firstname" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required."> 
    <div class="help-block with-errors"></div> 
    </div> 
    <div class="form-group"> 
    <input id="form_lastname" type="text" name="lastname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required."> 
    <div class="help-block with-errors"></div> 
    </div> 
    <div class="form-group"> 
    <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required."> 
    <div class="help-block with-errors"></div> 
    </div> 
    <div class="form-group"> 
    <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone"> 
    <div class="help-block with-errors"></div> 
    </div> 
    <div class="form-group"> 
    <textarea id="form_message" name="message" class="form-control" placeholder="Message for us *" rows="4" required data-error="Please,leave us a message."></textarea> 
    <div class="help-block with-errors"></div> 
    </div> 
    <button type="submit" class="btn" value="Send message">Send Message</button> 
    <p class="text-muted"><strong>*</strong> These fields are required.</p> 
</form>

我已經得到了我失去了一些東西的感覺，但不知道是什麼呢。

來源

2016-10-04 maw2be

有一個復位按鈕<按鈕類型=「復位」值=「復位」>重置 ..但形式成功或不發送數據 – mohade

你可以通過使用jQuery實現它，把它放在ajax成功響應之後。

$('#contact-form')[0].reset();

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

來源

2016-10-04 14:22:02

-1

嘗試刪除preventDefault。一旦頁面重新加載，表單將被清空。這或者你將不得不手動設置表單輸入的值爲空。

是否有一個特定的原因，你提交表單使用Ajax，而不是允許表單直接發佈到PHP文件？

來源

2016-10-04 14:07:30 Blinkydamo

這是接觸表格，從這裏我已經閱讀和使用這個表格不要求重新加載頁面。 – maw2be

如何在ajax提交後清除表單？

回答

相關問題