Resetting the form fields after successful submission

Question

I wrote a form where its fields need to be reset after successful submission. The entire flow happens through ajax and php . Here is the code:
HTML

<form role="form" class="contact-form" id="contact-fm" method="post">
                            <div class="form-group">
                                <div class="controls">
                                    <input type="text" placeholder="Name" class="requiredField" name="name" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="controls">
                                    <input type="email" class="email" class="requiredField" placeholder="Email" name="email" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="controls">
                                    <input type="text" class="requiredField" placeholder="Subject" name="subject" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="controls">
                                    <textarea rows="7" placeholder="Message" name="message" class="requiredField" required></textarea>
                                </div>
                            </div>
                            <button type="submit" id="submit" class="btn-system btn-large">Send</button>
                            <div id="success" style="color:#34495e;"></div>
                        </form>  

AJAX

$(function() {

    $("input,textarea").jqBootstrapValidation({
        preventSubmit: true,
        submitError: function($form, event, errors) {
            // additional error messages or events
        },
        submitSuccess: function($form, event) {
            event.preventDefault(); // prevent default submit behaviour
            // get values from FORM
            var name = $("input#name").val();
            var email = $("input#email").val();
            var sub = $("input#subject").val();
            var message = $("textarea#message").val();
            $.ajax({
                url: "php/send.php",
                type: "POST",
                data: {
                    name: name,
                    email: email,
                    sub: subject,
                    message: message
                },
                cache: false,
            })
            document.getElementById('contact-fm').reset();
        },
    });
});  

PHP

<?php 
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $subject = $_POST['subject'];

    $to = 'ajay.k@enexl.com';
    if (filter_var($email, FILTER_VALIDATE_EMAIL)) { // this line checks that we have a valid email address
        $mailSubject = "Contact request from " .$name;
        $txt = "name : ".$name.".\n\nSubject : ".$subject.".\n\nMail id : ".$email."\n\nMessage : ".$message;
        $headers = "From: ".$email ;
        mail($to,$mailSubject,$txt,$headers);
        $data = array();
        $data['status'] = 'success';
        //echo json_encode($data);  
        echo "<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>";
        echo "<p id='text'>Your email was sent! One of our team members would contact you shortly!</p>"; // success message
        echo "<script type='text/javascript'>";
        echo "$(function(){";
        echo "$('#text').fadeOut(5000);";  
        echo "});";
        echo "</script>";
    }
    else{
        echo "<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>";
        echo "<p id='textOne'>Mail was not sent, make sure that all fields are filled in!</p>"; // success message
        echo "<script type='text/javascript'>";
        echo "$(function(){";
        echo "$('#textOne').fadeOut(5000);";  
        echo "});";
        echo "</script>";
    }

?>  

When I use document.getElementById('contact-fm').reset(); , form doesn't get reset. How can I make it reset?

Answer 1

An Ajax call does have a function which can be used when the ajax call was succesfull.

 $.ajax({
     url: "php/send.php",
     type: "POST",
     data: {
                    name: name,
                    email: email,
                    sub: subject,
                    message: message
            },
                cache: false,
            })
.done(function( data ) {
    document.getElementById('contact-fm').reset();
  });

Answer 2

Try

$('#contact-fm').on('click', function()
        { 
            $('#contact-fm').find('input:text, input:password, select, textarea').val('');
            $('#contact-fm').find('input:radio, input:checkbox').prop('checked', false);
        });

Then trigger it using Jquery Trigger

$("#contact-fm").trigger("reset");

More on http://www.codesynthesis.co.uk/code-snippets/clearing-and-resetting-forms-with-jquery

Answer 3

None of the above answers worked for me. I decided to use echo "$('#contact-fm').trigger('reset');"; after echo "$('#text').fadeOut(5000);"; in my php code. Then it worked.

Answer 4

$(function() {

    $("input,textarea").jqBootstrapValidation({
        preventSubmit: true,
        submitError: function($form, event, errors) {
            // additional error messages or events
        },
        submitSuccess: function($form, event) {
            event.preventDefault(); // prevent default submit behaviour

            $.ajax({
                url: "php/send.php",
                type: "POST",
                data: $('#contact-fm').serialize(),
                cache: false
            }).done(function(data){
                $('#contact-fm')[0].reset();
            })

        },
    });
});