提交后如何清除表单

Question

Hi I have a website which was developed using php and it contains contact form where users submit their data. Down below is the code for contact form

<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>

After submitting the form I want to clear the fields and I tried the below code

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

From the above when I try to save the form it refreshes the fields but it does not save in database and even I tried the below code

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

But it does not clear the form and even I tried the below code

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

Please let me any other method to clear the form

Answer 1

use this $("#fname").val(""); it will clear the value in the 'fname' input field. Like this you can clear every field.

Answer 2

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

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

Answer 3

Add 1 input type reset in form and click after ajax request:

 $(document).ready(function() { $('#innov-contact').submit((e) => { e.preventDefault(); //Ajax... $("#reset").click(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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><input type="reset" id="reset"> </form>

Answer 4

This is from the jQuery Form Plugin docs .

$('#innov-contact').clearForm();

If you want to clear any specific fields.

$('#innov-contact #email').clearFields();

Answer 5

$('.form-control').val('');

这将清除类form-control所有表单字段。