Solved

Multiple form element validation using Javascript

Posted on 2003-12-02
16
910 Views
Last Modified: 2012-05-04
I am looking to validate wether a radio button has been selected, if it has, i need the page to check whether one of the options that the radio button opens up.

E.g.
I have a survey form, if there was a problem with the product we were surveying, we escalate the survey, this is done by clicking a radio button at the bottom of the form.

Has an escalation been rasied ? Yes <input name="escalate" type="radio" value="Y" onClick="disable_enable()">No <input name="escalate" type="radio" value="N" checked onClick="enable_disable()">

When you click the Yes option, two checkboxes below, become available. What i need to do is check that at least one of the two options has been checked. If this argument is not met, it needs to return to the page so the user can select one.

The two checkboxes are listed below:
Escalation Destination:  Field Service
        <input name="FS_esc" type="checkbox" id="FS_esc" value="YES" disabled>
        <br>
Help Desk
        <input type="checkbox" name="HD_esc" value="checkbox" id="HD_esc" disabled>

Any help is appreciated

Regards
Andrew Fenner
0
Comment
Question by:fenneraj
  • 7
  • 3
  • 2
  • +3
16 Comments
 
LVL 25

Expert Comment

by:James Rodgers
ID: 9859690
if(!document.form.FS_esc.checked && !document.form.HD_esc.checked){

alert("You must make a selection.");
document.form.FS_esc..focus();
return false;
}
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 9859711
this

document.form.FS_esc..focus();

should be

document.form.FS_esc.focus();

and replace form with your actual form name
0
 
LVL 1

Expert Comment

by:oktexasguy
ID: 9859780
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>

function enableCheckboxes(){
      document.getElementById("FS_esc").disabled = false;
      document.getElementById("HD_esc").disabled = false;
}

function disableCheckboxes(){
      document.getElementById("FS_esc").disabled = true;
      document.getElementById("HD_esc").disabled = true;
}

function validateAndSubmit(){
      if( !document.forms[0].elements[0].checked && !document.forms[0].elements[1].checked ){
            alert("a radio button must be selected");
      }
      else if( document.forms[0].elements[0].checked && !document.forms[0].FS_esc.checked && !document.forms[0].HD_esc.checked ){
            alert("at least one checkbox must be selected");
      }
      else{
            alert("validation passed!");
            // then submit the form
      }
}

</script>
</HEAD>

<BODY>
<form>
Escalated?<br/>
<input type="radio" name="escalated" value="yes" onclick="enableCheckboxes()"/>Yes
<br/>
<input type="radio" name="escalated" value="no" onclick="disableCheckboxes()"/>No
<br/>
Escalation Destination:  Field Service
        <input name="FS_esc" type="checkbox" id="FS_esc" value="YES" disabled>
        <br>
Help Desk
        <input type="checkbox" name="HD_esc" value="checkbox" id="HD_esc" disabled>
<br/><br/>
<input type="button" onclick="validateAndSubmit()" value="submit"/>
</form>
</BODY>
</HTML>
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9859838
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function isChecked(strField){
 if (!strField.length) return strField.checked; // not a group
 for(var i = 0; i < strField.length; i++){
      if(strField[i].checked) return true; // yes one was ticked
  }
  return false;
}
function getRadialValue(strControlName){
   for(i=0;i<strControlName.length;i++){
        if(strControlName[i].checked){
             return strControlName[i].value;
        }
   }
}
function validate(fObj){
            if(getRadialValue(fObj.rad1)== "yes"){
                  if(!isChecked(fObj.chk1)){
                        alert("You clicked the radio button, so\n you need to check a checkbox");
                              return false;
                  }
            }
      }
// -->
</script>
</head>
<body>
<form name="form1" method="post" action="" onsubmit="return validate(this);">
      <input type="radio" name="rad1" value="yes">
      <input type="radio" name="rad1" value="no">
      <input type="checkbox" name="chk1" value="checkbox">
      <input type="checkbox" name="chk2" value="checkbox">
      <input type="submit" name="btnSubmit" value="Submit">
</form>
</body>
</html>
0
 
LVL 9

Expert Comment

by:pepsichris
ID: 9859856
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function checkSelected() {
if(document.form1.escalate[0].checked == true)
{
if (document.form1.FS_esc.checked == false && document.form1.HD_esc.checked == false) {
alert('Please check the box to continue.');
return false;
}
}else
return true;
}
//  End -->
</script>

And then in the form tag: onSubmit="checkSelected();" name="form1" or whatever you want.

Haven't checked it but should work...
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9859932
i forgot to add return true

function validate(fObj){
            if(getRadialValue(fObj.rad1)== "yes"){
                  if(!isChecked(fObj.chk1)){
                        alert("You clicked the radio button, so\n you need to check a checkbox");
                              return false;
                  }
            }
            return true;
      }


to break it down for you in english.

if the radio clicked value equals "yes" the we need to make sure the checkbox is checked. If not then alert
the user that s/he needs to check atleast on of the "chk1" checkboxes.

You can name the check boxes the same name, but give them different values so you can determine on the results which was clicked.

Its not good to do this with checkboxes, they really need a different name for each.
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 9860042
Tested and fully functional

<head>
<title></title>
<script>
function enable_disable(chk){
if (chk)
  {document.f1.HD_esc.disabled=false;
  document.f1.FS_esc.disabled=false}
else
  {document.f1.HD_esc.disabled=true;
   document.f1.FS_esc.disabled=true}

}

function checkdata(){
if (document.f1.elements[0].checked)
  if ((!document.f1.HD_esc.checked) && (!document.f1.FS_esc.checked))
    {alert("one box must be checked")
     return (false)
    }
  else return (true)
}
</script>
</head>

<body>

<form name="f1" action="http://google.com" onSubmit="return checkdata();">
  <p>Yes <input name="escalate" type="radio" value="Y" onClick="enable_disable(true)"> No <input
  name="escalate" type="radio" value="N" checked onClick="enable_disable(false)"><br>
  EscalationDestination: Field Service <input name="FS_esc" type="checkbox" id="FS_esc"
  value="YES" disabled> <br>
  Help Desk <input type="checkbox" name="HD_esc" value="checkbox" id="HD_esc" disabled> </p>
  <p><input type="submit" value="submit"> </p>
</form>
</body>
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9860073
and here is the fix for different name checkboxes

function validate(fObj){
            if(getRadialValue(fObj.rad1)== "yes"){
                  if(!isChecked(fObj.chk1)&&!isChecked(fObj.chk2)){
                        alert("You clicked the radio button, so\n you need to check a checkbox");
                              return false;
                  }
            }
            return true;
      }
 
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 16

Expert Comment

by:jaysolomon
ID: 9860105
BTW

document.forms[0].elements[0] = the first form in the page and the first element in the page

an alternative to this is document.forms['formName'].elements['elementName']

0
 

Author Comment

by:fenneraj
ID: 9865753
The soultion by oktexasguy is what i am looking for, the only problem is that if the valdiation fails then the page still passes to the form destination, i need it to come back and preferably focus on one of the two checkboxes. Some more points are up for grabs if anyone can fix it!

Regards
Andrew Fenner
0
 
LVL 16

Accepted Solution

by:
jaysolomon earned 350 total points
ID: 9866557
dunno why you would not want a solution like i have posted, but here is what you want

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>

function enableCheckboxes(){
     document.getElementById("FS_esc").disabled = false;
     document.getElementById("HD_esc").disabled = false;
}

function disableCheckboxes(){
     document.getElementById("FS_esc").disabled = true;
     document.getElementById("HD_esc").disabled = true;
}

function validateAndSubmit(){
     if( !document.forms[0].elements[0].checked && !document.forms[0].elements[1].checked ){
          alert("a radio button must be selected");
              return false;
     }
     else if( document.forms[0].elements[0].checked && !document.forms[0].FS_esc.checked && !document.forms[0].HD_esc.checked ){
          alert("at least one checkbox must be selected");
              return false;
     }
     else{
          alert("validation passed!");
              return true;
          // then submit the form
     }
}

</script>
</HEAD>

<BODY>
<form name="form1" onsubmit="return validateAndSubmit()">
Escalated?<br/>
<input type="radio" name="escalated" value="yes" onclick="enableCheckboxes()"/>Yes
<br/>
<input type="radio" name="escalated" value="no" onclick="disableCheckboxes()"/>No
<br/>
Escalation Destination:  Field Service
        <input name="FS_esc" type="checkbox" id="FS_esc" value="YES" disabled>
        <br>
Help Desk
        <input type="checkbox" name="HD_esc" value="checkbox" id="HD_esc" disabled>
<br/><br/>
<input type="submit" name="btnSubmit" value="submit"/>
</form>
</BODY>
</HTML>
0
 
LVL 9

Expert Comment

by:pepsichris
ID: 9866585
What you want...

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function checkSelected() {
if(document.form1.escalate[0].checked == true)
{
if (document.form1.FS_esc.checked == false && document.form1.HD_esc.checked == false) {
alert('Please check the box to continue.');
document.form1.FS_esc.checked=true;
}
}else
document.form1.submit();
}
//  End -->
</script>

and then:
<input type="button" name="Submit" onClick="checkSelected();" value="Submit">
0
 

Author Comment

by:fenneraj
ID: 9866681
Okay i have now got myself in a muddle, Jay the reason i did not use yours was that it was confusing me when i tried to modify it. All though i have done the same here now. The main problem i am getting is that because i have an action in the form (in this case Google, just for example purposes), when i hit the submit button, the validation rules work (either say passed or please check a check box), but even if no check box is selected, it still passes over to the action URL. I need, to be able to send the user back to the check boxes, i understand that i can set the focus of this if the valdation fails, but the form still passes to the action url.

This is what i have so far
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>

function enableCheckboxes(){
     document.getElementById("FS_esc").disabled = false;
     document.getElementById("HD_esc").disabled = false;
}

function disableCheckboxes(){
     document.getElementById("FS_esc").disabled = true;
     document.getElementById("HD_esc").disabled = true;
}

function validateAndSubmit(){
     if( !document.forms[0].elements[0].checked && !document.forms[0].elements[1].checked ){
          alert("a radio button must be selected");
     }
     else if( document.forms[0].elements[0].checked && !document.forms[0].FS_esc.checked && !document.forms[0].HD_esc.checked ){
          alert("at least one checkbox must be selected");
            }
     else{
          alert("validation passed!");
            return true;
          // then submit the form
     }
}


</script>
</HEAD>

<BODY>
<form method="post" action="http://www.google.com/">
Escalated?<br/>
<input type="radio" name="escalated" value="yes" onclick="enableCheckboxes()"/>Yes
<br/>
<input type="radio" name="escalated" value="no" onclick="disableCheckboxes()"/>No
<br/>
Escalation Destination:  Field Service
        <input name="FS_esc" type="checkbox" id="FS_esc" value="YES" disabled>
        <br>
Help Desk
        <input type="checkbox" name="HD_esc" value="checkbox" id="HD_esc" disabled>
<br/><br/>
<input type="submit" onclick="validateAndSubmit()" value="submit"/>
</form>
</BODY>
</HTML>

As you can see, i am no expert at this. So any help in finding the solution would be great.

Regards
Andrew Fenner
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9866718
look at my last post, i fixed it for you.

0
 

Author Comment

by:fenneraj
ID: 9866815
Cheers Jay. All works now. Thanks to everyone else that pitched in.
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9866931
glad we could help Thanks
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

706 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now