CODEWITHSUNDEEP
javascripthtmlforms
Paul D. Waite
Paul D. Waite

Reputation: 98786

How can I run some JavaScript *after* a form submit event?

I'm working on an HTML form that may take a few seconds to submit. I'd like to disable some of the fields in the form after it's submitted.

I can do this in a handler on the form's submit event, but this fires before the form submits. If I disable the controls then, their values aren't included in the post data sent to the server.

I've tried cancelling the submit event in my handler, removing my submit event handler from the form, submitting the form myself via JavaScript, and then disabling the controls, but the problem there is that I need to know which button the user clicked on to submit the form. This information is in the original form submit, but obviously isn't in the one I trigger manually (as no button was clicked).

I could try to copy this information into my manual form submit, but is there a way to run my disabling code after the form submits?

Upvotes: 17

Views: 61826

Answers (5)

lofihelsinki
lofihelsinki

Reputation: 2571

You could delay the execution of your operations so that they are called only after the submit has been made:

$('#myForm').submit(function() {
    setTimeout(function() {
        // Run disabling code here
    }, 1);
    return true;
}

setTimeout(fn, 1) will place the function inside at the end of the execution queue, so that the form submission has been started before the functions run.

setTimeout can be used for queuing operations a bit like thread indexing or z-index:

StackOverflow: Why is setTimeout(fn, 0) sometimes useful?

Upvotes: -2

Kay van Bree
Kay van Bree

Reputation: 2082

This is pretty much the same as sp00m's answer, except it uses Javascripts native submit to prevent the recursive call.

$('#myForm').submit(function() {
    this.submit();
    disableFields(); // your own function
    return false;
});

Upvotes: 3

Kev
Kev

Reputation: 16321

Don't allow further submits by disabling the submit buttons, you don't need to do anything else. Alternatively, hide the form and replace it with something that spins so users are mesmerized into thinking that Something Important is happening.

Upvotes: 22

Basith
Basith

Reputation: 1075

After submiting the form you can trigger this function:

function name() {
    $("#target :input").attr("disabled", true);
    return true;
}

This code will disable all the from fields descended from the element with "target" as its id.

This version just matches all input elements:

function name() {
    $("#target input").attr("disabled", true);
    return true;
}

You have to include the jQuery library for this code to work.

Upvotes: 0

DZittersteyn
DZittersteyn

Reputation: 628

You could use jQuery's .post() to submit, and .button().click() to detect what button was clicked

.post() takes a function to execute after the submission is complete

Upvotes: -1

Related Questions