SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JS validation for multiplr choice question

    anybody knows how to validate with JS (radio button) multiple choice selections?

    example is bellow. i need to validate this form: people will need to select at least one choice for 3 questions.
    Or I would be happy too to do validation like this: if somebody does not select any answer, you get warning please select your choice


    <html>
    <head>
    <title>Readiness Assessment</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <LINK href="style.css" type="text/css" rel="stylesheet">


    </head>

    <body bgcolor="#FFFFFF" text="#000000" link="#000000" vlink="#000000" alink="#000000" leftmargin="5" topmargin="5" marginwidth="5" marginheight="5">
    <center>
    <img src=survey.jpg border=0 width=546 height=83>
    <br>



    </center>
    <br>
    <table width="644" border="1" cellspacing="0" cellpadding="0" align="center" bordercolor="#330066">
    <tr>
    <td>
    <table width="640" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
    <td bgcolor="#FFCC00" width="5" height="5"><img src="images/blind.gif" width="5" height="5"></td>
    <td height="5" bgcolor="#FFCC00" align="left" class="standard">Employee readiness</td>
    <td width="5" bgcolor="#FFCC00" height="5"><img src="images/blind.gif" width="5" height="5"></td>
    </tr>
    <tr>
    <td bgcolor="#FFCC00" width="5"><img src="images/blind.gif" width="5" height="5"></td>
    <td rowspan="3">
    <table width="630" border="1" cellspacing="0" cellpadding="0" bordercolor="#330066">
    <tr>
    <td> <form name="myform" method=POST action=" /testingf/index.php">
    <table width="630" border="0" cellspacing="5" cellpadding="0">

    <tr>
    <td width="300" valign="top">1. Employee attitude towards learning/training</td>
    <td width="330" valign="top" class="small">
    <input type="radio" name="q1" value="1a">Our employees only take training classes when they are required to; and even then they do not pay attention in class <br>
    <input type="radio" name="q1" value="1b">Some/many of our employees are interested in training classes, but don't because they don't have enough time<br>
    <input type="radio" name="q1" value="1c">Many of our employees ask for additional training <br>

    <tr>
    <td width="300" valign="top"></td>
    <td width="330" valign="top"></td>
    </tr></table>
    <hr width=200 align=center>
    <table width="630" border="0" cellspacing="5" cellpadding="0">

    <tr>
    <td width="300" valign="top">2. Employee willingness to try new things</td>
    <td width="330" valign="top" class="small">
    <input type="radio" name="q2" value="2a">Our employees are extremely reluctant to change, even when they are shown that their life could get easier/better <br>
    <input type="radio" name="q2" value="2b">Our employees are open to change, but need to see definite proof that a new way of doing things is a better way <br>
    <input type="radio" name="q2" value="2c">Change is a way of life for our employees, they embrace it<br>

    <tr>
    <td width="300" valign="top"></td>
    <td width="330" valign="top"></td>
    </tr></table>
    <hr width=200 align=center>

    <table width="630" border="0" cellspacing="5" cellpadding="0">

    <tr>
    <td width="300" valign="top">3. Employee's level of comfort with internet/intranet</td>
    <td width="330" valign="top" class="small">
    <input type="radio" name="q3" value="3a">Few of our employees have any familiarity with the internet <br>
    <input type="radio" name="q3" value="3b">Many/most employees have a basic understanding of the internet and how to use it<br>
    <input type="radio" name="q3" value="3c">Employees use the internet frequently on the job and/or at home <br>

    <tr>
    <td width="300" valign="top">Continue to next page ----></td>
    <td width="330" valign="top"><input type=submit name="form4" value="Next"></td>
    </tr></table>
    </form>

    Page 1 of 6
    </td>
    </tr>
    </table>
    </td>
    <td bgcolor="#FFCC00" width="5"><img src="images/blind.gif" width="5" height="5"></td>
    </tr>
    <tr>
    <td bgcolor="#FFCC00" width="5"><img src="images/blind.gif" width="5" height="5"></td>
    <td bgcolor="#FFCC00" width="5"><img src="images/blind.gif" width="5" height="5"></td>
    </tr>
    <tr>
    <td bgcolor="#FFCC00" width="5"><img src="images/blind.gif" width="5" height="5"></td>
    <td bgcolor="#FFCC00" width="5"><img src="images/blind.gif" width="5" height="5"></td>
    </tr>
    <tr>
    <td bgcolor="#FFCC00" width="5" height="5"><img src="images/blind.gif" width="5" height="5"></td>
    <td bgcolor="#FFCC00" height="5"><img src="images/blind.gif" width="5" height="5"></td>
    <td bgcolor="#FFCC00" width="5" height="5"><img src="images/blind.gif" width="5" height="5"></td>
    </tr>
    </table>
    </td>
    </tr>
    </table><br><br>
    </body>
    </html>
    Last edited by worknow; Feb 3, 2003 at 15:41.

  2. #2
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    please help

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    This will validate a radio button group that you specify.

    Javascript:
    Code:
    <script type="text/javascript">
    function validateRadio(group) {
    var valid=false;
      for(var x = 0; x < group.length; x++) {
       if (group[x].checked) {
         valid = true;
        }
      }
      if(!valid) {
        alert('Please choose one option from the group before submitting.');
      }
      return valid;
    }
    </script>
    HTML:
    Code:
    <form name="form1" onsubmit="return validateRadio(this.radioOne);">
    <p>Choose an option:</p>
    <input type="radio" name="radioOne" value="1"> 1 <br>
    <input type="radio" name="radioOne" value="2"> 2 <br>
    <input type="submit" name="submit" value="Submit!">
    </form>
    Hope this helps!

  4. #4
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you!!!
    what happens when i have 2 questions on one page like this ?
    how do i validate that both questions on one page?
    could you help me?
    thanks!


    HTML:
    Code:
    <form name="form1" onsubmit="return validateRadio(this.radioOne);">
    <p>Choose an option2:</p>
    <input type="radio" name="radioOne" value="1"> 1 <br>
    <input type="radio" name="radioOne" value="2"> 2 <br>
    <input type="submit" name="submit" value="Submit!">
    
    <br>
    <br>
    <p>Choose an option3:</p>
    <input type="radio" name="radioTwo" value="yes"> yes<br>
    <input type="radio" name="radioTwo" value="no"> no <br>
    <input type="submit" name="submit" value="Submit!">
    
    </form>
    Hope this helps! [/B][/QUOTE]
    Last edited by worknow; Feb 4, 2003 at 13:39.

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You don't need the two submit buttons. Let's do this for two buttons! (Keep the validateRadio function handy. I'll be calling it in this example, but not posting it again). Actually, this will work for any amount of radio buttons on your page.

    Javascript:
    Code:
    function validateAllRadios(f) {
    var el = f.elements;
     for(var y = 0; y < el.length; y++) {
        if(el[y].type=='radio') {
         validateRadio(el[y]);
        }
      }
    }
    function validateRadio(group) {
      //validate radio function in here.
    }
    HTML:
    Code:
    <form name="form1" onsubmit="return validateAllRadios(this);">
    <p>Choose an option2:</p>
    <input type="radio" name="radioOne" value="1"> 1 <br>
    <input type="radio" name="radioOne" value="2"> 2 <br>
    
    <br>
    <br>
    <p>Choose an option3:</p>
    <input type="radio" name="radioTwo" value="yes"> yes<br>
    <input type="radio" name="radioTwo" value="no"> no <br>
    <input type="submit" name="submit" value="Submit!">
    
    </form>

  6. #6
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes i want only one submit button!

  7. #7
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i tried to put together like this and it is not working
    please help me :

    sorry i am stupid



    <script type="text/javascript">
    function validateAllRadios(f) {
    var el = f.elements;
    for(var y = 0; y < el.length; y++) {
    if(el[y].type=='radio') {
    validateRadio(el[y]);
    }
    }
    }
    function validateRadio(group) {
    //validate radio function in here.
    }

    if(!valid) {
    alert('Please choose one option from the group before submitting.');
    }
    return valid;
    }
    </script>





    <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080">
    <form name="form1" onsubmit="return validateAllRadios(this);">
    <p>Choose an option2/p>
    <input type="radio" name="radioOne" value="1"> 1 <br>
    <input type="radio" name="radioOne" value="2"> 2 <br>

    <br>
    <br>
    <p>Choose an option3/p>
    <input type="radio" name="radioTwo" value="yes"> yes<br>
    <input type="radio" name="radioTwo" value="no"> no <br>
    <input type="submit" name="submit" value="Submit!">

    </form>
    Last edited by worknow; Feb 4, 2003 at 14:12.

  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    No, get rid of what I wrote for validateRadio the second time (I just put it there as a placeholder). Take what I wrote the first time and put it in your <script> tag. Like this:
    Code:
    <html>
    <head>
    <title>Validate Radio Buttons!</title>
    <script type="text/javascript">
    function validateRadio(group) {
    var valid=false;
      for(var x = 0; x < group.length; x++) {
       if (group[x].checked) {
         valid = true;
        }
      }
      if(!valid) {
        alert('Please choose one option from the group before submitting.');
      }
      return valid;
    }
    function validateAllRadios(f) {
    var el = f.elements;
     for(var y = 0; y < el.length; y++) {
        if(el[y].type=='radio') {
         validateRadio(el[y]);
        }
      }
    }
    
    </script>
    </head>
    <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080">
    <form name="form1" onsubmit="return validateAllRadios(this);">
    <p>Choose an option2:</p>
    <input type="radio" name="radioOne" value="1"> 1 <br>
    <input type="radio" name="radioOne" value="2"> 2 <br>
    
    <br>
    <br>
    <p>Choose an option3:</p>
    <input type="radio" name="radioTwo" value="yes"> yes<br>
    <input type="radio" name="radioTwo" value="no"> no <br>
    <input type="submit" name="submit" value="Submit!">
    
    </form>
    </body>
    </html>

  9. #9
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    THANK YOU! you are my god!
    one question: i get alert 4X instead only 1X.
    how to fix it?
    thanks!

  10. #10
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Originally posted by worknow
    THANK YOU! you are my god!
    one question: i get alert 4X instead only 1X.
    how to fix it?
    thanks!
    Replace the script block with this one:
    Code:
    <script type="text/javascript">
    function validateRadio(group) {
    var valid=false;
      for(var x = 0; x < group.length; x++) {
       if (group[x].checked) {
         valid = true;
        }
      }
      if(!valid) {
       return group.name;
      }else{
      return valid;
      }
    }
    function validateAllRadios(f) {
    var el = f.elements;
    var message = '';
     for(var y = 0; y < el.length; y++) {
        if(el[y].type=='radio' && validateRadio(el[y])!=true) {
         message += validateRadio(el[y]) + "\n";
        }
      }
     if (message!='') {
       alert('The following questions must be answered:\n\n' 
    + message + '\nPlease check your entries and try again!');
      return false;
     }
    }
    </script>
    Just remember to name your radio buttons something descriptive, like "Question1", "Question2", etc.

    Hope this helps!

  11. #11
    SitePoint Evangelist
    Join Date
    Mar 2003
    Location
    Melbourne, Australia
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry to bring up an old thread
    but i'm trying to use this script to validate three groups of radio buttons
    but it is evaluating each radio button individually
    even when all three radio groups have been checked
    it comes up with an error message
    and displays every single radio button
    instead of just the group name

    thanks


Bookmarks

Posting Permissions

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