#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2001
    Location
    Maryland
    Posts
    74
    Rep Power
    14

    Angry Form Validation - Radio buttons


    I am pulling my hair out trying code this one segment of my validation script.

    I'm hoping someone can point me in the right direction. I tried nested if statements, if,else, and a variety of different configs.

    Any help would be greatly appreciated.


    Here is the logic.

    1.Check for answer, [radio button checked]
    2.If there was no answer indicated, popup alert requesting the user answer the question.
    3. If a radio button was checked, was it "other" and if it was; was input provided?
    4. if the selected answer was not other; process the form
    5. if it was other and no input was provided, popup alert requesting input.
    6. if it was and input was provided; process the form.

    here is the code:

    <script language="JavaScript">
    function validate()
    {
    itok19=false;
    for(it=0;it<classSurFrm.ITEM_19.length;it++)

    {
    if(classSurFrm.ITEM_19[it].checked)
    if(classSurFrm.ITEM_19[it].value=="ITEM_19|Other" && classSurFrm.other_22.value !="")itok19=true;
    }

    if(!itok19)
    {
    alert('You must answer #22. Please try again');
    event.returnValue=false;
    }

    }

    </script>
    </head>

    <body bgcolor="#FFFFFF" text="#000000">
    <form name="classSurFrm" ACTION='example.html' METHOD='POST'onSubmit="validate();">
    <div align="center">
    <table width="50%" border="0" cellspacing="4" cellpadding="4">
    <tr>
    <td>
    <input type="radio" name="ITEM_19" value="ITEM_19|Manager">
    Manager </td>
    </tr>
    <tr>
    <td>
    <input type="radio" name="ITEM_19" value="ITEM_19|Co-Worker">
    Co-worker </td>
    </tr>
    <tr>
    <td>
    <input type="radio" name="ITEM_19" value="ITEM_19|Website">
    Website </td>
    </tr>
    <tr>
    <td>
    <input type="radio" name="ITEM_19" value="ITEM_19|Other">
    Other (list below)</td>
    </tr>
    <tr>
    <td valign="middle">
    <input type="text" name="other_22" size="30">
    </td>
    </tr>
    </table></div>
    <input type="submit" name="Submit" value="Submit"><input type="Reset" name="Reset" value="Reset">
    </form>
    J. Birdsell,
  2. #2
  3. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2002
    Posts
    8
    Rep Power
    0
    This appears to give you what you're looking for. I also threw in something to clear the other text field when the first 3 buttons are clicked (there might be a better way. I'm just putting the idea out there). Another suggestion might be to give them a special message when the explanation field for other is incomplete, because they might figure that just checking other is enough and get confused when they keep getting the error message. One more thing: You might want to do a trim type of test on the 'other' text field, so nobody can fool it by inserting a blank space, but then again, they could just bypass it by putting xx or n/a or something. Just thinking out loud and offering suggestions.

    <html>
    <head>
    <title>Untitled</title>
    </head>

    <body>

    <script language="JavaScript">

    function ClearOtherDescription() {
    classSurFrm.other_22.value="";
    }

    function validate()
    {
    itok19=false;

    for(it=0;it<classSurFrm.ITEM_19.length;it++)
    {
    if(classSurFrm.ITEM_19[it].checked && classSurFrm.ITEM_19[it].value!="ITEM_19|Other")
    {
    itok19=true;
    } else {
    if(classSurFrm.ITEM_19[it].value=="ITEM_19|Other" &&
    classSurFrm.other_22.value!="") {
    itok19=true;
    }
    }
    }

    if(!itok19)
    {
    alert('You must answer #22. Please try again');
    return false;
    }

    }

    </script>
    </head>

    <body bgcolor="#FFFFFF" text="#000000">
    <form name="classSurFrm" ACTION='example.html' METHOD='POST' onSubmit="return validate();">
    <div align="center">
    <table width="50%" border="0" cellspacing="4" cellpadding="4">
    <tr>
    <td>
    <input type="radio" name="ITEM_19" value="ITEM_19|Manager" onClick="ClearOtherDescription()">
    Manager </td>
    </tr>
    <tr>
    <td>
    <input type="radio" name="ITEM_19" value="ITEM_19|Co-Worker" onClick="ClearOtherDescription()">
    Co-worker </td>
    </tr>
    <tr>
    <td>
    <input type="radio" name="ITEM_19" value="ITEM_19|Website" onClick="ClearOtherDescription()">
    Website </td>
    </tr>
    <tr>
    <td>
    <input type="radio" name="ITEM_19" value="ITEM_19|Other">
    Other (list below)</td>
    </tr>
    <tr>
    <td valign="middle">
    <input type="text" name="other_22" size="30">
    </td>
    </tr>
    </table></div>
    <input type="submit" name="Submit" value="Submit"><input type="Reset" name="Reset" value="Reset">
    </form>

    </body>
    </html>
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2001
    Location
    Maryland
    Posts
    74
    Rep Power
    14
    Vincent thanks for the input. I'll give this a try and let you know how it works for me.

    Thanks
    J. Birdsell,

IMN logo majestic logo threadwatch logo seochat tools logo