Monday, April 9, 2007

HTML Radio Button - with Javascript

Problem:
How to determine if the selected radio button is the correct choice?

Solution:
First, lets look at the HTML envolved.

<form id="form1">
<input type="radio" name="rad1" value="bear">Bear

<input type="radio" name="rad1" value="pig">Pig

<input type="radio" name="rad1" value="boar">Boar

<input type="button" onclick="javascript:return check('pig');">
</form>

//
Notice the name attribute has the same value. Setting the name attribute to the same value makes a group. The user will only be able to select one value.


Second. Let's look at the javascript function called: check
<script language="javascript">

function check(ans)
{

var x = document.form1.elements["rad1"];

for(i=0; i < x.length; i++)
{
//alert(x[i].value);

if(x[i].checked == true)
{
if(x[i].value==ans)
{
alert('You are so smart');
return(true);
}
}

}
alert('Please try again!');
return(false);

}
</script>

No comments: