How can I hide a form after submission with JavaScript?

Question

So I have these forms:

django template:

 {% for F in forms %}
    <input type="text" name="name/>
    <input type="number" name="number/>
    <input type="submit" class="button" [onclick="this.disabled=true,this.form.submit(); ??]> #how can I make this work?
 {%endfor%}

What the template code does is render out multiple forms based on the value of forms> I want the user to submit the form and then have the form either disappear(preferable) or at least disabled so that they can resubmit. How can I do this?

Are you submitting the form via ajax? Because if not, then hiding it would be pointless since the browser will be taking the user to the form submission script anyways. — Marc B, Sep 05 '14 at 15:11
possible duplicate of [How to disable html button using JavaScript?](http://stackoverflow.com/questions/3014649/how-to-disable-html-button-using-javascript) — ElGavilan, Sep 05 '14 at 15:12

cezar · Accepted Answer · 2014-09-10T09:25:20.857

If you have multiple forms on the page and want to handle them with JavaScript, I would suggest you to use jQuery. You could make something like:

$('input[type="submit"]').click(function() {
    // here comes your logic
    // and the next line removes the corresponding form
    $(this).parents('form').remove();
});

But as Marc B pointed out, you should submit the form via Ajax. I don't know what do you intend to do with the user input, but if you want to use Ajax then you could make something like:

$('form').submit(function() {
    $.ajax({
        // your logic
    });
});

Check the official documentation of jQuery for more details and adapt the examples to your needs.

EDIT:

if you want to prevent the form from submitting and refreshing the page, please change it slightly to:

$('form').submit(function(event) {
    $.ajax({
        // your logic
    });
    event.preventDefault();
});

How can I hide a form after submission with JavaScript?

1 Answers1