javascript - validate 2 dropdowns (only some combinations valid) -
i new javascript.
have size , color dropdowns on page users order product, combinations available i.e. pink color in large sizes.
thought i'd make array of allowed sizes , test user input against these. if choice invalid want popup tell user why.
in real world i'll use sql & php create array of allowed choices, in example below i've hard coded 3 valid choices testing. unfortunately code below doesn't anything.
i'm sure it's simple newb mistake. don't know i'm doing :)
can me out?
the validation function supposed happen when user clicks form submit...
<form id="form1" name="form1" method="post" onsubmit="return validate_form()" action="cart.php"> here's function:
<script type="text/javascript"> function validate_form() { var allowed = new array(); allowed[0]="10,beige"; allowed[1]="10,black"; allowed[2]="10,pink"; var chosencolind = document.getelementbyid("colid"); var chosencoltext = colid.options[colid.selectedindex].text; var chosensizeind = document.getelementbyid("sizeid"); var chosensizetext = sizeid.options[sizeid.selectedindex].text; var chosensizecol = chosensizetext+","+chosencoltext; var found = "false"; ( var = 0; < allowed.length; i++ ) { if (allowed[i]=chosensizecol) { found = "true"; } } if (found = "false") { alert( 'the variation have selected unavailable. please select another.' ); return false; } else { return true; } } </script>
there few lines use assignment operator (that single equals =) instead of 1 of equality operators (that double or triple equals, triple preferred in javascript). example:
if (found = "false") { would appear problem @ first sight - it's assignment not comparison :) use triple equals === instead of single:
if(found === "false") { also, consider following (commented) updates code, reflects more typical style of javascript code:
function validate_form() { //no need use new array(), use array literal instead var allowed = [ "10,beige", "10,black", "10,pink" ]; var chosencolind = document.getelementbyid("colid"); var chosencoltext = colid.options[colid.selectedindex].text; var chosensizeind = document.getelementbyid("sizeid"); var chosensizetext = sizeid.options[sizeid.selectedindex].text; var chosensizecol = chosencoltext+","+chosensizetext; var found = "false"; ( var = 0; < allowed.length; i++ ) { //use equality operator instead of assignment if (allowed[i]===chosensizecol) { found = true; //may use boolean rather string break; //exit loop early, no need continue if we've found } } if (!found) { //no need comparison boolean values alert( 'the variation have selected unavailable. please select another.' ); } //may return found here we're using boolean return found; }
Comments
Post a Comment