15

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?

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
  • 2
    Can't you make them `readonly` in the "submit" handler? – Pointy Aug 29 '12 at 15:21
  • Use the click event of the submit button to disable your fields. – j08691 Aug 29 '12 at 15:22
  • @j08691 that "click" also happens before the form has been submitted; it's pretty much the same thing as doing it in the "submit" handler. – Pointy Aug 29 '12 at 15:28
  • 1
    What would it mean to disable things after a form submits? A sibmit starts a new request; the form is going away. What's the point? If you want to prevent a double-submit, disable all the submit buttons. I guess you could copy disabled fields to hidden fields, but you're fighting a race condition-why bother? – Dave Newton Aug 29 '12 at 15:29
  • @DaveNewton: the form might take a few seconds to actually submit, so its UI might remain on the screen for longer than you'd expect. (I think - I haven't actually tested this in production.) – Paul D. Waite Aug 29 '12 at 15:42
  • @PaulD.Waite Right, but so what? Don't allow further submits by disabling the submit buttons--why would you need to do anything else? Or hide the form and replace it with something that spins to users are mesmerized into thinking Something Important is happening. – Dave Newton Aug 29 '12 at 15:52
  • @Pointy: ah yes — I feel a bit stupid for not thinking of that, but it works great. Much appreciated — if you’d like to put it in as an answer, I’d be delighted to accept it. – Paul D. Waite Aug 30 '12 at 13:47

5 Answers5

22

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.

Kev
  • 15,899
  • 15
  • 79
  • 112
  • 18
    The second sentence of this answer might be the greatest thing ever posted on this site :) – Sheldon R. Dec 18 '13 at 15:39
  • 1
    This doesn't work if the submit button has a value. Disabling it in the event will not include it in the request. – OrangeDog Mar 31 '22 at 12:40
  • 1
    @OrangeDog I just dealt with that exact problem by disabling the submit button via raf so it occurs right _after_ the submit event: `requestAnimationFrame(() => btn.disabled = true)` – tvanc Oct 25 '22 at 19:02
2

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;
});
Scuba Kay
  • 2,004
  • 3
  • 26
  • 48
  • Won't this have the danger of making recursive form submits? When `submit()` is called inside `onsubmit` handler, it's basically calling itself? Usually this stops when the first submit is completed, but if there is some lag in the browser, it could cause an `out of stack space` error in IE. – lofihelsinki Nov 12 '19 at 11:40
  • Just add evt.preventDefault() This stops the original form submit action, allows you to add some JS code and later submit with the `this` context – sam kirubaharan Jul 24 '23 at 06:45
0

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.

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
Basith
  • 1,077
  • 7
  • 22
  • 1
    You left out the part about "after a form submit". (I'm aware the discussion went the other way, but the title and question is still about *after*) – David Balažic Nov 21 '16 at 20:51
  • This answer makes an assumption that code can be run *after* the form has been submitted. That's exactly what the question is about, *how* can code be run after submit? – lofihelsinki Nov 12 '19 at 11:22
-1

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

DZittersteyn
  • 628
  • 3
  • 8
  • Check @sp00m 's answer, that is a better way to do it. – DZittersteyn Aug 29 '12 at 15:23
  • 2
    This question isn't tagged with jQuery. – j08691 Aug 29 '12 at 15:26
  • 2
    No, but it is tagged with Javascript, and jQuery is javascript. If the OP doesn't want to use jQuery, that's fine, but I couldn't make that out from the question – DZittersteyn Aug 29 '12 at 15:28
  • 5
    @DZittersteyn generally it's considered inappropriate to provide a solution that relies on a library that wasn't asked for. You're not incorrect, but answers would be an irritating repetitive chorus of "INSTALL JQUERY PORBLEM SOLVED" if we didn't stick to that convention. – Pointy Aug 29 '12 at 15:30
  • jQuery is the answer to all!! Nah, I get what you mean, I'll try to take care to check the tags from now on – DZittersteyn Aug 29 '12 at 15:31
  • 6
    [It's well-known jQuery solves everything.](http://www.mikedoesweb.com/wp-content/uploads/2012/05/20091116-so-large.gif) – Dave Newton Aug 29 '12 at 15:34
  • 4
    @j08691 for practical problems I'd love to get a practical solution. If someone asks for something that is very easily solved with jQuery (it looks as if the OP is trying to impement AJAX in JS), I'll try to give them the answer that will save a lot of work. As I said in reply to Pointy, I'll try to keep tags in mind next time, didn't mean to break general appropriateness. – DZittersteyn Aug 29 '12 at 15:35
  • 6
    I have to agree with @DZittersteyn. Let's say I was the OP and I came here and none of the solutions worked, or worked as well as I wanted, except for someone's answer recommending a jQuery method. Even *if* I can't or won't use jQuery, at least the person's answer can point me in the right direction. For example, I may, at that point, download jQuery, look at the source to see how it's done, and then do the same in my own code. In my opinion, there's no such thing as a wrong answer here, as long as it's at least somewhat germane to the original question. – Aquarelle Sep 02 '15 at 21:28
-2

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?

lofihelsinki
  • 2,491
  • 2
  • 23
  • 35