Submit

Question

I'm trying to set a element to disable after clicking (after submitting the data). The issue is, when I use the javascript to disable on click, the button is disabled, but does does not submit the information.

function disableButton(btn) {
  document.getElementById(btn.id).disabled = true;
  alert("Button has been disabled.");
}

<center><button type="submit" id="btn1" name="Submit" onclick="disableButton(this)">Submit</button></center>

Does anyone know how to fix this? I'm not very experienced. I've had it work with the a form, but not as a element. Thanks.

BTW I never tried that but I assume that if the button is disabled, it's not supposed to change a click into a submit event — Denys Séguret, Sep 21 '18 at 11:48
Please post the full code. Is this button inside a form? What are you trying to archieve? Please read https://stackoverflow.com/help/how-to-ask — Jesse de gans, Sep 21 '18 at 11:50
The `` tag is deprecated and not supported in HTML5. Use CSS instead. https://www.w3schools.com/tags/tag_center.asp — Jeremy Thille, Sep 21 '18 at 11:51

score 3 · Accepted Answer · answered Sep 21 '18 at 11:57

Try to delay the disabling with a timeout 0. This should disable the button at the end of script's lifecycle, allowing the form to post before :

function disableButton(btn) {
  setTimeout( () => {
    btn.disabled = true;
  }) // No need to set a duration for the timeout
}

<form>
<button type="submit"
       onclick="disableButton(this)"
       action="/test">Submit</button></form>

Now if you check your console, you see a GET request being made.

Also, <center> is deprecated and not supported in HTML5.

Ruan Mendes · Answer 2 · 2018-09-21T13:32:26.833

0

If you use addEventListener, you won't have this problem See below for an explanation and examples. Also note that this is a Chrome/Safari specific bug from what I have tested.

What you were doing disables the button during the processing of the click. When the browser checks if it should submit the form, it doesn't (though I haven't found something that says it should in the standard).

If you handle it in the submit event of the form, the check on whether the button was disabled has already passed.

Disables using onclick so you still see it here in this example.
<form>
  <button type="submit" action="/test" onclick="this.disabled = true">Submit</button>
</form>

Disables it in the onsubmit handler, so it disappears here in this example.
<form onsubmit="this.querySelector('button').disabled = true">
  <button type="submit" action="/test">Submit</button>
</form>

However, as I worked on a version without inline handlers, I realized the (seemingly incorrect) behavior cannot be reproduced when done that way.

I would suggest you use JS event handlers and you should handle the submit event since it is more accurate semantically (and even using addEventListener does not fix the problem in Safari).

function queryRegister(query, eventName, handler) {
   document.querySelector(query).addEventListener(eventName, handler);
}

queryRegister("#click-handler-form button", "click", (e) => {
    e.target.disabled = true;
});

queryRegister("#submit-handler-form", "submit", (e) => {
    e.target.querySelector("button").disabled = true;
});

Both submit without inline handlers
<hr />
button.onclick
<form id="click-handler-form">
  <button type="submit" action="/test">Submit</button>
</form>

form.onsubmit
<form id="submit-handler-form">
  <button type="submit" action="/test">Submit</button>
</form>

edited Sep 21 '18 at 13:32

answered Sep 21 '18 at 12:05

Ruan Mendes

90,375
31
153
217

Using inline event handlers isn't a _"proper solution"_. – Cerbrus Sep 21 '18 at 12:32
@Cerbrus I'm not suggesting people use inline handlers. The inlining of events is just to show the point with less code. – Ruan Mendes Sep 21 '18 at 12:38
Then I suggest not advertising your answer as the _"proper solution"_, on the accepted answer. – Cerbrus Sep 21 '18 at 12:38
It is proper in the sense that it doesn't use a blind `setTimeout` and has an explanation as to why you should do it. That is the point of the question. I'll change this to suit you and others that may be irked by this... – Ruan Mendes Sep 21 '18 at 12:40
@Cerbrus Turns out this is a Chrome specific bug, doesn't happen in Firefox or IE 11. Using `addEventListener` does fix it in all browsers. – Ruan Mendes Sep 21 '18 at 13:12
Created a bug for Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=887935 – Ruan Mendes Sep 21 '18 at 13:31
That downvote wasn't necessary at all. I upvoted your answer because it works. Some hater has been downvoting all our answers. – Jesse de gans Nov 06 '18 at 12:39
@Jessedegans Thanks :) I did learn a lot from the research for this, hope you did too. – Ruan Mendes Nov 06 '18 at 14:02

score 0 · Answer 3 · answered Sep 21 '18 at 12:13

Why don't you try putting the disable function on the form?

Here's the code and site if you are: ** https://www.the-art-of-web.com/javascript/doublesubmit/ **

<form method="POST" action="..." onsubmit="myButton.disabled = true; return true;">

<input type="submit" name="myButton" value="Submit"> </form>

Also, try to use onsubmit.

If you are using js validation you can use this

<form method="POST" action="..." onsubmit="return checkForm(this);">
...
<input type="submit" name="myButton" value="Submit">
</form>

<script type="text/javascript">

  function checkForm(form)
  {
    //
    // validate form fields
    //

    form.myButton.disabled = true;
    return true;
  }

</script>

pirogtm · Answer 4 · 2018-09-21T11:51:33.577

-1

If <button type="submit"> tag is not inside <form></form> there is nothing to submit. <button type="submit"> submits only it's parent <form>

edited Sep 21 '18 at 11:51

answered Sep 21 '18 at 11:50

pirogtm

90
7

3

You don't know that. Maybe it is. – Jeremy Thille Sep 21 '18 at 11:52
Yes you're right. This was just an extract of my code. It is infact inside a form element, but it's not relevant to this issue. – jsn Sep 21 '18 at 11:52
You can set the a button's form attribute to the form that you want it to submit. See https://www.impressivewebs.com/html5-form-attribute/ – Ruan Mendes Sep 21 '18 at 12:08

score -1 · Answer 5 · edited Sep 21 '18 at 11:55

-1

Try to submit the form with Javascript.

function disableButton(btn) {
   document.getElementById(btn.id).disabled = true;
   document.getElementById('formId').submit();
   alert("Button has been disabled.");
}

edited Sep 21 '18 at 11:55

Jesse de gans

1,432
1
14
27

answered Sep 21 '18 at 11:52

Sankar Subburaj

4,992
12
48
79

Submit not submitted with javascript disable

5 Answers5

Submit