Forum Moderators: open

Message Too Old, No Replies

Disable Submit Button

grey out submit

         

walker

8:47 am on Sep 23, 2003 (gmt 0)

10+ Year Member



Hi

Anyone know how to disable a submit button?

Kind Regards

Walker

mcavill

9:04 am on Sep 23, 2003 (gmt 0)

10+ Year Member



This will give you a checkbox and a submit button, clicking the checkbox will toggle between a greyed out sumbit and an active one.

<html>
<SCRIPT LANGUAGE="JavaScript">

function Disab() {
frm=document.forms['Form1']
if(frm.cbox.checked)
{frm.Submit1.disabled=false}
else {frm.Submit1.disabled=true}
}

</SCRIPT>
<form name="Form1">
<input type="checkbox" name="cbox" id="cbox" onClick="Disab();" checked>
<input type="submit" value="Submit" name="Submit1">
</form>
</html>

Hope that's of some help

walker

9:35 am on Sep 23, 2003 (gmt 0)

10+ Year Member



Hi

Thanks almost there, I want to make a submit button grey out after one click to avoid duplicate submits.

The code below does the job but also hangs the rest of the browser.

What am I doing wrong?

<form name="Form1">
<input type="submit" onmouseup="Form1.Submit1.disabled=true" value="Submit" name="Submit1">
</form>

Kind regards

Walker

walker

9:39 am on Sep 23, 2003 (gmt 0)

10+ Year Member



Is it because i need to remove the focus from the disabled object if so how?

MonkeeSage

11:59 am on Sep 23, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I think you'll have to use cookies to do it. Disabling a normal button works fine using the methods mentioned so far, but when you submit a form the page reloads (clearing any JavaScript variables that have been set). So the button will disable for a split second, then be enabled again. Try this to see what I mean...

 <script type="text/javascript">
<!--
var subd = false;
function disable() {
if (subd == true) {
document.getElementById("sub").disabled = true;
}
}
function do_disable() {
subd = true;
disable();
}
function alertSubState() {
alert(subd);
}
//-->
</script>

...

<div>
<form onsubmit="do_disable(); alertSubState();">
<input id="sub" type="submit" />
<input type="button" value="Check" onclick="alertSubState();" />
</form>
</div>

...while the first alert is open showing "true", you can see that the button is disabled in the background, but then after the page reloads, it is back to being enabled.

I think you need to set a cookie onsubmit and then read the cookie onload to determine whether the button should be enabled or disabled.

The only other way I can think of would be to use a GET method on your form, and check onload if (window.location.search.length > 1)...like...

 <script type="text/javascript">
<!--
function disableSubmit() {
if (window.location.search.length > 1) {
document.getElementById("sub").disabled = true;
}
}
window.onload = disableSubmit;
//-->
</script>

...

<div>
<form method="GET">
<input name="foo" type="text" value="blah" />
<input id="sub" type="submit" />
</form>
</div>

Jordan

ritch_b

12:50 pm on Sep 23, 2003 (gmt 0)

10+ Year Member



If it's greying out on submit you want, might be worth giving this [javascript.internet.com] one a try.

I've found this [javascript.internet.com] one to be of use in the past and whilst it won't grey the button out, it prevents multiple submissions and does basic validation too.

Hope they're of use.

R.