murfitUK Posted August 20, 2010 Share Posted August 20, 2010 I'm not very good with javascript so need some help! I've got a page which has a list of 6 checkboxes. The user can tick as many as they want but must choose at least one. I'm trying to validate the form with javascript and display an alert if they haven't ticked at least one box.The basic html for the form, in part, is: <form name="addshortlist" action="shortlist.php" method="post" onsubmit='return validate_addshortlist();'><input type="checkbox" name="category[]" value="A" /> A<br /> <input type="checkbox" name="category[]" value="B" /> B<br /> <input type="checkbox" name="category[]" value="C" /> C<br /> <input type="checkbox" name="category[]" value="D" /> D<br /> <input type="checkbox" name="category[]" value="E" /> E<br /> <input type="checkbox" name="category[]" value="F" /> F<br /><input type="submit" name="addsl" value="Add To Shortlist" /></form> The validation script, in part, is: function validate_addshortlist() { valid = true; var message = 'Please correct the following errors:\n\n';// The section below doesn't work var checks=0; var i = document.addshortlist.category.length; for (x=0; x<i; x++) { if (document.addshortlist.category[x].checked) checks=1; } if (checks==0) { valid = false; message = message + '- you must choose at least one category...\n'; } // End of section if (document.addshortlist.client.value=='') { valid = false; message = message + '- you have not selected a client...\n'; } if (document.addshortlist.urgency.value=='0') { valid = false; message = message + '- you have not selected the priority...\n'; } if (document.addshortlist.dfield1.value=='') { valid = false; message = message + '- you have not entered a date...\n'; } message = message + '\nPlease correct and then click the Add To Shortlist button again.\n'; if (valid == false) { alert(message); } return valid; } It's the bit between the comment lines that I can't get to work correctly. Everything else is fine. I can't figure out what's wrong. Thanks. Link to comment Share on other sites More sharing options...
ShadowMage Posted August 20, 2010 Share Posted August 20, 2010 What is your script doing? Do you get error messages?You might want to consider getting rid of the old fashioned dot notation (document.formName.element) in favor of using id's and document.getElementById() to get references to your elements. And change your form name to an id (<form id="addshortlist"...>) You can then use the same getElementById() to get a reference to the form and use the elements property of the form to get all the inputs in the form, which you'd loop through to see if any checkboxes are checked. Link to comment Share on other sites More sharing options...
murfitUK Posted August 20, 2010 Author Share Posted August 20, 2010 Thanks for the reply. Unfortunately, I can't get the hang of javascript at all so your suggestion about using getElementsById instead is completely out of my league. My attempts to learn javascript over the last 5 years have come to nothing.Firefox's error console tells me that document.addshortlist.category is undefined in the line var i = document.addshortlist.category.length; Link to comment Share on other sites More sharing options...
jeffman Posted August 20, 2010 Share Posted August 20, 2010 Your looping idea is the way to go. To get the correct collection to loop through, try something like this: var myform = document.getElementById("addshortlist");var mycheckboxes = myform.getElementsByTagName("input");// now loop through mycheckboxes and test the checked property the way you've already tried.// you may need to test the type property before you try to access the checked property.// so your loop may need a conditional likeif (mycheckboxes[x].type.toLowerCase() == "checkbox"){ if (mycheckboxes[x].checked) checks=1;} Important! You must add this to your form tag:id="addshortlist"EDIT: corrected mistakes pointed out below. Link to comment Share on other sites More sharing options...
murfitUK Posted August 20, 2010 Author Share Posted August 20, 2010 Thanks Deirdre's Dad. How do I set up the loop now though. I take it I still need to find the number (the equivalent of var i in my previously posted code). Would it be something like var i = mycheckboxes.length - tried that but it doesn't work. And once I've got that does the loop still start at 0, or is the first element called 1?Also, in your first line should it be document.GetElementById Link to comment Share on other sites More sharing options...
ShadowMage Posted August 20, 2010 Share Posted August 20, 2010 Thanks Deirdre's Dad. How do I set up the loop now though. I take it I still need to find the number (the equivalent of var i in my previously posted code). Would it be something like var i = mycheckboxes.length - tried that but it doesn't work. And once I've got that does the loop still start at 0, or is the first element called 1?The loop is identical to what you have in your original code, except the variable i will be the length of the variable mycheckboxes. Combined with DD's code above it should look something like this:var myform = document.getElementById("addshortlist");var mycheckboxes = myform.getElementsByTagName("input");var checks=0;var i = mycheckboxes.length;for (x=0; x<i; x++) { if (mycheckboxes[x].type.toLowerCase() = "checkbox") { if (mycheckboxes[x].checked) checks=1; }} Just noticed your edit. It should be document.getElementById() I didn't notice that when I copied his code either so I've fixed it in mine above. Link to comment Share on other sites More sharing options...
murfitUK Posted August 20, 2010 Author Share Posted August 20, 2010 I've solved it! Deirdre's Dad hadif (mycheckboxes[x].type.toLowerCase() = "checkbox")whereas it should be a double equal sign ==Thanks everyone. Link to comment Share on other sites More sharing options...
ShadowMage Posted August 20, 2010 Share Posted August 20, 2010 Deirdre's Dad hadif (mycheckboxes[x].type.toLowerCase() = "checkbox")whereas it should be a double equal sign == I didn't notice that either! Guess that's what happens when you write code too fast. **Hides from thescientist ** Link to comment Share on other sites More sharing options...
thescientist Posted August 20, 2010 Share Posted August 20, 2010 Link to comment Share on other sites More sharing options...
jeffman Posted August 20, 2010 Share Posted August 20, 2010 Sorry about the goofs. I guess I was in a hurry and wanting to help out before I split. A good lesson learned, though: always double-check borrowed code. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.