javascript - trying to get the validation on the radio group to work correct however I seem to have it backwards -
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>javascript exercises</title> <style type="text/css"> body { font-family:verdana, geneva, sans-serif; font-size:100%; margin:0; padding:0; } p { color:#900; margin-left:20px; } fieldset { border-color: #fff; border-radius: 15px; } div#results { background-color:#ff6; height:auto; width:500px; border:1px solid red; padding:10px; margin-left:20px; -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; box-shadow: 10px 10px 5px #888; border-radius:7px; } div#more { background-color: #39f; height:auto; width:500px; border:1px solid #036; padding:10px; margin-left:20px; margin-top:20px; -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; box-shadow: 10px 10px 5px #888; color:#cf0; } #form1 { padding: 10px; width: 500px; border-style: solid; border-color: #063; border-radius: 15px; -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; box-shadow: 10px 10px 5px #888; background-color: #cff; margin:20px; } </style> <script type="text/javascript"> function validateform1() //function called validateform1 associated submit button @ bottom of form. notice button element type=button not type=submit { var message; //this variable going first message var checkvalue; // variable going value of radio group var fname = document.form1.firstname;//equal value of name field -- create code here var yage = document.form1.yourage;//equal value of age field -- create code here if (fname.value=="") { //if name field null -- create code here message = "hey, forgot fill in name!"; //message value string document.getelementbyid("results").innerhtml = message; //element called results division @ bottom of page message displayed document.form1.firstname.focus(); //refocus cursor name field return; } else { message = ""; //if name field not null, no message generated document.getelementbyid("results").innerhtml = message; } if (yage.value=="") { //if age field null -- create code here message = "your age required!"; //message value string document.getelementbyid("results").innerhtml += "<br>"+message; //element called results division @ bottom of page message displayed document.form1.yourage.focus(); //refocus cursor age field return; } else if(isnan(yage.value)) { //if input of age field not number -- create code here message = "your age supposed number, please enter number!"; //message value string document.getelementbyid("results").innerhtml += "<br>"+message; //element called results division @ bottom of page message displayed document.form1.yourage.focus(); //refocus cursor age field return; }else if(yage.value < 10 || yage.value > 100) { //if age field less 10 or greater 100 -- create code here message = "you know, not believe age correct!"; //message value string document.getelementbyid("results").innerhtml += "<br>"+message; //element called results division @ bottom of page message displayed document.form1.yourage.focus(); //refocus cursor age field return; } else { //when validations name , age clear message = fname.value + " " + yage.value + ". welcome!"; //message generated if name , age fields validated document.getelementbyid("results").innerhtml = message; //output message div called results } var radiogrp = document.form1.skilltype.length; //create variable radio group -- create code here for(var i=0; i<radiogrp; i++) //loop through check see if radio button selected -- create code here { here in text area of code having problems trying select type of right when none of radio selected works , when select 1 says none are.
if(document.form1.skilltype[i].checked) { //create code here
checkvalue = document.form1.skilltype[i].value; //create code here } } if (checkvalue== radiogrp[0]) { //if radio button selection made, create following message -- create code here st_message = "wow " + checkvalue + ", rocks!"; //message generated document.getelementbyid("more").innerhtml= st_message; //message displayed in div called more } else { //if no radio button selected var st_message = "you did not select skill!"; //generate message document.getelementbyid("more").innerhtml = st_message; //display message in div called more }
message = ""; //clear out message variables old data not linger st_message = ""; } </script> </head> <body> <form name="form1" id="form1" action="#" method="post" type="radio"> <fieldset> <div style="float:left"><strong>first name:</div> <div style="float:right; margin-right:150px"></strong><input type="text" name="firstname" id="firstname" /></div> <div style="clear:both"></div> <div style="float:left"><strong>your age:</strong></div> <div style="float:right; margin-right:150px"><input type="text" name="yourage" id="yourage" /></div> <div style="clear:both"></div><br /> <center> <label><input type="radio" name="skilltype" value="designer" id="skilltype_0" /><strong>designer</strong></label> <label><input type="radio" name="skilltype" value="developer" id="skilltype_1" /><strong>developer</strong></label> <label><input type="radio" name="skilltype" value="programmer" id="skilltype_2" /><strong>programmer</strong></label> <label><input type="radio" name="skilltype" value="artist" id="skilltype_3" /><strong>artist</strong></label> </center> </fieldset> <br /> <center> <input type="button" value="submit" onclick="validateform1()" /> <input type="reset" value="clear form" /> </center> </form> <div id="results"></div> <div id="more"></div> </body> </html>
if (checkvalue== radiogrp[0]) that's not right. you've got radiogrp defined as:
var radiogrp = document.form1.skilltype.length; so radiogrp[0] is... well, won't work.
try switching if/else around , checking undefined checkvalue:
if (typeof(checkvalue)=='undefined') { var st_message = "you did not select skill!"; document.getelementbyid("more").innerhtml = st_message; message = ""; st_message = ""; } else { st_message = "wow " + checkvalue + ", rocks!"; document.getelementbyid("more").innerhtml= st_message; }
Comments
Post a Comment