?
Solved

checkbox validation javascript

Posted on 2005-04-01
10
Medium Priority
?
211 Views
Last Modified: 2012-05-05
Hello,

I can't get it to work. it should alert when non of the 3 boxes are checked.
If 1 is checked it's ok


<html>
<head>
<SCRIPT>
function validate()
{
if (form1.answer.checked=='false') {
alert('Please answer.');
event.returnValue=false;
}
</script>
</head>
<body>
<form name="form1" method="post" action="" onSubmit="validate()">
  <p>
    <input name="answer" type="checkbox" id="answer" value="yes">
    yes
    <input name="answer" type="checkbox" id="answer" value="no">
    no
    <input name="answer" type="checkbox" id="answer" value="maybe">
    maybe
</p>
  <p>
    <input type="submit" name="Submit" value="Submit">
</p>
</form>
</body>
</html>
0
Comment
Question by:mvanthof
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
  • +1
10 Comments
 
LVL 32

Expert Comment

by:Batalf
ID: 13679188
<html>
<head>
<SCRIPT>
function validate()
{
    var checked=false;
    var formObj = document.form1;
    for(var no=0;no<formObj.answer.length;no++){
        if(formObj.answer[no].checked)return true;
   
    }
    if(!checked){
        alert('Please answer.');
        return false;
    }
    return true;
}
</script>
</head>
<body>
<form name="form1" method="post" action="" onSubmit="validate()">
  <p>
    <input name="answer" type="checkbox" id="answer" value="yes">
    yes
    <input name="answer" type="checkbox" id="answer" value="no">
    no
    <input name="answer" type="checkbox" id="answer" value="maybe">
    maybe
</p>
  <p>
    <input type="submit" name="Submit" value="Submit">
</p>
</form>
</body>
</html>
0
 
LVL 33

Expert Comment

by:sajuks
ID: 13679189
//try this
<HTML>
<HEAD>
<TITLE></TITLE>
<script>
     function validate()
     {
          elements = document.getElementsByTagName("input");
          counter = 0;
          for (i =0; i < elements.length; i++)
          {
               if(elements[i].type == "checkbox" && elements[i].checked)
               {
                    counter++;
               }
          }
          if(counter == 0)
          {
               alert("Nothing selected");
                  return false;
          }
          else
          {
                alert("OK");
                return true;
          }

     }
</script>
</HEAD>
<BODY>
<table>
     <tr>
          <td>
               <form name="f1" id="f1" action="" onSubmit="return validate();">
                    <input type="checkbox" name="answer" value="yes">
                    <input type="checkbox" name="answer" value="no">
                    <input type="checkbox" name="answer" value="maybe">
                    <br>
                    <input type="submit" value="Check" >
               </form>
          </td>
     </tr>
</table>
</BODY>
</HTML>
0
 
LVL 33

Expert Comment

by:sajuks
ID: 13679206
hey batalf guess u forgot to put the return statement in ur form submit ..

<form name="form1" method="post" action="www.google.com" onSubmit="return validate()">
0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 13679214
Are you sure you want to use checkboxes for that?
Are the answers mutually exclusive then you should use radios

<form name="form1" method="post" action="" onSubmit="validate()">
  <p>
    <input name="answer" type="radio" id="answer" value="yes">
    yes
    <input name="answer" type="radio" id="answer" value="no">
    no
    <input name="answer" type="radio" id="answer" value="maybe" CHECKED>
    maybe
</p>
  <p>
    <input type="submit" name="Submit" value="Submit">
</p>
</form>
0
 

Author Comment

by:mvanthof
ID: 13679286
ok... what if I make them all radio... how will the validation script look like...?
0
 
LVL 32

Accepted Solution

by:
Batalf earned 600 total points
ID: 13679307
Just change checkbox to radio

<html>
<head>
<SCRIPT>
function validate()
{
    var checked=false;
    var formObj = document.form1;
    for(var no=0;no<formObj.answer.length;no++){
        if(formObj.answer[no].checked)return true;
   
    }
    if(!checked){
        alert('Please answer.');
        return false;
    }
    return true;
}
</script>
</head>
<body>
<form name="form1" method="post" action="" onSubmit="return validate()">
  <p>
    <input name="answer" type="radio" id="answer" value="yes">
    yes
    <input name="answer" type="radio" id="answer" value="no">
    no
    <input name="answer" type="radio" id="answer" value="maybe">
    maybe
</p>
  <p>
    <input type="submit" name="Submit" value="Submit">
</p>
</form>
</body>
</html>
0
 

Author Comment

by:mvanthof
ID: 13679357
and if I have some more options? like 3 radiobuttons for answer and 3 for age

<p>
    <input name="age" type="radio" id="answer" value="10-20">
    yes
    <input name="age" type="radio" id="answer" value="21-40">
    no
    <input name="age" type="radio" id="answer" value="41-60">
    maybe
</p>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 13679436
Delete the script and just do


<p>
    <input name="age" type="radio" id="answer" value="No answer" CHECKED>No answer
    <input name="age" type="radio" id="answer" value="10-20">10-20
    <input name="age" type="radio" id="answer" value="21-40">21-40
    <input name="age" type="radio" id="answer" value="41-60">41-60
</p>

and if no answer is not allowed, just test
document.forms.answer[0].checked
0
 

Author Comment

by:mvanthof
ID: 13679566
???????

<html>
<head>
<SCRIPT>
function validate()
{
    var checked=false;
    var formObj = document.form1;
    for(var no=0;no<formObj.answer.length;no++){
        if(formObj.answer[no].checked)return true;
   
    }
    if(!checked){
        alert('Please answer.');
        return false;
    }
    return true;
}
</script>
</head>
<body>
<form name="form1" method="post" action="" onSubmit="return validate()">
  <p>
    <input name="answer" type="radio" id="answer" value="yes">
    yes
    <input name="answer" type="radio" id="answer" value="no">
    no
    <input name="answer" type="radio" id="answer" value="maybe">
    maybe
</p>
<p>
    <input name="age" type="radio" id="answer" value="10-20">
    10-20
    <input name="age" type="radio" id="answer" value="21-40">
    21-40
    <input name="age" type="radio" id="answer" value="41-60">
    41-60
</p>

  <p>
    <input type="submit" name="Submit" value="Submit">
</p>
</form>
</body>
</html>
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13679585
Go for mplungjans solution or modify the script above by

1) Numbering your answer radios answer1, answer2 etc.
2) Make your function loop through the radio buttons.

New code with these changes:

<html>
<head>
<SCRIPT>
function validate()
{
   
    var formObj = document.form1;
    currentIndex=1;
    while(formObj.elements['answer'+currentIndex]){
          var checked=false;
          for(var no=0;no<formObj.elements['answer'+currentIndex].length;no++){
              if(formObj.elements['answer'+currentIndex][no].checked)checked=true;
          
          }          
          if(!checked){
              alert('Please answer all questions ');
              return false;
          }  
          currentIndex++;
   
    }


    return true;
}
</script>
</head>
<body>
<form name="form1" method="post" action="" onSubmit="return validate()">
  <p>
    <input name="answer" type="radio" id="answer1" value="yes">
    yes
    <input name="answer" type="radio" id="answer1" value="no">
    no
    <input name="answer" type="radio" id="answer1" value="maybe">
    maybe
</p>
<p>
    <input name="age" type="radio" id="answer2" value="10-20">
    10-20
    <input name="age" type="radio" id="answer2" value="21-40">
    21-40
    <input name="age" type="radio" id="answer2" value="41-60">
    41-60
</p>

  <p>
    <input type="submit" name="Submit" value="Submit">
</p>
</form>
</body>
</html>
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question