how to Disable enable submit button using javascript

[simora]

How can I have the submit button disabled by default, an enable it only if 2 specific input box values match. or If a specific form field is => than some value in another form field or hidden field, the Submit button is re-enabled. ( activated / unhidden)


I don't want the user to click anything to re-activate or unhide the Submit button. If I can actually hide it at startup, and then unhide it based on the above conditions, that would also work, and possibly preferably.

As it stands right now, my submit button is like this.

<input class="btn" onclick="finalCheck(this.form)"
tabindex="17" value="Process" type="button">

I'm also interested in hiding a section of my page based also on input field values.

Any ideas, suggestions, code etc.. etc.... welcome.

Thanks

[gil davis]

Add the keyword "disabled" to the button. That will disable it by default. To enable it, add an onblur handler to the required form fields that tests for your criteria and if good, set the disabled property to false.

<script type="text/javascript">
function checkEnableSubmit() {
  if (...) // some logic to determine if it is ok to go
    {document.getElementById("xx").disabled = false;}
  else // in case it was enabled and the user changed their mind
    {document.getElementById("xx").disabled = true;}
}
</script>
...
<input type="button" id="xx" disabled ...>

I have to ask - why don't you just do a "normal" form validation?

[ricp]

Don't disable the submit button if you are trying to stop multiple submissions, some browsers don't like it. A more elegant way is to stop the submission like so:

<form .. .. onsubmit="if (this.getAttribute('submitted')) return false; this.setAttribute('submitted','true');">

'true' isn't needed, per se, it just needs to be a string value.

[gil davis]

Another point - what if the user doesn't have javascript enabled?

[simora]

Thanks guys:

Got that section to work OK! If the user does not have Javascript, they wont get to see the form. A PDF version is provided for them somewhere else.

I'm interested in finding out if anyone has some sample code to hide/ unhide whole areas of a form based on the value of a specific input box.

eg. if variable age >18 show additional fields.

Thanks

[swatib]

there is a reset button which will reset the connection and it takes two min for data loading during which the reset button has to be disabled and later after two mins it should enable the button for the user for next time.

The code snippet is below:
if (RibModel == GromitXL)
stuff += "<input type=submit value=\"Reset Integrated Lights-Out 2\" onclick=\"return confirm('Data update takes 2 min. and a data collection interval - Do you really want to reset?');\">";
else
stuff += "<input type=submit value=\"Reset Remote Insight\" onclick=\"return confirm('Data update takes 2 min. and a data collection interval - Do you really want to reset?');\">";

stuff += "</form>";

writeSingleTableRow(stuff, "");
}

Please help me with this.Its a kind of urgency.

Thanks

[tirna]

Thanks guys:

I'm interested in finding out if anyone has some sample code to hide/ unhide whole areas of a form based on the value of a specific input box.

eg. if variable age >18 show additional fields.

Thanks

try something like this:

 
<input type="text" name="txtAge" onchange="chkAge(this.value);" />
 
function chkAge(age) {
// you'll need code to validate age to ensure it's a positive number
if(age > 18) {
   document.getElementById("divId").style.display="block";
} else {
   document.getElementById("divId").style.display="none";
}

divId is the container id of the part of the form you want to hide/display