• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 432
  • Last Modified:

Radio Buttons

Ok, im trying to validate radio buttons, there are two questions, both need to be answers. At the moment the submit button is button type, if i change it to submit the form is submitted even if the alert boxes apear. i have the following:

<script language="JavaScript">
function Validate(frm, btnName)
{
      var btn = frm[btnName]
      var valid
      
      for (var x = 0;x < btn.length; x++)
      {
            valid = btn[x].checked
            if (valid) {break}
      }
      if(!valid)
      {
            alert("Please select an answer.")
      }
      
      var btn = frm.question2
      for (var x = 0;x < btn.length; x++)
      {
            valid = btn[x].checked
            if (valid) {break}
      }
      if(!valid)
      {
            alert("Please select an answer.")
      }
}
</script>
<body>
<form action="confirm.htm">
      <input type="radio" name="question1" id="1b1" value="1">Always</input>
      <input type="radio" name="question1" id="1b2" value="2">Often</input>
      <input type="radio" name="question1" id="1b3" value="3">Sometimes</input>
      <input type="radio" name="question1" id="1b4" value="4">Rarely</input>
      <input type="radio" name="question1" id="1b5" value="5">Never</input>

      <div>
      <input type="radio" name="question2" id="11b1" value="1">Always</input>
      <input type="radio" name="question2" id="11b2" value="2">Often</input>
      <input type="radio" name="question2" id="1b3" value="3">Sometimes</input>
      <input type="radio" name="question2" id="11b4" value="4">Rarely</input>
      <input type="radio" name="question2" id="11b5" value="5">Never</input>
      
            <input type="button" value="Submit Answer" onClick="Validate(this.form, 'question1')"/>
      </div>
</form>
0
mattdye
Asked:
mattdye
  • 4
  • 2
1 Solution
 
ZylochCommented:
This might be a way to solve this. First, instead of onClick, do onSubmit.

Make it onSubmit="return Validate(this.form, 'question1')"/>

Then, whenever you need an alert, below the alert, put this line:

return false;

--Zyloch
0
 
mattdyeAuthor Commented:
ok, it now looks like this and it doesnt validate anything


<script language="JavaScript">
function Validate(frm, btnName)
{
      var btn = frm[btnName]
      var valid
      
      for (var x = 0;x < btn.length; x++)
      {
            valid = btn[x].checked
            if (valid) {break}
      }
      if(!valid)
      {
            alert("Please select an answer.")
            return false;
      }
      
      var btn = frm.question2
      for (var x = 0;x < btn.length; x++)
      {
            valid = btn[x].checked
            if (valid) {break}
      }
      if(!valid)
      {
            alert("Please select an answer.")
            return false;
      }
      
}
</script>
<body>
<form action="confirm.htm">
      <input type="radio" name="question1" id="1b1" value="1">Always</input>
      <input type="radio" name="question1" id="1b2" value="2">Often</input>
      <input type="radio" name="question1" id="1b3" value="3">Sometimes</input>
      <input type="radio" name="question1" id="1b4" value="4">Rarely</input>
      <input type="radio" name="question1" id="1b5" value="5">Never</input>

      <div>
      <input type="radio" name="question2" id="11b1" value="1">Always</input>
      <input type="radio" name="question2" id="11b2" value="2">Often</input>
      <input type="radio" name="question2" id="1b3" value="3">Sometimes</input>
      <input type="radio" name="question2" id="11b4" value="4">Rarely</input>
      <input type="radio" name="question2" id="11b5" value="5">Never</input>
      
            <input type="submit" value="Submit Answer" onSubmit="return Validate(this.form, 'question1')"/>
0
 
ZylochCommented:
Let me check.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
ZylochCommented:
<script language="JavaScript">
function Validate(frm, btnName)
{
     var btn = frm[btnName]
     var valid
     
     for (var x = 0;x < btn.length; x++)
     {
          valid = btn[x].checked
          if (valid) {return true;}
     }
     if(!valid)
     {
          alert("Please select an answer.")
          return false;
     }
     
     var btn = frm.question2
     for (var x = 0;x < btn.length; x++)
     {
          valid = btn[x].checked
          if (valid) {return true;}
     }
     if(!valid)
     {
          alert("Please select an answer.")
          return false;
     }
     
}
</script>
<body>
<form  onSubmit="return Validate(this,'question1')" action="confirm.htm">
     <input type="radio" name="question1" id="1b1" value="1">Always</input>
     <input type="radio" name="question1" id="1b2" value="2">Often</input>
     <input type="radio" name="question1" id="1b3" value="3">Sometimes</input>
     <input type="radio" name="question1" id="1b4" value="4">Rarely</input>
     <input type="radio" name="question1" id="1b5" value="5">Never</input>

     <div>
     <input type="radio" name="question2" id="11b1" value="1">Always</input>
     <input type="radio" name="question2" id="11b2" value="2">Often</input>
     <input type="radio" name="question2" id="1b3" value="3">Sometimes</input>
     <input type="radio" name="question2" id="11b4" value="4">Rarely</input>
     <input type="radio" name="question2" id="11b5" value="5">Never</input>
     
          <input type="submit" value="Submit Answer"/>

Now it should work. The main problem was the onSubmit was in the wrong location AND you don't access the form by doing this.form. It's just this.

--Zyloch
0
 
mattdyeAuthor Commented:
ok thats cool, but it doesnt validate the questio2 set, ps, thanks for the help
0
 
ZylochCommented:
Oh! Sorry, I was at school. I think I know the problem. The script section should be:

<script language="JavaScript">
function Validate(frm, btnName)
{
     var btn = frm[btnName]
     var valid
     
     for (var x = 0;x < btn.length; x++)
     {
          valid = btn[x].checked
          if (valid) {break;}
     }
     if(!valid)
     {
          alert("Please select an answer.")
          return false;
     }
     
     var btn = frm.question2
     for (var x = 0;x < btn.length; x++)
     {
          valid = btn[x].checked
          if (valid) {return true;}
     }
     if(!valid)
     {
          alert("Please select an answer.")
          return false;
     }
     
}
</script>

This is because the first return true; in the previous script exited the function. I tested this and it works fine.

--Zyloch
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now