...

View Full Version : Radio Buttons



Pyromaniac87
03-07-2005, 04:04 PM
Ok here is my problem. I have a form with various fields and whatnot and I have two radio buttons for sex. When I try to pull the value for the radio buttons in javascript it wont be defined. Help please, thanks.


<html>
<head>
<title>Little Kickers - Registration</title>
<link rel = "stylesheet" type = "text/css" href = "main.css" />
</head>
<body>
<!--This is the begining of the banner and nav bar -->
<img src = "divingheadersmall.jpg" /> <img src = "banner.gif" id = "banner"/>
<div id = "navBar">
<table>
<tr>
<td> <a href = "index.htm" class = "pickle">Home</a> </td>
</tr>
<tr>
<td> <a href = "info.htm" class = "pickle">General Info</a> </td>
</tr>
<tr>
<td> <a href = "info.htm#schedule" class = "pickle">Schedule</a> </td>
</tr>
<tr>
<td> <a href = "info.htm#facilities" class = "pickle">Facilities</a> </td>
</tr>
<tr>
<td> <a href = "testimonials.htm" class = "pickle">Testimonials</a> </td>
</tr>
<tr>
<td> <a href = "registration.htm" class = "pickle">Register</a> </td>
</tr>
<tr>
<td> <a href = "mailto:bchissoe@ravenscroft.org" class = "pickle">Contact</a>
</td>
</tr>
</table>
</div>
<!--This is the end of the banner and the nav bar-->


<div id = "main">
<form title = "littleKickers">
First Name:
<input type = "text" name = "first" />
<br>
Last Name:
<input type = "text" name = "last" />
<br>
<br>
Age:
<select name = "age">
<option value = "five">5</option>
<option value = "six">6</option>
<option value = "seven">7</option>
<option value = "eight">8</option>
<option value = "nine">9</option>
<option value = "ten">10</option>
<option value = "eleven">11</option>
</select>
<br>
<br>
Sex:
<input type = "radio" name = "sex" value = "He" />
Male
<input type = "radio" name = "sex" value = "She" />
Female <br>
<br>
Address:
<input type = "text" name = "address" />
<br>
City:
<input type = "text" name = "city" size = "10"/>
Zip Code:
<input type = "text" name = "zip" size = "10"/>
<br>
<br>
<input type = "submit" value = "Submit" name = "submit" onClick = "sendMail(this.form)"/>
</form>
</div>

<script language = "JavaScript">


function sendMail(form) {
var carrot;
var pear;
var first = form.first.value;
var last = form.last.value;
var sex = form.sex.value;
var age = form.age.value;
var address = form.address.value;
var city = form.city.value;




carrot = first + " " + last + " would like to reserve a spot at the Little Kickers Soccer Camp. " + sex + " is " + age + " years old and lives at " + address + " in " + city + "."

alert(carrot);
}
</script>
</body>
</html>

requestcode
03-07-2005, 05:35 PM
When you have multiple radio form elements with the same name you have to reference them as an array item. So the theywould be:
form.sex[0].value
form.sex[1].value

You will have to see which one is selected by using an if statement and the "checked" property like so:
if(form.sex[0].checked)
{sex=form.sex[0].value}
else
{sex=form.sex[1].value}

Since you only have two you can create your if like the above.

I would also recommend that you not use the onClick in the submit button, but use the onSubmit event in the form tag like so:
<form ... onSubmit="sendMail(this.form)">

If you are going to some validating before the form is sent then you will want to have your form tag like so:
<form ... onSubmit="return sendMail(this.form)">

Then in your validate script you would return false to keep the form from submitting and true to have it submit. I would also not recommend that you use the same variable names in your script as your form elements. I have found this to cause problems and also confusion. Good Luck.

Pyromaniac87
03-08-2005, 03:19 PM
Thanks alot



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum