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 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2007
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Radio button validation

    Hi hope someone here can help me with a problem i'm stuck on. Basically I have 3 radio buttons and one of them has to be selected otherwise display a error message but I cant figure it out.

    Here is my failed attempt:
    Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript">
    function validateForm()
    {
    var x=document.forms["form1"]["name"].value;
    var y=document.form1.difficulty.value;
    
    if (x==null || x=="")
      {
      	alert("First name must be filled out");
      	return false;
      }
    if (y==false)
    {
    	alert(y);
    	return false;	
    }
    }
    </script>
    </head>
    <body>
    <div id="horizon">
    <div id="content">
    <img src="images/logo.jpg" width="649" height="410"></div>
    <div id="content2"><form name ="form1" method ="post" action ="game.php" onSubmit="return validateForm()" >
    
    Name: <input type ='text' name='name' />
    <br />
    <Input type = 'Radio' Name ='difficulty' value= '1' />Easy
    
    <Input type = 'Radio' Name ='difficulty' value= '2'  />Medium
    
    <Input type = 'Radio' Name ='difficulty' value= '3'  />Hard
    <br /><Input type = "Submit" Name = "Submit" VALUE = "Submit">
    </form></div></div>
    </body>
    </html>
    Thanks in advance

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,495
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript">
    function validateForm(){
    var x=document.forms["form1"]["name"].value;
    var y=document.form1.difficulty;
    var mess=[];
    if (x.replace(/\s/g,'')=="")   // remove spaces
      {
      	mess.push("First name must be filled out");
      }
     mess.push("difficulty must be checked");
     for (var z0=0;z0<y.length;z0++){   // the arry of radio buttons
      if (y[z0].checked){
       mess.length--;    //  remove "difficulty must be checked"
       break;
      }
     }
     if (mess.length>0){
    	alert(mess.join('\n'));
    	return false;
     }
     return true;
    }
    </script>
    </head>
    <body>
    <div id="horizon">
    <div id="content">
    <img src="images/logo.jpg" width="649" height="410"></div>
    <div id="content2"><form name ="form1" method ="post" action ="game.php" onSubmit="return validateForm()" >
    
    Name: <input type ='text' name='name' />
    <br />
    <Input type = 'Radio' Name ='difficulty' value= '1' />Easy
    
    <Input type = 'Radio' Name ='difficulty' value= '2'  />Medium
    
    <Input type = 'Radio' Name ='difficulty' value= '3'  />Hard
    <br /><Input type = "Submit" Name = "Submit" VALUE = "Submit">
    </form></div></div>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    Hayes (05-16-2012)

  • #3
    New Coder
    Join Date
    Nov 2007
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Exactly what I was after thanks very much

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    <Input type = 'radio'

    Technically, HTML tags are not case sensitive. But in XHTML lower case is required. It's always possible that a future version of HTML may require lower case tags.

    Most professionals code tags in lower case and I recommend that others do the same. It may save you a lot of updating at a later time.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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