...

View Full Version : Enable/Disable 4 different sections of a form.



Icedan
08-16-2005, 07:48 AM
Ok I have layed it out all for you, nice and easy to understand. :)

It's quite simple really, when you select one of the radio buttons, the two tick boxes beneath will enable, and make sure the rest are disabled.

So for example, I select Overseas Delegate (in the yellow box), underneath, the Delegate and Accompanying Persons checkbox's will enable, allowing me to tick them, and at the same time, will make sure the other checkboxes in the form are disabled.

And again, if I select Local Delegate (red box), underneath, the Delegate and Accompanying Persons checkbox will enable, allowing me to tick them, and at the same time make sure the other checkboxes in the form are disabled.

I can get the yellow box working, but when I select the green box, it enables the blue and red aswell, I don't want it to do that! So I am assuming that the script I have only allows for 2 options, not 4.

Can anyone enlighten me?


The Script:



<script>
function disableEntries(oRad){
var oFrm = oRad.form;

//get the disabled state based on the value of the checked radio button
var state = (oRad.value=="1") ? false : true;

//option 1 fields
oFrm.Del1.disabled = state;
oFrm.AccPer1.disabled = state;

//option 2 fields
oFrm.Del2.disabled = !state;
oFrm.AccPer2.disabled = !state;

//option 3 fields
oFrm.Del3.disabled = !state;
oFrm.AccPer3.disabled = !state;

//option 4 fields
oFrm.Del4.disabled = !state;
oFrm.AccPer4.disabled = !state;

}
</script>


The Form Image:
http://www.thecrazypixel.com/Image.gif

The Form Code:


<td colspan="3" class=NormalText><span class="SubTitle">Registration Type</span></td>
</tr>
<tr bgcolor="#C81015">
<td colspan="3" class=NormalText><div align="center"><font color="#FFFFFF"><strong><font size="3">EARLY BIRD RATES </font><br>
<em>Register and pay by 31 August 2005 </em></strong></font></div><div align="center">
<label for="opt1"></label>
</div></td>
</tr>
<tr bgcolor="#496874">
<td colspan="3" class=NormalText><div align="center"><font color="#FFFFFF">please select overseas or local delegate to enable your choices. </font></div></td>
</tr>
<tr bgcolor="#496874">
<td class=NormalText><div align="center"></div></td>
<td class=NormalText><div align="center"><strong><font color="#FFFFFF">
<label for="opt1">OVERSEAS DELEGATE</label>
<br>
<input type="radio" name="Selection" id="opt1" onclick="disableEntries(this);" value="1">
<br>
</font></strong></div></td>
<td class=NormalText><div align="center"><font color="#FFFFFF"><strong>
<label for="opt2">LOCAL DELEGATE ** with 5% GST</label>
<br>
<input type="radio" name="Selection" id="opt2" onclick="disableEntries(this);" value="2">
<br>
</strong></font></div></td>
</tr>
<tr bgcolor="#E5E5E5">
<td class=NormalText><strong>Delegate</strong></td>
<td class=NormalText><input name="Del1" id="opt1" type="checkbox" value="Early Bird - Overseas - Delegate" disabled>
<br>
USD 1,000<br>
SGD 1,700</td>
<td class=NormalText><input name="Del2" id="opt2" type="checkbox" value="Early Bird - Local - Delegate" disabled>
<br>
USD 1,050<br>
SGD 1,785.50 </td>
</tr>
<tr bgcolor="#E5E5E5">
<td class=NormalText><strong>Accompanying Person </strong></td>
<td class=NormalText><input name="AccPer1" id="opt1" type="checkbox" value="Early Bird - Overseas Accompanying - Person" disabled>
<br>
USD 550<br>
SGD 935 </td>
<td class=NormalText><input name="AccPer2" id="opt2" type="checkbox" value="Early Bird - Local - Accompanying Person" disabled>
<br>
USD 577.50 <br>
SGD 981.75</td>
</tr>
<tr bgcolor="#E5E5E5">
<td class=SubTitle>Number of<br>
Accompanying Persons: </td>
<td colspan="2" class=NormalText><input name="NoAcc" type="text" id="NoAcc" size="5" maxlength="5"></td>
</tr>
<tr bgcolor="#496874">
<td colspan="3" class=NormalText><div align="center"></div></td>
</tr>
<tr bgcolor="#C81015">
<td colspan="3" class=NormalText><div align="center"><strong><font color="#FFFFFF" size="3">REGULAR RATES</font><font color="#FFFFFF"><br>
<em>Register and pay after 31 August 2005 </em></font></strong></div> <div align="center">
</div></td>
</tr>
<tr bgcolor="#496874">
<td colspan="3" class=NormalText><div align="center"><font color="#FFFFFF">please select overseas or local delegate to enable your choices. </font></div></td>
</tr>
<tr bgcolor="#496874">
<td class=NormalText><div align="center"><strong></strong></div></td>
<td class=NormalText><div align="center"><strong><font color="#FFFFFF">
<label for="opt3">OVERSEAS DELEGATE</label>
<br>
<input type="radio" name="Selection" id="opt3" onclick="disableEntries(this);" value="3">
</font></strong></div></td>
<td class=NormalText><div align="center"><strong><font color="#FFFFFF">
<label for="opt4">LOCAL DELEGATE ** with 5% GST</label>
<br>
<input type="radio" name="Selection" id="opt4" onclick="disableEntries(this);" value="4">
</font></strong></div></td>
</tr>
<tr bgcolor="#E5E5E5">
<td class=NormalText><strong>Delegate</strong></td>
<td class=NormalText><input name="Del3" id="opt3" type="checkbox" value="Regular - Overseas - Delegate" disabled>
<br>
USD 1,100<br>
SGD 1,870</td>
<td class=NormalText><input name="Del4" id="opt4" type="checkbox" value="Regular - Local - Delegate" disabled>
<font color="#51595B"><br>
USD 1,155</font> <br>
<font color="#51595B">SGD 1,963.50</font></td>
</tr>
<tr bgcolor="#E5E5E5">
<td class=NormalText><strong>Accompanying Person </strong></td>
<td class=NormalText><input name="AccPer3" id="opt3" type="checkbox" value="Regular - Overseas - Accompanying Person" disabled>
<br>
USD 550<br>
SGD 935<br> </td>
<td class=NormalText><input name="AccPer4" id="opt4" type="checkbox" value="Regular - Local - Accompanying Person" disabled>
<br>
<font color="#51595B">USD 577.50<br>
<font color="#51595B">SGD 981.75 </font> </font></td>
</tr>
<tr bgcolor="#E5E5E5">
<td class=SubTitle>Number of<br>
Accompanying Persons: </td>
<td colspan="2" class=NormalText><input name="NoAcc2" type="text" id="NoAcc2" size="5" maxlength="5" disabled></td>
</tr>
<tr bgcolor="#496874">
<td colspan="3" class=NormalText><div align="center"></div></td>
</tr>
<tr bgcolor="#E5E5E5">
<td colspan="3" bgcolor="#FFFFFF" class=NormalText>&nbsp;</td>
</tr>
<tr bgcolor="#CCCCCC">
<td colspan="3" class=SubTitle>Registration Type</td>
</tr>
<tr bgcolor="#E5E5E5">
<td class=SubTitle>&nbsp;</td>
<td class=SubTitle><div align="center">Early Bird<br>
<span class="NormalText">(Before 31st July 2005)</span> </div></td>
<td class=SubTitle><div align="center">Standard<br>
<span class="NormalText">(on and after 31st July 2005)</span> </div></td>
</tr>
<tr bgcolor="#E5E5E5">
<td class=SubTitle>Delegate</td>
<td class=NormalText><div align="left">
<input name="Delegate" type="radio" id="Delegate" value="Early Bird">
<span class="NormalText">USD 1,000</span></div></td>
<td class=NormalText><div align="left">
<input name="Delegate" type="radio" id="Delegate" value="Standard">
<span class="NormalText">USD 1,100</span></div></td>
</tr>
<tr bgcolor="#E5E5E5">
<td class=SubTitle>Accompanying Person </td>
<td class=NormalText><div align="left">
<input name="AccPer" type="radio" value="Early Bird">
<span class="NormalText">USD 550</span></div></td>
<td class=NormalText><div align="left">
<input name="AccPer" type="radio" value="Standard">
<span class="NormalText">USD 550</span> </div></td>
</tr>
<tr bgcolor="#E5E5E5">
<td class=SubTitle>Number of Delegates: </td>
<td class=NormalText><input name="NoDel" type="text" id="NoDel" size="5" maxlength="5"></td>
<td class=NormalText>&nbsp;</td>
</tr>
<tr bgcolor="#E5E5E5">
<td class=SubTitle>Number of<br>
Accompanying Persons: </td>
<td class=NormalText><input name="NoAcc" type="text" id="NoAcc" size="5" maxlength="5"></td>
<td class=NormalText>&nbsp;</td>
</tr>

Icedan
08-16-2005, 08:42 AM
I'll just simplify the form code a bit more:

The Yellow Box:



//this radio enables the two options: Delegate and Accompanying Person in its column
<label for="opt1">OVERSEAS DELEGATE</label>
<input type="radio" name="Selection" id="opt1" onclick="disableEntries(this);" value="1">

//Delegate is enabled when Overseas Delegate is ticked.
<td class=NormalText><input name="Del1" id="opt1" type="checkbox" value="Early Bird - Overseas - Delegate" disabled>

//Accompanying Person is enabled when Overseas Delegate is ticked aswell.
<td class=NormalText><input name="AccPer1" id="opt1" type="checkbox" value="Early Bird - Overseas Accompanying - Person" disabled>

Icedan
08-16-2005, 09:11 AM
Ok, finally, I found out what was happening.

The tiny and almost invisible "!" infront of "state" in the script code is what this is all about.

edit: just did a bit of research, found out what the "!" is for; so I am guessing this is just a two-way thing?

What can I do to solve this problem?

vwphillips
08-16-2005, 10:25 AM
<html>
<head>

<script>

function disableEntries(obj,Ena,Dis){
f=obj.form;
if (obj.checked){
for (zxc0=0;zxc0<Ena.length;zxc0++){
f.elements[Ena[zxc0]].removeAttribute('disabled');
}
for (zxc0=0;zxc0<Dis.length;zxc0++){
f.elements[Dis[zxc0]].setAttribute('disabled','disabled');
}
}
else {
for (zxc0=0;zxc0<Ena.length;zxc0++){
f.elements[Ena[zxc0]].setAttribute('disabled','disabled');
}
for (zxc0=0;zxc0<Dis.length;zxc0++){
f.elements[Dis[zxc0]].removeAttribute('disabled');
}
}
}

</script>


</head>
<body );">




//this radio enables the two options: Delegate and Accompanying Person in its column
<form>
<label for="opt1">OVERSEAS DELEGATE</label>
<br>
<input type="radio" name="Selection" id="opt1" onclick="disableEntries(this,[3,4],[5,6]);" value="1"> Yes<br>
<input type="radio" name="Selection" id="opt1" onclick="disableEntries(this,[5,6],[3,4]);" value="1"> No
<br>
or use a CheckBox<br>
<input type="checkbox" name="Selection" id="opt1" onclick="disableEntries(this,[3,4],[6,5]);" value="1"> Yes/No<br>
<br>
//Delegate is enabled when Overseas Delegate is ticked.
<input name="Del1" id="opt1" type="checkbox" value="Early Bird - Overseas - Delegate" disabled="disabled">
<br>
//Accompanying Person is enabled when Overseas Delegate is ticked aswell.
<input name="AccPer1" id="opt1" type="checkbox" value="Early Bird - Overseas Accompanying - Person" disabled="disabled" >
<br>
<br>

//Delegate is enabled when Overseas Delegate is ticked.
<input name="Del1" id="opt1" type="checkbox" value="Early Bird - Overseas - Delegate" >
<br>
//Accompanying Person is enabled when Overseas Delegate is ticked aswell.
<input name="AccPer1" id="opt1" type="checkbox" value="Early Bird - Overseas Accompanying - Person" >
<br>
</form
</body>

Icedan
08-16-2005, 11:11 AM
Your script flies over my head.

I can't quite figure out how to make it work for all 4 options.

I will try tho :eek:

vwphillips
08-16-2005, 11:44 AM
each element in a form has a numbers related to its position in the form starting from o

script I posed refers to these numbers in the call parameters

parameter 1 enable
parameter 2 disenable

There are nany ways of achiving your requirement
see

http://www.vicsjavascripts.org.uk/FormCompendium/FormCompendium.htm

for other solutions

Icedan
08-17-2005, 11:05 AM
Thanks for the help man.

The link you gave is not working, server might be down, will check it out another time.

Icedan
08-17-2005, 12:10 PM
Ok, I give up, I just don't have enough experience to fix this problem on time.

The job has to be done by tomorrow, so if anyone can give me a complete working code, I will be much appreciated.

thanks..

Icedan
08-17-2005, 12:14 PM
Can it be done in asp?

Why isn't this simple to do?

Why can't it just be

if checkbox "option2" = true then
checkbox option 1 = false
checkbox option 3 = false
checkbox option 4 = false

else if checkbox "option 3 = true then
checkbox option 1 = false
checkbox option 2 = false
checkbox option 4 = false

etc

If it can be done that way, then I would prefer to just do it like that (however it is done), since I can at least make sense of it, rather than try to learn a language of obscurity.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum