PDA

View Full Version : Dynamic Forms with Radio buttons Help

watto
09-09-2005, 07:35 PM
I have a script that displays specific textboxes based on an option select.
I wish to convert this to radio buttons. The script works with the option select, but I am missing something with the radio buttons.

The debug document.write line states countryChecked is undefined.

<HTML>
<SCRIPT type="text/javascript">

function displayState() {
var countryChecked = document.customerRegistration.country.value
document.write ("RadioCheck: " + countryChecked)
var custReg = document.customerRegistration
switch (countryChecked) {
case "US":
document.anchors[0].innerHTML="State"
custReg.state.style.visibility="visible"
document.anchors[1].innerHTML="Zip Code"
custReg.zip.style.visibility="visible"
break

case "CA":
document.anchors[0].innerHTML="Province"
custReg.state.style.visibility="visible"
document.anchors[1].innerHTML="Postal Code"
custReg.zip.style.visibility="visible"
break

case "MX":
document.anchors[0].innerHTML="State"
custReg.state.style.visibility="visible"
document.anchors[1].innerHTML="Postal Code"
custReg.zip.style.visibility="visible"

}
}
</SCRIPT>

<BODY>
<H1> Example of using visibility </H1>
<FORM name=customerRegistration>
<TABLE>
<TR><TD> Customer Name </TD><TD><INPUT TYPE=text name=custName></TD></TR>
<TR><TD> Customer Address </TD><TD><Textarea name=custAddr></TextArea></TD></TR>
<TR><TD> Customer City </TD><TD><INPUT TYPE=text name=custCity></TD></TR>
<TR><TD> Customer Country </TD>

<TD>
<input type="radio" name="country" value="US" onClick=displayState()>United States
<input type="radio" name="country" value="CA" onClick=displayState()>Canada
<input type="radio" name="country" value="MX" onClick=displayState()>Mexico

</TD></TR>

<TR><TD> <A name=stateTitle></A> </TD><TD><INPUT TYPE=text name=state style="visibility:hidden"></TD></TR>
<TR><TD> <A name=zipTitle></A> </TD><TD><INPUT TYPE=text name=zip style="visibility:hidden"></TD></TR>

</FORM>
</BODY>
</HTML>
TheShaner
09-09-2005, 07:55 PM
You have your radio buttons set up correctly, but they are set up respectively as: country[0], country[1], and country[2]. So you have to loop through to check which one is checked and then assign the value of the one that is checked. Like so:

for i = 0 to document.customerRegistration.country.length-1
{
if document.customerRegistration.country[i].checked
{
var countryChecked = document.customerRegistration.country[i].value
}
}

-Shane
watto
09-09-2005, 09:19 PM
I am receiving the object required error when I click on a radio button.
I assume I need to use the key word "this" but that is still an unclear concept.

With the select statement this syntax seems to make the link, but with raio buttons it does not make the html javascript link:
document.customerRegistration.country
TheShaner
09-10-2005, 03:27 PM
Let me fix my error in my code and then try this again, hehe:

for (i = 0; i < document.customerRegistration.country.length; i++)
{
if (document.customerRegistration.country[i].checked)
{
var countryChecked = document.customerRegistration.country[i].value
}
}

I wrote the For...Loop as a vbscript loop, oops! I don't think it's a valid form in javascript, hehe. Sometimes I get a bit confused on my languages :eek: . Just bear with me!

-Shane