How to reset a form with jQuery?

Question

I have a contact form that I am trying to reset automatically after is submitted. I have seen several posts for reseting or clearing forms here on SO.

I have tried several but I don't know exactly where to post the code.

This is what I have as the code:

$.ajax({
    type: 'POST',
    url: 'sendmessage.php',
    data: $("#contact").serialize(),
    success: function(data) {
        if(data == "true") {
            $("#contact").fadeOut("fast", function(){
                $(this).before("<p> <strong>Success! Your request has been sent. We will respond to it as soon as possible. </strong></p>");                            
                   setTimeout("$.fancybox.close()", 3000);

I been trying to place

$("#contact")[0].reset();

But all of the places that I have tried to place that code it doesn't work...

Is `#contact` the form? Your reset code should work. It's possible that `fadeOut` is causing a problem if you're hiding the form itself, but I don't recall if fadeOut actually removes the element — helion3, Feb 20 '14 at 23:30
What do you mean "it doesn't work"? Are there error messages in the JavaScript console? — gilly3, Feb 20 '14 at 23:30
what is `reset`? empty all the inputs from any value, or reseting to the original form before the user edit them? If the last, a simple button like `` will do the trick. — balexandre, Feb 21 '14 at 00:20
@helion3 Nope, it doesn't remove the element. It just gets a display:none in the end. From jQuery docs: "The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page." — Fábio Duque Silva, Feb 21 '14 at 00:24

score 0 · Answer 1 · answered Feb 21 '14 at 00:24

0

You could get all the child "input" tags and "textareas" in that form and clean the values

$('#contact').find('input[type=text], textarea').attr("value", "")

I hope this is what you've asked

answered Feb 21 '14 at 00:24

Nicolò Taddei

96
3

This method would work - though this snippet is a bit incomplete - though anyone using it needs to be aware that this is not the same effect as `reset` if the form fields were originally non-empty. – helion3 Feb 21 '14 at 00:27
This is exactly what he is trying to achieve: http://stackoverflow.com/questions/2659252/clear-the-form-once-form-submitted – Nicolò Taddei Feb 21 '14 at 00:43

score 0 · Answer 2 · answered Feb 21 '14 at 00:45

I've made a little jsfiddle (far from smart or optimized), that might be useful for you.

In my case, the form is reset using $('#contact')[0].reset(); like you mentioned, but you can see where I used it and build your solution after it.

HTML

<form id="contact" action="">
    <input type="text" name="foo" />
    <input type="text" name="bar" />    
</form>

<button id="btnSubmit">Submit</button>
<button id="btnShowForm" style='display:none'>Show form again</button>

JS / jQuery

$("#btnSubmit").on("click", function () {

    $("#contact").fadeOut("fast", function () {
        $("#contact")[0].reset();
        $('#btnSubmit').hide();

        $(this).before("<p id='msg'> <strong>Success! Your request has been sent. We will respond to it as soon as possible. </strong></p>");

        setTimeout(function () {

            $('#msg').fadeOut();            
            $("#btnShowForm").fadeIn();
        }, 3000);

    });
});

$("#btnShowForm").on("click", function () {
    $("#contact").fadeIn();
    $("#btnSubmit").fadeIn();
    $(this).hide();    
});

jsFiddle

http://jsfiddle.net/fabio_silva/Lh2uq/

How to reset a form with jQuery?

2 Answers2

HTML

JS / jQuery

jsFiddle