How do you validate a checkbox in a form using OnSubmit?

Joe2k · Jul 17, 2000

Hi, My problem is that I need a script that will make sure at least 1 of the 6 checkboxes are selected before being sent.  This is the top part of the form, and I have all the other validations working except for the checkboxes.  Here is what I have so far: ONSUBMIT=" if (this.councillor1.checked == FALSE) { return true } else if (this.councillor2.checked == FALSE) { return true } else if (this.councillor3.checked == FALSE) { return true } else if (this.councillor4.checked == FALSE) { return true } else if (this.councillor5.checked == FALSE) { return true } else if (this.councillor6.checked == FALSE) { alert('Please select a councillor') return false } else if (this.Subject.value == '') { alert('Please enter a title for the subject') return false } etc..... So what I need is it to read down the script and if does not read a selected checkbox, a alert message pops up saying that they need to make a selection. Thanks a ton, Joe

jaredn · Jul 17, 2000

this from my other answer: I would write the code like so (but im in a hurry

if(thecheckbox.checked){return true} if(thecheckbox1.checked){return true} if(thecheckbox2.checked){return true} if(thecheckbox3.checked){return true} ... window.alert("please choose an item&quot

return false; you could probably cycle through an array also... if(form.elements.checked){return true} ...depending on the form - <A HREF="mailto:jared@aauser.com">jared@aauser.com</A>

Joe2k · Jul 17, 2000

It still does not work.  Now all it does is skip all my validations.  This is what it looks like now: ONSUBMIT=" if (councillor1.checked) { return true } if (councillor2.checked) { return true } if (councillor3.checked) { return true } if (councillor4.checked) { return true } if (councillor5.checked) { return true ) if (councillor6.checked) { return true } else { alert('Please select a councillor') return false } else if (this.Subject.value == '') { alert('Please enter a title for the subject') return false } other varlidations ....... Does anyone know why it doesn't work?  Help! Thanx, Joe

Joe2k · Jul 19, 2000

Can anyone help me?  Please!

ChrisQuick · Jul 21, 2000

Create a hidden input within the form to serve as a indicator if a choice has been selected. <input type='hidden' name='radioPickedOk' value='0'> In your form have the following: <form id='whatever" name="whatever" action="ValidateForm"> <input type='radio' name='councillor' value='councillor1' OnClick=""document.whatever.radioPickedOk.value='1';> <input type='radio' name='councillor' value='councillor2' OnClick=""document.whatever.radioPickedOk.value='1';> <input type='button' value='Update' onClick=""validateFields(this.form);""> </form> In the header of your page include the following JavaScript: <script language="javascript"> {  function validateFields(f)   if (f.radioPickedOk.value == '0')&quot

{ alert("Please Select a Choice.&quot

;     }   else     { f.submit();     } } </script>

jaredn · Jul 21, 2000

You could do that without a hidden field as well, jsut a global variable. Thats a good idea, but there is one problem. The onClick event will fire even if they are clicking the check box to uncheck it (so if i click the yes box and than click it again, it is no longer checked, but my variable thinks so). What you really need is a function that is called onClick that checks to see if it unchecked and then sets the variable accordingly (if its checked and being clicked, make the controller variable false). <A HREF="mailto:jared@aauser.com">jared@aauser.com</A>

DonP · Jul 31, 2000

I'm working on the same problem and have another post about it. But I am confused by the above (I know HTML very well, but know little about JavaScript).  How is the form submitted to my processing script if it has a form tag like: <form id='whatever" name="whatever" action="ValidateForm"> Doesn't the action have to be the script that processes the form, which in this case is a VBscript? It looks like the right idea though, but I have not been able to get it to work on my file. Don

DonP · Aug 2, 2000

I'm trying to get a checkbox validation to work but seem to be missing something. This was taken from various posts here on tek-tips so I've probably gotten something mixed up. Can anyone help? The HTML form includes a number of check boxes with the same name="CITY" value similar to this one: <input type="checkbox" name="CITY" value="'Campbell'" OnClick="form.CITY.checkboxPickedOk.value='1';"> The form tag itself is: <form name="city" method="post" action="cgi-bin/search.asp" OnSubmit="return OnSubmitCity(this)"> And a hidden tag: <input type="hidden" name="checkboxPickedOk" value="0"> I want it to submit if there is either a keyword entered or a city selected (or both). The alert JavaScript code is:  function OnSubmitCity(form){    if (form.Keywords.value=="" ¦¦ form.CITY.checkboxPickedOk.value=="0&quot

{                  alert("You did not select any Cities and/or Keywords!\n\nPlease try again . . .&quot

;            return false; } } The search button is plain HTML: <input type="submit" value="Begin Search"> Thanks! Don

iza · Aug 3, 2000

joe2k : f course it skips all your validation as as soon as one is checked you return true = you go out of the function have to do something like : if (!c1.checked&&!c2.checked&&...&&!c6.checked)   alert("you have to check at least one checkbox thank you&quot

return true sure it does work no need of any hidden field or what !!!

iza · Aug 3, 2000

DonP : the point is that all your checkboxes have the same name !! what you have to do is first to create DIFFERENT checkboxes, let's say one per city, something like :   <input type="checkbox" name="Campbell" value="Campbell">   <input type="checkbox" name="Paris" value="Paris"> then : "I want it to submit if there is either a keyword entered or a city selected (or both)." function OnSubmitCity(form){    if (form.Keywords.value=="" ¦¦ (!form.Campbell.checked&&!form.Paris.checked&&!...))    alert("hey you have to enter at least ...&quot

; return true; } it DOES work ;]

iza · Aug 3, 2000

DonP : what you missed in ChrisQuick's post is that he was using RADIO button - NOT checkboxes !!!!!! ChrisQuick : i don't think you actually NEED the hidden field

DonP · Aug 3, 2000

iza, Actually I saw that Radio Buttons were being referred to but the title of this thread is for Checkboxes.  I presumed since that's the case, that it would work for both. DonP

DonP · Aug 3, 2000

iza, Unfortunately I do not have the option of renaming the checkboxes.  They all need to be "CITY" to work with the VBscript that precesses them.  Otherwise, it would have to be rewritten and I dan't have the skills (or time) to do that, especially since we are a small non-profit community service company. Even though I am not a programmer, I can't understand what difference it could make since logically, I would think that if one or more were checked but had the same value, as long as that value showed as checked (or not) it could be passed into the JavaScript so an alert would appear if nothing were selected.  Does that make sense or am I out in left field in the way I'm thinking? The Alert is working if I don't enter a Keyword, but I need to be able to select a city or cities without a keyword and have it submit too.  I need the alert if a city is NOT checked, by the way, not if it is.

iza · Aug 4, 2000

ok, you just don't get the diff between checkboxes & radiobuttons : * CHECKBOX places a toggle switch on an HTML form, letting the user set a value on or off. * RADIO places a radio button on an HTML form. Radio buttons can be grouped into sets, and only one button per set can be selected at a time [both from the netscape developper's doc] --> so if you have many checkboxes with the same name, it can be tough to know which one is actually on or off --> i think you should use RADIOBUTTONS : they all have the same name and different values, and the user can only select one, so it's easy to know which one is selected then your code is :   <input type="radio" name="city" value="Campbell">   <input type="radio" name="city" value="Paris"> ... function OnSubmitCity(form){    if (form.Keywords.value=="" ¦¦ (form.city.value='')) // the selected city (if one) is form.city.value - so if it's empty no city at all is selected    alert("hey you have to enter at least ...&quot

; return true; }

DonP · Aug 4, 2000

iza, Thanks, but I DO understand the difference between radio buttons and checkboxes.  That's why I am using checkboxes!  A user must be able to make multiple selections so that searches can be done of several cities together, which is why they MUST have the same name=city value.  That is how the search VBscript is coded and I don't have the option to rewrite it.  It would mean writing some very complicated SQL statements if each city had a different name value.  All I need to do is to have an alert when a checkbox (any checkbox) is NOT selected and/or when a keyword is NOT entered.  As long as the JavaScript is NOT getting the name=city value, it should give an alert since there will be no alert if one or more IS checked (or if a Keyword is entered). Maybe you can suggest how to do it if I had only ONE checkbox and a Keyword tag and forget that there are multiple ones.  Does that make it any easier?   Right now, I have a workaround built into the VBscript when there are no entries but I don't want the error message to be on the server side.  Our server needs all the help it can get.  With the JavaScript alert I presented above, it is giving an alert but is requiring a Keyword, which is not desirable.  I want to be able to simply list the database contents of a city without having to enter a Keyword if that's what the user desires. How about something like this in each city checkbox tag: onClick="city=1" onClick="city=2" ...etc And then something like this in the JavaScript alert (I know the syntax is all wrong - this is just the general idea): function OnSubmitCity(form){     for (i=0;i<document.CITY.city.length;i++){     if (document.CITY.city.checked==true)        city=i        }    if (form.Keywords.value=="" ¦¦ city=="&quot

{            alert("You did not select any Cities and/or Keywords!\n\nPlease try again . . .&quot

;            return false; } } I gleaned this from another site that goes into great detail about radio buttons and  checkboxes with an example of checkboxes that have the same name value, though I'm not sure how to impliment it on my site with my alert.  Based loosely on this, maybe you can suggest what needs to be done. Here's the URL to the site: <A HREF="

http://server1.wsabstract.com/javatutors/radiocheck.shtml"

TARGET="_new">

http://server1.wsabstract.com/javatutors/radiocheck.shtml</A> Thanks

in advance for any more suggestions or ideas, keeping in mind that this thread is about Checkboxes, not Radio Buttons. Don

iza · Aug 4, 2000

ok i got it so either -------------------------------------------- you have to use the document.your_form_name.elements array and do something like : (it's what jaredn told you at the 1st answer !!!!!)  var is_a_checkbox_checked=false  var element_array=document.your_form_name.elements  for (var i=0; i<element_array.length; i++) {         if (element_array.type=='check') // not sure of the name of the type but you can check on the doc ;]               if(element_array.checked)                    is_a_checkbox_checked=true   } and now, is_a_checkbox_checked is false if none is checked, whatever the name they can have !!! i'm sure there's a faster / clever / more elegant way to do it but .. -------------------------------------------------------- or just create a var that is FALSE when you load the page (a not very nice way but it works : <body onload="javascript:var test=false;"&gt

and then if any check box is checked set it to true be careful that when a checkbox is UNchecked the onclick event fires as well ! so an idea is : <input type="checkbox" name="CITY" value="'Campbell'" OnClick="if (this.checked) test=true else test=test&false"> -------------------------------------------------------- hope that helps !!!

DonP · Aug 4, 2000

iza, Thanks! Actually I tried that since it appears to be exactly what I need but, since I am not a programmer, I couldn't get it to work because it was written generally rather than specifically, especially since I need to take into account the Keyword tag.  I'm not even sure where I need to put it!  But I'll give it another go since it does appear to be what I need. Maybe I'll get lucky this time uness someone can help with specifics! Don

Joe2k · Aug 4, 2000

Hey Don, Well I started this message string and I hope to stop it.  I had the same problem as you.  But everyone that messaged came close to making it work.  So I had to just write it myself.  So here is the script I use to make sure at least one of the checkboxes is selected: <input type="checkbox" name="MayorCouncil" value="AllCouncil" onClick=" if (Mayor.checked ¦¦ Councillor1.checked ¦¦ Councillor2.checked ¦¦ Councillor3.checked ¦¦ Councillor4.checked) { alert('To select Mayor & Council, please de-select the councillors you have checked') return false } else (MayorCouncil.checked) { return true }"> Ok for me MayorCouncil was the last checkbox in my list.  So the script just reads down the checkboxes and see's if they are selected ot not.  The only weird thing is that this script only worked when it was as the bottom of my validation script.  I don't know why but I don't care cause this works.  Anyway I hope this helps Joe

DonP · Aug 4, 2000

Joe2k, Thanks! I appreciate everyone's help and have tried all the suggestions so far. Your code is basically what I'm looking for and I had already tried it too, but it seems to require the checkbox be checked rather than unchecked for the alert.  To reverse it, I tried:                          if (form.Keywords.value=="" ¦¦                          city1.unchecked ¦¦                          city2.unchecked ¦¦                          city3.unchecked ¦¦  ...etc.                          {           alert("You did not select any Cities and/or Keywords!\n\nPlease try again . . .&quot

return false;                          }                          else (city.checked)                          {                          return true;                          } And I tried:                          if (form.Keywords.value=="" ¦¦                          city1.checked==false ¦¦                          city2.checked==false ¦¦                          city3.checked==false ¦¦  ...etc.                          {          alert("You did not select any Cities and/or Keywords!\n\nPlease try again . . .&quot

return false;                          }                          else (city.checked)                          {                          return true;                          } With form tags like this: <input type="checkbox" name="CITY" value="'Campbell'" onClick="city=1"> <input type="checkbox" name="CITY" value="'Cupertino'" onClick="city=2"> <input type="checkbox" name="CITY" value="'Gilroy'" onClick="city=3"> But either way, I get the alert unless I enter a Keyword!  I think it's almost there but not quite.  Maybe I just put my alert and Keyword line in the wrong place . . . Don

Joe2k · Aug 4, 2000

Don, I don't think you have have the onClick variable in the script I wrote.  There you have to put the name of the checkbox.  So in your case you would put "CITY".  Now that I think of it I am not sure my script will work cause all of your checkboxes have the same name.  But try putting "CITY" in, see if that works. Joe

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How do you validate a checkbox in a form using OnSubmit?

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

IS-IT--Management

IS-IT--Management

Programmer

Programmer

Programmer

IS-IT--Management

IS-IT--Management

Programmer

IS-IT--Management

Programmer

IS-IT--Management

Programmer

IS-IT--Management

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor