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

Posted on 2007-07-25
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 48

    Expert Comment

    by:Ryan Chong
    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

    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

    Thanks cLFlaVA - that did the trick!.  

    - Yvan

    Featured Post

    Highfive Gives IT Their Time Back

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    745 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

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now