View Full Version : Radio Buttons

03-07-2005, 05: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.

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

<div id = "main">
<form title = "littleKickers">
First Name:
<input type = "text" name = "first" />
Last Name:
<input type = "text" name = "last" />
<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>
<input type = "radio" name = "sex" value = "He" />
<input type = "radio" name = "sex" value = "She" />
Female <br>
<input type = "text" name = "address" />
<input type = "text" name = "city" size = "10"/>
Zip Code:
<input type = "text" name = "zip" size = "10"/>
<input type = "submit" value = "Submit" name = "submit" onClick = "sendMail(this.form)"/>

<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 + "."


03-07-2005, 06: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:

You will have to see which one is selected by using an if statement and the "checked" property like so:

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.

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