Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: Radio Buttons

  1. #1
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Radio Buttons

    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>

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Posts
    626
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by requestcode; 03-07-2005 at 06:38 PM.

  • #3
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks alot


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •