Sunday, October 11, 2009

I have a question about javascript, dynamic loops, and verifing checkboxes.?

I have a asp page that displays information from loops that are dynamically created from a sql server table. I want to check to see if at least one checkbox is checked before i submit the page. The problem is that I can not figure out how to have the javascript catch all the names that are different. ex) %26lt;input type='checkbox' name='label" %26amp; j%26gt;

I have a question about javascript, dynamic loops, and verifing checkboxes.?
Generally, I now recommend against anonymous functions, but for the sake of the example (proving there are 1000 ways to skin a cat)...





%26lt;html%26gt;





%26lt;head%26gt;


%26lt;script%26gt;


function verifyAnyChecked(formRef) {


var checked = false;


var inputs = formRef.elements;


var last = inputs.length;


for (var i = 0; i %26lt; last; i++) {


if('checkbox' == inputs[i].type){


checked = checked || inputs[i].checked;


}


}


alert(checked);


return(checked);


}


%26lt;/script%26gt;


%26lt;/head%26gt;





%26lt;body%26gt;


%26lt;form%26gt;


%26lt;input type="text" /%26gt;



%26lt;input type="checkbox" /%26gt;



%26lt;input type="checkbox" /%26gt;



%26lt;input type="button" value="click me" onclick="verifyAnyChecked(this.parentNod... /%26gt;


%26lt;/form%26gt;


%26lt;/body%26gt;





%26lt;/html%26gt;





Echoing...never trust client-side validation (look-up Achilles - the hacking tool, not the Greek hero). Client-side validation can improve the user experience and avoid request/response exchanges, but should not replace server validation of data (it's a sad world, but never trust your user input).





Have fun, skinnin' your cat!
Reply:You can loop through the form inputs, checking if checkbox types are checked:





%26lt;form onsubmit = "return check(this)" action=yourURL%26gt;


%26lt;input type=checkbox name="name1" value="val1"%26gt;


%26lt;input type=checkbox name="name2" value="val2"%26gt;


%26lt;input type=submit value="Send"%26gt;


%26lt;/form%26gt;





%26lt;script%26gt;


function check(form) {


var checked = false;


var inputs = form.getElementsByTagName( 'input');


for(i=0; i%26lt; inputs.length; i++) {


if(inputs[i].type == 'checkbox'){


checked = inputs[i].checked ? true : checked;


}


}


alert(checked);


return(checked);


}


%26lt;/script%26gt;





This will alert true if any of the checkboxes are checked, false if none are checked. This form will not be submitted if none of the checkboxes are checked - the return code is passed to onsubmit to achieve this. Of course you can change this to suit.





So replace the alert with the code that you want.





It still would be better to add extra defence in your server script to also check which boxes are checked. You can do this easily because the name-value pair for each checkbox will only be sent to the server if the box has been checked.So if you check no boxes, then none of those values get sent to the server as part of the query.
Reply:Assuming you are using a naming convention like your example above where you use a root and a counter variable to make different names for the checkboxes you could just use javascript to iterate in a loop through all the controls on a form and only check the ones that start with the root word you use "label" per your example...





For instance:





myElem = document.myForm.elements


for (var i=0; i%26lt;myElem.length; i++) {


if (myElem[i].name.substring(5) == 'label') {


//check for a check here...


}


}





If your names vary in another way you may want to use asp to generate your javascript.





Also just as an aside, make sure to handle it properly on the server side as a safeguard. If someone has javascript disabled and submits with no checkboxes checked you may want to redirect them or display an error message at that point as well.



maintenance repairs

No comments:

Post a Comment