Entry
How can I disable (and enable again) a submit button?
Feb 24th, 2002 04:33
Martin Honnen,
NN6 and IE4+ support the
disabled
attribute specified in HTML 4 for
input
elements. You can script that attribute as a property setting
document.formName.inputName.disabled = true
to disable the button and
document.formName.inputName.disabled = false
to enable the button again.
However NN4 doesn't support the disabled attribute and therefore
doesn't have any property in its DOM to disable the button. All you
can do with NN4 (and similar browsers) is assign an onclick handler
which cancels the form submission. You can furthermore change the
button face value (at least with NN4 on Win) to indicate the button is
disabled.
Here is complete code that allows you to disable an input
type="submit" button. It has been tested to work with NN4, NN6, IE6
and Opera6 but I am sure it will work with IE4+.
The page contains two functions to disable respectively enable a
submit button and two example forms where in the first the submit
button is disabled initially with JavaScript and enabled when the text
field is filled out. In the second form the submit can be
enabled/disabled by clicking a link.
<html>
<head>
<title>
disabling a form submit button
</title>
<script type="text/javascript">
function cancelAction (evt) {
return false;
}
function disableSubmitButton (button) {
if (typeof button.disabled != 'undefined')
button.disabled = true;
else if (!button.buttonDisabled) {
button.oldValue = button.value;
button.oldOnclick = button.onclick;
button.value = 'DISABLED';
button.onclick = cancelAction;
button.buttonDisabled = true;
}
}
function enableSubmitButton (button) {
if (typeof button.disabled != 'undefined')
button.disabled = false;
else if (button.buttonDisabled) {
button.value = button.oldValue;
button.onclick = button.oldOnclick;
button.buttonDisabled = false;
}
}
</script>
</head>
<body>
<form name="formName"
action="jsInterpreter.html"
>
<input type="text" name="inputName"
onchange="if (this.value != '')
enableSubmitButton(this.form.submitButton);"
/>
<input type="submit" name="submitButton"
onclick="alert(event.type); return true;"
/>
<script type="text/javascript">
disableSubmitButton(document.formName.submitButton);
</script>
</form>
<hr />
<form name="formName2"
action="jsInterpreter.html"
>
<input type="text" name="inputName" />
<br />
<a href="javascript: void 0"
onclick="disableSubmitButton(document.formName2.submitButton);
return false;"
>disable submit button</a>
|
<a href="javascript: void 0"
onclick="enableSubmitButton(document.formName2.submitButton);
return false;"
>enable submit button</a>
<input type="submit" name="submitButton"
onclick="if (this.form.inputName.value == '') {
alert('Please enter a value.');
this.form.inputName.focus();
return false;
}
else
return true;"
/>
</form>
</body>
</html>
