Disabling button with javascript: FF vs IE

Question

I have a row of buttons, which all create a pdf file which I want to open in a new tab. This way the button page stays on top, and the pdf's open to get printed. To prevent clicking a button twice I disable the button, like this (I use python):

<input type='submit' value='Factureren' name='submitbutton' id='%s'
onclick="javascript:document.getElementById('%s').disabled=true; 
document.getElementById('%s').className='button_disabled';"> % ((but_id,) *3)

In FF3 this works fine, i.e. the form is submitted, the script executed and then the button disables. In IE the button just disables, but the form script isn't executed.

Is there a solution to this IE problem?

Answer 1

It is easier to do:

    <input type='submit' value='Factureren' name='submitbutton' id='%s' 
onclick="this.disabled=true; this.className='button_disabled';"> % ((but_id,) *3)

I don't know if this solves your problem but it is what I would do in a case like this. I think you don't need "javascript:" anyway.

Answer 2

You can try using a normal button and triggering the form submit() function in the onclick event:

<input type="button" value="Factureren" name="submitbutton" 
onclick="this.disabled=true; this.className='button_disabled'; this.form.submit();">

Answer 3

Maybe try to attach the handler to the onsubmit event of the form instead of the click of the button? That would also then work if the user pressed ENTER instead of clicking your button.

Answer 4

Instead of controlling the div, why not control the actual submit button? This works universally in all browsers I have tested (IE6+ FF1+ and Safari)

function toggleSubmit(){  
    frm=document.forms[0]
    if(frm.submit.disabled==true){
        frm.submit.disabled=false;
    }else{
       frm.submit.disabled=true;
    }
 }

Then on the button all you have to call is

<input type='submit' value='Factureren' name='submitbutton'
onclick="toggleSubmit();false;"> % ((but_id,) *3)

Answer 5

<input type="submit" value="Factureren" name="submitbutton' id="%s"
onclick="this.disabled = true; this.className = 'button_disabled'; true;">
% ((but_id,) *3)

You can use this instead of document.getElementById('%s'). Also, you need to return true for the onclick event to pass.

You can also disable the button in the onsubmit handler for the form. This is probably more fool-proof.

Also, it'd be nice if you didn't use class specificly for a disabled button. CSS selectors are designed to select disabled buttons for you.

Answer 6

The code is cleaner, but the problem remains.

Answer 7

It is easy: a disabled submit button do not submit a form in IE. Consider to restructure your code:

• Use a regular button, disable it, and call form.submit() from its handler.
• Do not disable the button in its "onclick", but save it, and do it in form's onsubmit.

Answer 8

Look at this part:

onclick="javascript:document.getElementById('%s').disabled=true; 
document.getElementById('%s').className='button_disabled';"

The "javascript:" is unnecessary and wrong.

onclick="document.getElementById('%s').disabled=true; 
document.getElementById('%s').className='button_disabled';"

"javascript:" is the URL 'protocol' used in links, not in onclick actions.

Additionally, try to tell the form to submit. I think this would be correct:

onclick="document.getElementById('%s').disabled=true; 
document.getElementById('%s').className='button_disabled';
this.form.submit();"