PDA

View Full Version : Multiple Checkboxes: Enable & Disable Submit Button

vorl
12-03-2005, 12:00 AM
Hi

Can someone help me to create this script. I have 5 checkboxes, and a image submit button.
I would like it so when the user hasnt selected any boxes the submit button image would say nothing and disables the button to stop the form from being submitted. When they just select 1 box the submit button image would say 'select more' and disables the button to stop the form from being submitted. When the user selects 2, 3 or 4 boxes the submit button image should say 'submit' and enable the button for submitting the form. But if they select 5 boxes the submit button image should say 'too many selected' and disables the button to stop the form from being submitted.

Hope I explained myself well enough!! :)

Thanks

vorl:thumbsup:
vwphillips
12-03-2005, 10:25 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function CkBoxCnt(obj){
txt=document.getElementById('Txt');
but=document.getElementById('But');
but.onclick=null;
ckbxs=obj.getElementsByTagName('INPUT');
nu=0;
for (zxc0=0;zxc0<ckbxs.length;zxc0++){
if (ckbxs[zxc0].checked){
nu++;
}
}
txt.firstChild.data=' ';
if (nu>1&&nu<5){
txt.firstChild.data='Submit';
but.onclick=function(){ document.fred.submit(); }
}
else if (nu>4){
txt.firstChild.data='Select Less';
}
else if (nu>0){
txt.firstChild.data='Select More';
}
}
//-->
</script></head>

<body>
<form name="fred" >
<a onclick="CkBoxCnt(this);" >
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
</a>
<div id="But" style="position:relative;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="60" height="20" >
<div id="Txt" style="position:absolute;top:0px;left:0px;width:100px;height:20px;text-align:center;" >&nbsp;</div>
</div>
</form>
I have 5 checkboxes, and a image submit button.
I would like it so when the user hasnt selected any boxes the submit button image would say nothing
and disables the button to stop the form from being submitted.
When they just select 1 box the submit button image would say 'select more'
and disables the button to stop the form from being submitted.
When the user selects 2, 3 or 4 boxes the submit button image should say 'submit'
and enable the button for submitting the form.
But if they select 5 boxes the submit button image should say 'too many selected'
and disables the button to stop the form from being submitted.

</body>

</html>
vorl
12-03-2005, 05:58 PM
hi vic

thanks for the reply. sorry to be of nuisence but can you change the script.

I have now created 3 image buttons. They say, 'select more', 'submit' and 'too many selected'. So I want it so when no boxes are selected there is just a blank space; when one box is selected my button saying 'select more' appears and I cannot click it. When I select 5 or more boxes, my button saying 'too many selected' appears and I cant click it. When I select 2-4 boxes my button saying 'submit' appears and I can click it to submit my form.

sorry for changing it:)

thanks again

vorl
vorl
12-04-2005, 09:12 PM
hey vwphillips

please could you help me!!:thumbsup:

i really appreciate the help!!

cheers

vorl
vwphillips
12-05-2005, 09:24 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function CkBoxCnt(obj){
txt=document.getElementById('Txt');
but=document.getElementById('But');
imgs=but.getElementsByTagName('IMG');
for (zxc1=0;zxc1<imgs.length;zxc1++){
imgs[zxc1].style.zIndex=0;
}
but.onclick=null;
ckbxs=obj.getElementsByTagName('INPUT');
nu=0;
for (zxc0=0;zxc0<ckbxs.length;zxc0++){
if (ckbxs[zxc0].checked){
nu++;
}
}
imgs[0].style.zIndex=2;
txt.firstChild.data=' ';
if (nu>1&&nu<5){
imgs[2].style.zIndex=2;
// txt.firstChild.data='Submit';
but.onclick=function(){ document.fred.submit(); }
}
else if (nu>4){
imgs[1].style.zIndex=2;
// txt.firstChild.data='Select Less';
}
else if (nu>0){
imgs[0].style.zIndex=2;
// txt.firstChild.data='Select More';
}
}
//-->
</script></head>

<body>
<form name="fred" >
<a onclick="CkBoxCnt(this);" >
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
</a>
<div id="But" style="position:relative;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="60" height="20" style="position:absolute;z-index:2;top:0px;left:0px;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="60" height="20" style="position:absolute;z-index:0;top:0px;left:0px;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="60" height="20" style="position:absolute;z-index:0;top:0px;left:0px;" >
<div id="Txt" style="position:absolute;z-index:4;top:0px;left:0px;width:100px;height:20px;text-align:center;" >&nbsp;</div>
</div>
</form>

</body>

</html>
vorl
12-05-2005, 04:44 PM
thanks mate

really appreciate it!!

vorl
vwphillips
12-09-2005, 12:48 PM
from email

Could you create me a 'Reset' button which will clear all the checkboxes but
also change the other image button to the image which says '1'?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function CkBoxCnt(obj){
txt=document.getElementById('Txt');
but=document.getElementById('But');
obj.imgs=but.getElementsByTagName('IMG');
for (zxc1=0;zxc1<obj.imgs.length;zxc1++){
obj.imgs[zxc1].style.zIndex=0;
}
but.onclick=null;
obj.ckbxs=obj.getElementsByTagName('INPUT');
nu=0;
for (zxc0=0;zxc0<obj.ckbxs.length;zxc0++){
if (obj.ckbxs[zxc0].checked){
nu++;
}
}
obj.imgs[0].style.zIndex=2;
txt.firstChild.data=' ';
if (nu>1&&nu<5){
obj.imgs[2].style.zIndex=2;
// txt.firstChild.data='Submit';
but.onclick=function(){ document.fred.submit(); }
}
else if (nu>4){
obj.imgs[1].style.zIndex=2;
// txt.firstChild.data='Select Less';
}
else if (nu>0){
obj.imgs[0].style.zIndex=2;
// txt.firstChild.data='Select More';
}
}

function Reset(id){
obj=document.getElementById(id);
for (zxc0=0;zxc0<obj.ckbxs.length;zxc0++){
obj.ckbxs[zxc0].checked=false;
}
CkBoxCnt(obj);
}
//-->
</script>

</head>

<body>
<form name="fred" >
<a id='tom' onclick="CkBoxCnt(this);" >
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
</a>
<div id="But" style="position:relative;height:30px;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="60" height="20" style="position:absolute;z-index:2;top:0px;left:0px;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="60" height="20" style="position:absolute;z-index:0;top:0px;left:0px;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="60" height="20" style="position:absolute;z-index:0;top:0px;left:0px;" >
<div id="Txt" style="position:absolute;z-index:4;top:0px;left:0px;width:100px;height:20px;text-align:center;" >&nbsp;</div>
</div>
<input type="button" name="" value="Clear All" onclick="Reset('tom');" >
</form>

</body>

</html>