javascript - 提交后如何清除表单

Question

您好，我有一个使用 php 开发的网站，它包含用户提交数据的联系表单。下面是联系表格的代码

<div class="form">
    <div id="sendmessage">Your message has been sent. Thank you!</div>
    <div id="errormessage"></div>
    <form  name="contactusform"  id="innov-contact" action="./dbFiles/formSubmit.php" method="POST" role="form" class="contactForm" >
        <div class="form-row">
            <div class="form-group col-lg-6">
                <input type="text" name="fname" class="form-control" id="fname" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
                <div class="validation"></div>
            </div>
            <div class="form-group col-lg-6">
                <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
                <div class="validation"></div>
            </div>
        </div>
        <div class="form-group">
            <input type="text" class="form-control" name="websiteurl" id="websiteurl" placeholder="website url" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
            <div class="validation"></div>
        </div>
        <div class="form-group">
            <input type="text" class="form-control" name="phoneNum" id="phoneNum" placeholder="Phone Number" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
            <div class="validation"></div>
        </div>
        <div class="form-group">
            <textarea class="form-control" name="message" id="messages" rows="3" data-rule="required" data-msg="Please write something for us" placeholder="Message">
            </textarea>
            <div class="validation"></div>
        </div>
        <p style="-webkit-margin-collapse: discard;">Captcha: </p>
        <p><img src="image.php?captcha_text=<?php echo $_SESSION['captcha']; ?>">  <input type="text" value="" name="my-captcha"></p>
        <div class="validation"></div>
        <div id ="ss" class="text-center" >
            <button type="submit" value="submit" name="submit" title="Send Message" >SUBMIT</button>
        </div>
    </form>
</div>

提交表单后，我想清除字段，我尝试了以下代码

<script>
    function myFunction() {
        document.getElementById("innov-contact").reset();
    }
</script>

从上面看，当我尝试保存表单时，它会刷新字段，但不会保存在数据库中，甚至我尝试了下面的代码

<script type="text/javascript">
    $("#innov-contact")[0].reset();
</script>

但它没有清除表单，甚至我尝试了下面的代码

$(document).ready(function() { 
    var options = { 
        target:        '#output1', 
        clearForm: true // clear all form fields after successful submit 
    }; 
     // bind form using 'ajaxForm' 
    $('#innov-contact').ajaxForm(options); 
}); 

请告诉我任何其他方法来清除表单

Answer 1

您可以使用trigger()使用 jQuery 重置表单

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