Question posted in
You can find the official documentation here.

Jquery ajax – how to clear the form after submit it

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

Tags:

5

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    you can use trigger() to reset the form with jQuery

    $('#form_id').trigger("reset");
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
  4. 0

    This is from the jQuery Form Plugin docs.

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

    If you want to clear any specific fields.

    $('#innov-contact #email').clearFields();
    Login or Signup to reply.
  5. 0 
    $('.form-control').val('');

    This will clear all form fields with the class form-control.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search