Validating Form Data With Javascript -
i asked question yesterday , everyone's advice, able switch statement working (well sort of). still having 2 issues:
the switch statement working, sort of. advice. having 2 issues, though.
1.) if course , section don't match, validation message telling me section isn't valid (great!), after clicking ok, still advances confirmation message , form processor page. advice on how prevent this?
2.) @ confirmation message, if click cancel, correct message registration has been canceled (great!), still advances form processor page...telling me form has been submitted. advice on how prevent this?
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!--document head--> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <!--title element--> <title>greendale community college</title> <!--style element--> <style type="text/css"> body { background-color: white; } h1 { text-align: center; font-family: impact; color: green; } p { font-size: 72px; color: green; } </style> <!--script element--> <script type="text/javascript"> /* <![cdata[ */ // function validate , create message confirm box function submitregistration() { var fname = document.registration.firstname.value; var lname = document.registration.lastname.value; var cwid = document.registration.cwid.value; var semester = document.registration.semester.value; var course = document.registration.courses.value; var section = document.registration.section.value; var major = document.registration.needformajor.value; var semesterdisplay; // display semester info in confirm message if (semester == "fall") semesterdisplay = "fall"; if (semester == "spring") semesterdisplay = "spring"; if (semester == "summer") semesterdisplay = "summer"; //to display major requirement in confirm message var checkdisplay; if (document.registration.needformajor.checked == true) { checkdisplay = "course needed major"; } else { checkdisplay = ""; } //validates first name if (fname == "") { window.alert("you must enter first name!"); return false; } //validates first name non-numeric if (isnan(fname) == false) { window.alert("your first name must non-numeric values!"); return false; } //validates last name if (lname == "") { window.alert("you must enter last name!"); return false; } //validates last name non-numeric if (isnan(lname) == false) { window.alert("your last name must non-numeric values!"); return false; } //validates cwid if (cwid == "") { window.alert("you must enter cwid!"); return false; } //validates cwid numeric if (isnan(cwid) == true) { window.alert("your cwid must numeric values!"); return false; } //validates semester var validatesemester = false; (var = 0; < 3; ++i) { if (document.registration.semester[i].checked == true) { validatesemester = true; break; } } if (validatesemester != true) { window.alert("you must select semester!"); return false; } //validates course if (course == "") { window.alert("you must select course!"); return false; } // validates course , section compatible var error = true; switch (course) { case "cis 100": if (section == '100001') { } else if (section == '100gw1') { } else { window.alert("you must select valid section cis 100!"); error = false; } break; case "cis 120": if (section == '120001') { } else if (section == '120gw1') { } else { window.alert("you must select valid section cis 120!"); error = false; } break; case "cis 220": if (section == '220001') { } else if (section == '220gw1') { } else { window.alert("you must select valid section cis 220!"); error = false; } break; case "cis 299": if (section == '299001') { } else if (section == '299gw1') { } else { window.alert("you must select valid section cis 299!"); error = false; } break; case "cis 302": if (section == '302gw1') { } else { window.alert("you must select valid section cis 302!"); error = false; } break; case "cis 304": if (section == '304001') { } else if (section == '304gw1') { } else { window.alert("you must select valid section cis 304!"); error = false; } break; case "cis 321": if (section == '321001') { } else if (section == '321gw1') { } else { window.alert("you must select valid section cis 321!"); error = false; } break; case "cis 322": if (section == '322gw1') { } else { window.alert("you must select valid section cis 322!"); error = false; } break; case "cis 325": if (section == '325gw1') { } else { window.alert("you must select valid section cis 325!"); error = false; } break; case "cis 330": if (section == '330001') { } else if (section == '330gw1') { } else { window.alert("you must select valid section cis 330!"); error = false; } break; case "cis 332": if (section == '332001') { } else if (section == '332gw1') { } else { window.alert("you must select valid section cis 332!"); error = false; } break; case "cis 341": if (section == '341001') { } else if (section == '341gw1') { } else { window.alert("you must select valid section cis 341!"); error = false; } break; case "cis 343": if (section == '34301a') { } else if (section == '34301b') { } else { window.alert("you must select valid section cis 343!"); error = false; } break; case "cis 352": if (section == '352gw1') { } else { window.alert("you must select valid section cis 352!"); error = false; } break; case "cis 354": if (section == '354001') { } else if (section == '354gw1') { } else { window.alert("you must select valid section cis 354!"); error = false; } break; case "cis 401": if (section == '401gw1') { } else { window.alert("you must select valid section cis 401!"); error = false; } break; case "cis 419": if (section == '419x01') { } else { window.alert("you must select valid section cis 419!"); error = false; } break; case "cis 490": if (section == '490001') { } else if (section == '490gw1') { } else { window.alert("you must select valid section cis 490!"); error = false; } break; case "cis 492": if (section == '492gw1') { } else { window.alert("you must select valid section cis 492!"); error = false; } break; case "mat 195": if (section == '195001') { } else if (section == '195w01') { } else { window.alert("you must select valid section mat 195!"); error = false; } break; case "mat 215": if (section == '215001') { } else if (section == '215w01') { } else { window.alert("you must select valid section mat 215!"); error = false; } break; case "mat 225": if (section == '225001') { } else if (section == '225w01') { } else { window.alert("you must select valid section mat 225!"); error = false; } break; case "mat 281": if (section == '281001') { } else if (section == '281w01') { } else { window.alert("you must select valid section mat 281!"); error = false; } } //validates section if (section == "") { window.alert("you must select section!"); return false; } //confirm message var confirmation = window.confirm("student name: " + fname + " " + lname + " cwid: " + cwid + " semester: " + semesterdisplay + " course: " + course + " section: " + section + " " + checkdisplay); //ok , cancel buttons if (confirmation) { window.alert("you have been registered course!"); } else { window.alert("your registration has been canceled."); } } //reset function function resetregistration() { var resetform = window.confirm("are sure want reset form?"); if (resetform == true) return true; return false; } //functions mouseover , mouseout function mouseover(target) { target.src = 'greendale_paper.png' target.alt = 'paper' } function mouseout(target) { target.src = 'greendale.jpg' target.alt = 'greendale' } /* ]]> */ </script> </head> <body> <!--heading element--> <h1>greendale community college</h1> <!--added mouseover , mouseout--> <center><img src="greendale.jpg" alt="greendale" width="560" height="315" onmouseover="mouseover(this)" onmouseout="mouseout(this)" /></center> <h3 align="center">greendale community college orientation video</h3> <center><iframe width="560" height="315" src="https://www.youtube.com/embed/i3z5qo2o3cu" frameborder="0"></iframe></center> <h2 align="center">course registration page</h2> <form action="formprocessor.html" name="registration" method="get" onsubmit="return submitregistration()" onreset="return resetregistration()"> <h3>student information form</h3> <!--student information--> first name:<input type="text" name="firstname"/><br /> last name:<input type="text" name="lastname"/><br /> cwid:<input type="text" name="cwid" size="8" /><br /> <h3>semester</h3> <h4>(choose semester)</h4> <!--radio buttons choose semester--> <input type="radio" name="semester" value="fall" /> fall 2018 <br /> <input type="radio" name="semester" value="spring" /> spring 2018 <br /> <input type="radio" name="semester" value="summer" /> summer 2018 <br /> <h3>courses</h3> <h4>(choose 1 course)</h4> <table> <!--drop down box courses--> <tr><td style="background:white;border:0">courses:</td> <td> <select name="courses" size="1"> <option value=""></option> <option value="cis 100">cis 100 intro cis</option> <option value="cis 120">cis 120 application prog i</option> <option value="cis 220">cis 220 application prog ii</option> <option value="cis 299">cis 299 system analysis i</option> <option value="cis 302">cis 302 visual programming</option> <option value="cis 304">cis 304 cobol</option> <option value="cis 321">cis 321 db mgt sys , design</option> <option value="cis 322">cis 322 db app development</option> <option value="cis 325">cis 225 dec support systems</option> <option value="cis 330">cis 330 web programming i</option> <option value="cis 332">cis 332 web programming ii</option> <option value="cis 341">cis 341 cisco ccna i</option> <option value="cis 343">cis 343 cisco ccna iii</option> <option value="cis 352">cis 352 global ethics in comp</option> <option value="cis 354">cis 354 sys project mgt</option> <option value="cis 401">cis 401 concepts enter res planning</option> <option value="cis 419">cis 419 cis internship</option> <option value="cis 490">cis 490 systems analysis ii</option> <option value="cis 492">cis 492 systems dev , imp</option> <option value="mat 195">mat 195 discrete math structures</option> <option value="mat 215">mat 215 statistics</option> <option value="mat 225">mat 225 business statistics</option> <option value="mat 281">mat 281 calculus i</option> </select> </td> </tr> </table> <h3>sections</h3> <h4>(choose 1 section)</h4> <table> <tr><td style="background:white;border:0">section numbers:</td> <td> <!--selection box--> <select name="section" multiple="multiple" size="5"> <option value=""></option> <option value="100001">cis 100 001</option> <option value="100gw1">cis 100 gw1</option> <option value="120001">cis 120 001</option> <option value="120gw1">cis 120 gw1</option> <option value="220001">cis 220 001</option> <option value="220gw1">cis 220 gw1</option> <option value="299001">cis 299 001</option> <option value="299gw1">cis 299 gw1</option> <option value="302gw1">cis 302 gw1</option> <option value="304001">cis 304 001</option> <option value="304gw1">cis 304 gw1</option> <option value="321001">cis 321 001</option> <option value="321gw1">cis 321 gw1</option> <option value="322gw1">cis 322 gw1</option> <option value="325gw1">cis 325 gw1</option> <option value="330001">cis 330 001</option> <option value="330gw1">cis 330 gw1</option> <option value="332001">cis 332 001</option> <option value="332gw1">cis 332 gw1</option> <option value="341001">cis 341 001</option> <option value="341gw1">cis 341 gw1</option> <option value="34301a">cis 343 01a</option> <option value="34301b">cis 343 01b</option> <option value="352gw1">cis 352 gw1</option> <option value="354001">cis 354 001</option> <option value="354gw1">cis 354 gw1</option> <option value="401gw1">cis 401 gw1</option> <option value="419x01">cis 419 x01</option> <option value="490001">cis 490 001</option> <option value="490gw1">cis 490 gw1</option> <option value="492gw1">cis 492 gw1</option> <option value="195001">mat 195 001</option> <option value="195w01">mat 195 w01</option> <option value="215001">mat 215 001</option> <option value="215w01">mat 215 w01</option> <option value="225001">mat 225 001</option> <option value="225w01">mat 225 w01</option> <option value="281001">mat 281 001</option> <option value="281w01">mat 281 w01</option> </select> </td> </tr> </table> <!--checkbox--> <input type="checkbox" name="needformajor" /> check if course required major!<br /> <!--submit , reset buttons created--> <input type="submit" name="submit" value="submit"/><br /> <input type="reset" name="reset" value="reset"/> </form> </body> </html>
you don't seem doing error = false. maybe meant return false;
anyway, can add if statement checks value of error , returns false based off it:
break; case "mat 225": if (section == '225001') { } else if (section == '225w01') { } else { window.alert("you must select valid section mat 225!"); error = false; } break; case "mat 281": if (section == '281001') { } else if (section == '281w01') { } else { window.alert("you must select valid section mat 281!"); error = false; } } if (error==false){ return false; } also, need return false on alert cancel correctly:
//ok , cancel buttons if (confirmation) { window.alert("you have been registered course!"); } else { window.alert("your registration has been canceled."); return false; } 
Comments
Post a Comment