3

I'd like to disable a submit button after it's pressed using javascript.

myForm.onsubmit = function() { ... mySubmitButton.disabled = true; ... }

But when a user stops opening a new page while the current is still alive, the button remains Disabled.

The same result there will be if the content from server is a file (there will be no redirection to a new page in this case).

Is there a way to determine if the browser doesn't 'want' to load a new URL any more and re-enable mySubmitButton?

almar
  • 27
  • 2
  • This seems a bit contradictory. If you are disabling the submit button to prevent re-submission, then this is the desired behavior. If the user stops the page before any content has been sent, but processing has begun, then submitting the form again will initiate that processing again. Similarly if a file is the result of such processing, getting the file again *will* require that the form be submitted again. – Soumya Mar 02 '11 at 09:04
  • I argree that disabling a submit button solves the re-submission problem, but always disabled button looks a bit strange. If we wanted to show the "please wait" message there will be this message all the time making the user confused. It would be not bad to determine situations when a users remains on the current page after the submit button pressed. – almar Mar 02 '11 at 10:02
  • This is not reasonably possible. If you need to avoid duplicate submission, then that's something you should be doing server-side. – RoToRa Mar 02 '11 at 12:40
  • I've found a solution to this problem for IE. It's to periodically check if document.readyState != 'complete' (it should be started after onbeforeunload). It seems like there aren't any possible solutions for other browsers. I tried to use window.onabort, but it doesn't fire in Chrome. If there aren't any solutions to the problem it means that it's not a right thing to block forms or show any "please wait" messages during the page redirection because we'll get an ugly interface in this case. – almar Mar 02 '11 at 14:12
  • You can try issuing an AJAX request to check if the server has really received the data. – Thai Mar 07 '11 at 04:36

2 Answers2

1

I think you can use setTimeout to call a function that re-enables the button. The timeout must be a reasonable value, like 5000 (5s). I don´t remember if the setTimeout/Interval calls are executed after page redirect, so, test it first.

Adilson de Almeida Jr
  • 2,761
  • 21
  • 37
1

There are several ways to do this if you really need to do it all client side:

  1. Try to reenable the button if user decides to edit again e.g. clicks on any form field.

  2. What @Adilson said, setTimeout is also a good solution, you don't need to wait more then a few seconds to know something gone wrong.

  3. You can also submit the form with the jQuery ajax call which can return the command to re-enable the button if submitting failed.

I'm sure there are more solutions. I hope those 3 will give you an idea to solve the problem you have.

Edi Budimilic
  • 4,526
  • 3
  • 19
  • 22