提交后自举表单域未被清除

Question

我的网站上有一个Bootstrap 3表单。表单发送的消息很好，但是当用户提交表单后，字段不会清除 - 我该如何解决这个问题？

这是下面的'contact.php'代码。

链接到 'contact_me.js' https://jsfiddle.net/wookie/6uag6goe/

<form class="form-horizontal" role="form" method="post" action="contact.php"> 
<div class="form-group"> 
    <label for="name" class="control-label">Name</label> 
    <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="<?php echo htmlspecialchars($_POST['name']); ?>"> 
    <?php echo "<p class='text-danger'>$errName</p>";?> 
</div> 
<div class="form-group"> 
    <label for="email" class="control-label">Email</label> 
    <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="<?php echo htmlspecialchars($_POST['email']); ?>"> 
    <?php echo "<p class='text-danger'>$errEmail</p>";?> 
</div> 
<div class="form-group"> 
    <label for="service" class="control-label">Service</label> 
    <select class="form-control" id="service" name="service"> 
     <option>Please select a service:</option> 
     <option>service1</option> 
     <option>service2</option> 
     <option>service3</option> 
     <option>service4</option> 
     <option>service5</option> 
     <option>service6</option> 
    </select> 
</div> 
<div class="form-group"> 
    <label for="message" class="control-label">Message</label> 
    <textarea class="form-control" rows="4" name="message"> 
     <?php echo htmlspecialchars($_POST[ 'message']);?> 
    </textarea> 
    <?php echo "<p class='text-danger'>$errMessage</p>";?> 
</div> 
<div class="form-group"> 
    <label for="human" class="control-label">2 + 3 = ?</label> 
    <input type="text" class="form-control" id="human" name="human" placeholder="Your Answer"> 
    <?php echo "<p class='text-danger'>$errHuman</p>";?> 
</div> 
<div class="form-group"> 
    <input id="submit" name="submit" type="submit" value="Send Message" class="btn btn-lg btn-default btn-block"> 
</div> 
<div class="form-group"> 
    <?php echo $result; ?> 
</div> 

Answer 1

你是呼应了发布的数据。您只希望在发布的数据中发生错误时执行此操作。

<input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="<?php echo htmlspecialchars($_POST['email']); ?>"> 

但是你在做你的服务器端错误检测，你需要做的只是上面如果有错误回声。假设你存储$ ISERROR变量，那么你会更改为： -

<input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="<?php echo $isError ?htmlspecialchars($_POST['email']) : ""; ?>"> 

Answer 2

更改此

$('#contactForm').trigger("reset"); 

到

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

Answer 3

让你的窗体有一个ID 联系形式，则：

$('#contactForm').on('submit', function() { 
    $(this).each(function() { 
     this.reset(); 
    }); 
});