PDA

View Full Version : disabled submit button

Kram
05-24-2004, 09:52 PM
I have a page which contains alot of checkboxes, I need to know how to make the submit button disabled unless 1 of the checkboxes is pressed?
Dirk Lance
05-24-2004, 11:28 PM
here's some googles

http://www.downloadfreetrial.com/scripts/javascript/java354.html


http://www.downloadfreetrial.com/scripts/javascript/java374.html

http://www.cgi-bin.com/Detailed/5099.html
Kram
05-25-2004, 12:00 AM
thanks I got it but for those interested:

here is a snippet

<html>
<head>
<script language="JavaScript">

function Disab(val) {

if(val=="1")
{form.submitbutton.disabled=false}

}

</script>
</head>
<body>

<input Disabled name ="submitbutton" type="submit" value="Search">

<input type="checkbox" name="chkbox" value="Access" onClick="Disab(1)" />Access
</body>
</html>


I just got it from some site somewhere...
Kram
05-26-2004, 11:59 PM
Ok i have the code that will un-disable the button when a checkbox is checked, but need to know how to make it so that at anytime a checkbox is unchecked it disables the button.

Any ideas?
agent002
05-27-2004, 06:42 AM
How about this:
<form>
<input type="checkbox" onclick="this.form.submitButton.disabled = !this.checked;">
<input type="submit" name="submitButton" disabled="disabled">
</form>
Kram
05-27-2004, 07:16 PM
Well it kinda works, but because I have multiple checkboxes, if you check 3 of them, then uncheck 1 of them, the submit button becomes disabled
agent002
05-28-2004, 02:13 AM
oh... then put this code between the <head> and </head> tags:
<script type="text/javascript">
function boxes(w, m, e){
var nodes = w.childNodes;
var cb = 0;
for(var i = 0; i < nodes.length; i++){
if(nodes[i].tagName && nodes[i].tagName.toLowerCase() == 'input' &&
nodes[i].type.toLowerCase() == 'checkbox' && nodes[i].checked) cb++;
}
if(cb >= m) e.disabled = false;
else e.disabled = true;
}
</script>
And use this code for the checkboxes:
<div>
<input type="checkbox" onclick="boxes(this.parentNode, 1, this.form.submitButton);">
<input type="checkbox" onclick="boxes(this.parentNode, 1, this.form.submitButton);">
<input type="checkbox" onclick="boxes(this.parentNode, 1, this.form.submitButton);">
</div>
and this for the submit button:
<input type="submit" name="submitButton" value="Submit" disabled="disabled">
afterburn
05-28-2004, 05:48 PM
function CheckBoxs(thisForm)
{
var blnIsChecked = false;
for(i = 0;i<thisForm.elements[0].length-2;i++)
{
if(thisForm.elements[i].checked)
{
blnIsChecked = true;
break;
}
}
return blnIsChecked;
}


assuming that all of the items are check boxes. But would double check that with elements[i].type or something like that....
Kram
05-30-2004, 06:56 PM
thanks guys, bur Agent, your code is still disabling if there is any boxes that get unchecked, regardless or wether or not there are others checked still.

And afterburn, im getting the error:

elements[0] is null or not an object
afterburn
05-30-2004, 11:10 PM
corrected:

function CheckBoxs(thisForm)
{
var blnIsChecked = false;
for(i = 0;i<thisForm.elements.length-1;i++)//0 based -1 for sumbit buttong
{
if(thisForm.elements[i].checked)
{
blnIsChecked = true;
break;
}
}
return blnIsChecked;
}


in the form the on change event place
CheckBoxs(document.forms[0])


sorry didn't check code before submittting.
Kram
05-31-2004, 12:02 AM
Im getting the error now of elements.length is null or not an object

Also I dont exactly understand how you code is effecting the disabled state of the submit button.
afterburn
05-31-2004, 03:01 AM
The funciton is designed to check to see if any of the items are checked you should combined what was already submitted and the code I provided to handle this.

The code I provided is for checking to see if any of the checkboxes are checked if so you need to

document.forms[0].SubmitButtonName.disabled = true;
mihaela
05-31-2004, 08:56 AM
why don't you try a javascript validation. When the button pressed, you check with a javascript if yhe box is checked, and if it is, you submit your form from your javascript function.
Mihaela
Emploi suisse (http://www.js24-fr.ch)
agent002
05-31-2004, 09:07 AM
Originally posted by Kram
thanks guys, bur Agent, your code is still disabling if there is any boxes that get unchecked, regardless or wether or not there are others checked still.
Hmm, you have probably implemented it wrong, it doesn't do that to me. I have it online here: http://members.surfeu.fi/jerkku/htmlforums/checkboxes.html and it works perfectly.
Kram
05-31-2004, 07:40 PM
Originally posted by agent002
Hmm, you have probably implemented it wrong, it doesn't do that to me. I have it online here: http://members.surfeu.fi/jerkku/htmlforums/checkboxes.html and it works perfectly.

Its the weirdest thing, I look at your page, copdied and pasted nearly all of the source code, still doent work...

My page is generated using ASP so ill post the source code that it produces (the relevant parts anyways, there is alot of other stuff that wont be relative to this problem).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DSS - Delivery Support Services</title>
</head>

<script type="text/javascript">
function boxes(w, m, e){
var nodes = w.childNodes;
var cb = 0;
for(var i = 0; i < nodes.length; i++){
if(nodes[i].tagName && nodes[i].tagName.toLowerCase() == 'input' &&
nodes[i].type.toLowerCase() == 'checkbox' && nodes[i].checked) cb++;
}
if(cb >= m) e.disabled = false;
else e.disabled = true;
}
</script>

<body>

<form name="form" action="search.asp?mode=results" method="post" onChange="CheckBoxs(document.forms[0])">

<h3>Search</h3>
Use the appropriate information given to find the required document<br /><hr>
<table>
<tr>
<td>
<input type="submit" name="submitButton" value="Submit" disabled="disabled">
</td>
</tr>
<tr>
<td><b>Keywords</b></td>
</tr>
<tr valign="top">
<td>
<table>

<tr>

<td><input type="checkbox" name="chkbox" value="Access" onclick="boxes(this.parentNode, 1, this.form.submitButton);" />Access</td>

<td><input type="checkbox" name="chkbox" value="Audit" onclick="boxes(this.parentNode, 1, this.form.submitButton);" />Audit</td>

<tr>

<td><input type="checkbox" name="chkbox" value="Control" onclick="boxes(this.parentNode, 1, this.form.submitButton);" />Control</td>

<tr>

<td><input type="checkbox" name="chkbox" value="DSS" onclick="boxes(this.parentNode, 1, this.form.submitButton);" />DSS</td>

<tr>

<td><input type="checkbox" name="chkbox" value="Endevour" onclick="boxes(this.parentNode, 1, this.form.submitButton);" />Endevour</td>

<tr>

<td><input type="checkbox" name="chkbox" value="Framework" onclick="boxes(this.parentNode, 1, this.form.submitButton);" />Framework</td>

<tr>

<td><input type="checkbox" name="chkbox" value="Guidelines" onclick="boxes(this.parentNode, 1, this.form.submitButton);" />Guidelines</td>

<tr>

<td><input type="checkbox" name="chkbox" value="harvest" onclick="boxes(this.parentNode, 1, this.form.submitButton);" />harvest</td>

<tr>

<td><input type="checkbox" name="chkbox" value="Implementation" onclick="boxes(this.parentNode, 1, this.form.submitButton);" />Implementation</td>

<td><input type="checkbox" name="chkbox" value="Instructions" onclick="boxes(this.parentNode, 1, this.form.submitButton);" />Instructions</td>

<tr>

<td><input type="checkbox" name="chkbox" value="Overview" onclick="boxes(this.parentNode, 1, this.form.submitButton);" />Overview</td>

<tr>

<td><input type="checkbox" name="chkbox" value="Planning" onclick="boxes(this.parentNode, 1, this.form.submitButton);" />Planning</td>

<td><input type="checkbox" name="chkbox" value="Procedures" onclick="boxes(this.parentNode, 1, this.form.submitButton);" />Procedures</td>

<td><input type="checkbox" name="chkbox" value="Process" onclick="boxes(this.parentNode, 1, this.form.submitButton);" />Process</td>

<tr>

<td><input type="checkbox" name="chkbox" value="SCM" onclick="boxes(this.parentNode, 1, this.form.submitButton);" />SCM</td>

</table>
</td>
</tr>
</table>
</form>

</body>
</html>
agent002
06-01-2004, 09:15 AM
I see, you don't have the div. And you couldn't even put the div in there as you are using a table with the checkboxes in separate cells... sorry, I should have used .getElementsByTagName() from the beginning. Here, this should work:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DSS - Delivery Support Services</title>
</head>

<script type="text/javascript">
function boxes(w, m, e){
var theDiv = w.parentNode;
while(!theDiv.tagName || theDiv.tagName.toLowerCase() !== 'div') theDiv = theDiv.parentNode;
var inputs = theDiv.getElementsByTagName('input');
var cb = 0;
for(var i = 0; i < inputs.length; i++){
if(inputs[i].type.toLowerCase() == 'checkbox' && inputs[i].checked) cb++;
}
if(cb >= m) e.disabled = false;
else e.disabled = true;
}
</script>

<body>

<form name="form" action="search.asp?mode=results" method="post">

<h3>Search</h3>
Use the appropriate information given to find the required document<br><hr>
<table>
<tr>
<td>
<input type="submit" name="submitButton" value="Submit" disabled="disabled">
</td>
</tr>
<tr>
<td><b>Keywords</b></td>
</tr>
<tr valign="top">
<td>

<!-- remember: --> <div>

<table>

<tr>

<td><input type="checkbox" name="chkbox" value="Access" onclick="boxes(this, 1, this.form.submitButton);">Access</td>

<td><input type="checkbox" name="chkbox" value="Audit" onclick="boxes(this, 1, this.form.submitButton);">Audit</td>

<tr>

<td><input type="checkbox" name="chkbox" value="Control" onclick="boxes(this, 1, this.form.submitButton);">Control</td>

<tr>

<td><input type="checkbox" name="chkbox" value="DSS" onclick="boxes(this, 1, this.form.submitButton);">DSS</td>

<tr>

<td><input type="checkbox" name="chkbox" value="Endevour" onclick="boxes(this, 1, this.form.submitButton);">Endevour</td>

<tr>

<td><input type="checkbox" name="chkbox" value="Framework" onclick="boxes(this, 1, this.form.submitButton);">Framework</td>

<tr>

<td><input type="checkbox" name="chkbox" value="Guidelines" onclick="boxes(this, 1, this.form.submitButton);">Guidelines</td>

<tr>

<td><input type="checkbox" name="chkbox" value="harvest" onclick="boxes(this, 1, this.form.submitButton);">harvest</td>

<tr>

<td><input type="checkbox" name="chkbox" value="Implementation" onclick="boxes(this, 1, this.form.submitButton);">Implementation</td>

<td><input type="checkbox" name="chkbox" value="Instructions" onclick="boxes(this, 1, this.form.submitButton);">Instructions</td>

<tr>

<td><input type="checkbox" name="chkbox" value="Overview" onclick="boxes(this, 1, this.form.submitButton);">Overview</td>

<tr>

<td><input type="checkbox" name="chkbox" value="Planning" onclick="boxes(this, 1, this.form.submitButton);">Planning</td>

<td><input type="checkbox" name="chkbox" value="Procedures" onclick="boxes(this, 1, this.form.submitButton);">Procedures</td>

<td><input type="checkbox" name="chkbox" value="Process" onclick="boxes(this, 1, this.form.submitButton);">Process</td>

<tr>

<td><input type="checkbox" name="chkbox" value="SCM" onclick="boxes(this, 1, this.form.submitButton);">SCM</td>

</table>

<!-- remember: --> </div>

</td>
</tr>
</table>
</form>

</body>
</html>

P.S. HTML 4.01 shouldn't have slashes at the end of omitted tags (e.g. <br />), only XHTML should.
Kram
06-01-2004, 07:03 PM
kick ass man, your a champ! Big Help!! :D