here function i'm using value of user's choice of radio button html file javascript file:
function getradiocheckedvalue(radio_name) { var oradio = document.forms[0].elements[radio_name]; for(var = 0; < oradio.length; i++) { if(oradio[i].checked) { return oradio[i].value; } } return ''; } i using 1 html file having 2 "pages" of radio dials showing , hiding divs. 2 radio dials have different names. when first one, works fine , retrieves value correctly, when second one, page source underlines line
for(var = 0; < oradio.length; i++) and says, "uncaught typeerror: cannot read property 'length' of undefined"
i'm trying call right name.
when change names of second radio match first 1 in both html , javascript file, result value pulled 1 pulled first time (the 1 first "page").
how can make function work second set of radios?
edit: html:
<!doctype html> <html> <head> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link href="css/styles.css" rel="stylesheet" type="text/css"> <script src="js/jquery-1.11.3.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="js/scripts.js"></script> <title>pizza parlor</title> </head> <body> <div class="container"> <h1>pizza parlor</h1> <!---beginning of step 1--> <span class="step-1"> <!--step 1 progress bar begin--> <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 4em;"> step 1/4 </div> </div> <!--step 1 progress bar end--> <h1>step 1: pick size</h1> <!--step 1 options begin--> <form id="size"> <div class="radio"> <label> <input type="radio" name="optionsradios" id="optionsradios1" value="small ($10.00)"> small (10"): $10.00 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsradios" id="optionsradios2" value="medium ($12.00)"> medium (12"): $12.00 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsradios" id="optionsradios3" value="large ($14.00)"> large (14"): $14.00 </label> </div> <!--step 1 options end--> <br> <br> <button class="btn btn-primary"type="submit" class="btn">next</button> </form> </span> <!--end of step 1--> <!--step 2 begin--> <span class= "step-2"> <!--step 2 progress bar begin--> <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 20%;"> step 2 of 4 </div> </div> <!--step 2 progress bar end--> <h1>step 2: pick sauce</h1> <!--step 2 options begin--> <form id="sauce"> <div class="radio"> <label> <input type="radio" name="saucesradios" id="saucechoice1" value="marinara"> marinara </label> </div> <div class="radio"> <label> <input type="radio" name="sauceradios" id="saucechoice2" value="alfredo"> alfredo </label> </div> <div class="radio"> <label> <input type="radio" name="sauceradios" id="saucechoice3" value="pesto"> pesto (add $2.00) </label> </div> <!--step 2 options end--> <br> <br> <button class="btn btn-primary"type="submit" class="btn">next</button> </form> </span> <!--step 2 end --> <!--step 3 span class begin0--> <span class= "step-3"> <!--step 3 progress bar begin--> <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 50%;"> step 3 of 4 </div> </div> <!--step 3 progress bar end--> <form id="toppings"> <div class="checkbox-inline"> <h4>meat</h4> <label class="checkbox-inline"> <input type="checkbox" name="optionstoppings" id="optiontoppings1" value="pepperoni (+ $2.00)"> pepperoni (+ $2.00) </label> <label class="checkbox-inline"> <input type="checkbox" name="optionstoppings" id="optiontoppings2" value="sausage (+ $2.00)"> sausage (+ $2.00) </label> <label class="checkbox-inline"> <input type="checkbox" name="optionstoppings" id="optiontoppings3" value="chicken (+ $3.00)"> chicken (+ $3.00) </label> <br> <h4>veggies</h4> <label class="checkbox-inline"> <input type="checkbox" name="optionstoppings" id="optionstoppings5" value="onions (+ $0.25)"> onions (+ $0.25) </label> <label class="checkbox-inline"> <input type="checkbox" name="optionstoppings" id="optionstoppings6" value="green peppers (+ $0.25)"> green peppers (+ $0.25) </label> <label class="checkbox-inline"> <input type="checkbox" name="optionstoppings" id="optionstoppings7" value="jalapeños (+ $0.25)"> jalapenos (+ $0.25) </label> <label class="checkbox-inline"> <input type="checkbox" name="optionstoppings" id="optionstoppings8" value="mushrooms (+ $0.25)"> mushrooms (+ $0.25) </label> <label class="checkbox-inline"> <input type="checkbox" name="optionstoppings" id="optionstoppings9" value="pineapple (+ $0.50)"> pineapple (+ $0.50) </label> <label class="checkbox-inline"> <input type="checkbox" name="optionstoppings" id="optionstoppings10" value="black olives (+ $0.50)"> black olives (+ $0.50) </label> <label class="checkbox-inline"> <input type="checkbox" name="optionstoppings" id="optionstoppings11" value="green olives (+ $0.75)"> green olives (+ $0.75) </label> <br> <h4>cheese up!</h4> <label class="checkbox-inline"> <input type="checkbox" name="optionstoppings" id="optionstoppings4" value="extra cheese (+ $1.00)"> exta cheese (+ $1.00) </label> </div> <!--step 3 options end--> <br> <br> <button class="btn btn-primary"type="submit" class="btn">next</button> </form> </span> <!--step 3 span end --> <span class= "step-4"> <!--step 4 progress bar begin--> <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 75%;"> last step! </div> </div> <!--step 4 progress bar end--> <form id="how-many"> <div class="form-group"> <label for="number-pizzas">number of pizza want: </label> <input type="text" class="form-control" id="number-pizzas"> </div> <br> <br> <button class="btn btn-primary"type="submit" class="btn">next</button> </form> <!--end of form--> </span> <!-- step 4 span end--> <span class= "step-5"> <em><p> size: </p></em> <ul class="list unstyled" id="crust"> </ul> <em><p> sauce: </p></em> <span class=sauce></span> <em><p> toppings: </p></em> <ul class="list unstyled" id="toppings"> </ul> <hr width=25% align=left> <p>total price of pizza: $<span class="price"></span></p> <p> number of pies: <span class="num-pizzas"></span></p> <p> total price order:</p> <h4>$<span class="total-price"></span></h4> <form id="place-order"> <button class="btn btn-primary"type="submit" class="btn">submit order</button> </form> </span> <!--step 5 span end--> <span class="step-6"> <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"> congratulations! order being prepared! pick in 30 minutes! </div> </div> </span> </body> </html> how i'm calling in javascript:
$(".step-1").show(); $("form#size").submit(function(event) { var pizzasize = getradiocheckedvalue("optionsradios"); $(".my-size").text(pizzasize); $(".step-1").hide(); $(".step-2").show(); event.preventdefault(); }); $("form#sauce").submit(function(event) { var sauce = getradiocheckedvalue("sauceradios"); $(".step-2").hide(); $(".step-3").show(); event.preventdefault(); });
javascript:
function getradiocheckedvalue(radio_name) { var group = document.getelementsbyname(radio_name); (var = 0; < group.length; i++) { if (group[i].checked == true) { return group[i].value; } } } http://jsfiddle.net/seanwessell/yvdxh8js/
however since you're using jquery in op
jquery:
function getradiocheckedvalue(radio_name) { return $(':radio[name=' + radio_name + ']:checked').val() } 
Comments
Post a Comment