mcadamsjustin
mcadamsjustin

Reputation: 361

Reset My form after submission

After my form is submitted, I'd like to reset my form to display the original blank values. Here's the code:

    PHP Form
    <form action="index.php" method="post" id="contact_form" >
    <div id="topic_error" class="error"><img src="images/error.png" /> What category should this be filed in?</div>
    <div>
        <select name="topic" id="topic">
            <option value="">Please select a topic...</option>
            <option value=" Computer Repair ">Computer Repair</option>
            <option value=" Website Design ">Website Design</option>
            <option value=" Say Hi ">Just Want to Say Hi</option>
        </select>
    </div>
    <h4>NAME:</h4><div id="name_error" class="error"><img src="iamges/error.png" /> Please enter your name</div>
    <div><input class="contact_name" type="text" name="name" id="name" placeholder="Enter Name" /></div>
    <H4>EMAIL:</H4><div id="email_error" class="error"><img src="images/error.png" /> Please enter your email</div>
    <div><input class="contact_email" type="text" name="email" id="email" placeholder="[email protected]" /></div>
    <h4>SUBJECT:</h4><div id="subject_error" class="error"><img src="images/error.png" /> Please enter a subject</div>
    <div><input class="contact_subject" type="text" name="subject" id="subject" placeholder="How did you become so awesome?" /></div>
    <h4>MESSAGE:</h4><div id="message_error" class="error"><img src="images/error.png" /> Please give us a few more details</div>
    <div><textarea class="contact_message" name="message" id="message" placeholder="Give us some details"></textarea></div>
    <div id="mail_success" class="success"><img src="images/success.png" /> Thank you. The mailman is on his way.</div>
    <div id="mail_fail" class="error"><img src="images/error.png" /> Sorry, we don't know what happened. Please try again later.</div>

    <div id="cf_submit_p">
        <input class="submit" type="submit" id="send_message" value="">
    </div>
</form>

The contact.js file

$(document).ready(function(){
    $('#send_message').click(function(e){
        e.preventDefault();
        var error = false;
        var topic = $('#topic').val();
        var name = $('#name').val();
        var email = $('#email').val();
        var subject = $('#subject').val();
        var message = $('#message').val();
        if(topic.length == 0){
            var error = true;
            $('#topic_error').fadeIn(500);
        } else {
            $('#topic_error').fadeOut(500);
        }
        if(name.length == 0){
            var error = true;
            $('#name_error').fadeIn(500);
        } else {
            $('#name_error').fadeOut(500);
        }
        if(email.length == 0 || email.indexOf('@') == '-1'){
            var error = true;
            $('#email_error').fadeIn(500);
        } else {
            $('#email_error').fadeOut(500);
        }
        if(subject.length == 0){
            var error = true;
            $('#subject_error').fadeIn(500);
        } else {
            $('#subject_error').fadeOut(500);
        }
        if(message.length == 0){
            var error = true;
            $('#message_error').fadeIn(500);
        } else {
            $('#message_error').fadeOut(500);
        } if(error == false){
            $('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' });
            $.post("send_email.php", $("#contact_form").serialize(),function(result){
                if(result == 'sent'){
                    $('#cf_submit_p').remove();
                    $('#mail_success').fadeIn(500);
                } else {
                    $('#mail_fail').fadeIn(500);
                    $('#send_message').removeAttr('disabled').attr('value', 'Send Message');
                }
            });
        }
    });
});

I don't think the send_email.php file is needed, but I can put that up here if need be. I would assume (I know what happens when you assume) that this can be done with some sort of trigger in the javascript. I did try to add the line form.trigger('reset'); after the $('#mail_success').fadeIn(500); line but that did not work

Upvotes: 0

Views: 1944

Answers (2)

shawnzhu
shawnzhu

Reputation: 7585

$('#contact_form').trigger('reset') should work.

Upvotes: 1

sheng
sheng

Reputation: 1372

It would be $("#contact_form").trigger("reset"), and $("#contact_form")[0].reset() should also work.

Upvotes: 2

Related Questions