Form Button won't re-enable after having been disabled via onClick

Posted on 2007-07-25
Medium Priority
Last Modified: 2008-01-09
I'm using a regular button (instead of a submit button) to submit my form.  

The button triggers a javascript function onClick that initiates a required field checking routine, which either prompts the user about missing required fields, .. or submits the form.

In addition to the required field checking script being triggered onClick, I am also disabling the button (to prevent multiple clicks).  My button code is as follows:

<input name="process" id="process" type="button" value="Process Order" onClick="check(myform,myform.elements.length);document.getElementById('process').disabled = true;" style="cursor:pointer;" />

My form has the name "myform" as well as the id value of "myform"

The button DOES become disabled when clicked - that part is no problem.
But I was thinking that I could update my required field checking javascript (stored in an external JS file) to re-enable the button if users get prompted about missing required fields:

document.getElementById('process').disabled = false;

(I have this line right above the javascript alert message that prompts the user)

Well it's NOT working.  

The button in the form remains disabled after the user clicks on the "OK" button in the alert dialog.  
The behavior is the same in both Firefox 2 and IE7.  

I've tried to add onSubmit="document.getElementById('process').disabled = false;" to the form tag, .. thinking that this would be the most logical approach.  But that doesn't seem to work either.  

How can I achieve this effect?  Ideally, I'd like a solution that doens't require me to modify my JS file for the required field checking.  Any tips or advice would be appreciated.

- Yvan

Question by:IDEASDesign
LVL 54

Expert Comment

by:Ryan Chong
ID: 19566937
perhaps you can have 2 graphic images, one represents "Enable" state, another represents "Disable" state. So when you click on the image, just swap the image accordingly.

I hope this makes sense.
LVL 13

Accepted Solution

cLFlaVA earned 2000 total points
ID: 19567612
My suggestion is two-fold:

1) use a setTimeout function:

    setTimeout( "document.getElementById('process').disabled = false", 100 );

2) place the call AFTER the alert, not BEFORE.

Author Comment

ID: 19568796
Thanks cLFlaVA - that did the trick!.  

- Yvan

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question