CODEWITHSUNDEEP
javascripthtml
user3169700
user3169700

Reputation: 171

Why is this function causing an error?

Here is a function I'm using to get the value of the user's choice of radio button from the html file into my javascript file: 

  function getRadioCheckedValue(radio_name)
  {
     var oRadio = document.forms[0].elements[radio_name];
     for(var i = 0; i < oRadio.length; i++)
     {
        if(oRadio[i].checked)
       {
           return oRadio[i].value;
        }
     }
     return '';
  }

I am using one html file but having two "pages" of radio dials by showing and hiding divs. The two radio dials have different names. When I do the first one, it works fine and retrieves the value correctly, but when I do the second one, the page source underlines the line 

    for(var i = 0; i < oRadio.length; i++)

and says, "Uncaught TypeError: Cannot read property 'length' of undefined"

I'm definitely trying to call it by the right name.

When I change the names of the second radio to match the first one in both the html and javascript file, the result is that the value that is pulled is the one pulled the FIRST time (the one from the first "page").

How can I make this function work with a 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 your 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 your 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 it 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 this pizza that you 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 this pizza: $<span class="price"></span></p>
  <p> Number of pies: <span class="num-pizzas"></span></p>
  <p> Total price for this 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! Your order is being prepared! Pick it up in about 30 minutes!
    </div>
  </div>
</span>
  </body>
</html>

How I'm calling this 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();
  });

Upvotes: 0

Views: 80

Answers (3)

Pointy
Pointy

Reputation: 413720

The reason you're getting that error is that you name one of those radio buttons "saucesRadios", but the other two are called "sauceRadios". Because there's only one radio button with the name you used, you get a single node back and not a node list.

edit nope, Barmar's right, you're always only looking at the first form on the page.

Upvotes: 2

Barmar
Barmar

Reputation: 780869

You can do this with jQuery:

var pizzaSize = $(":radio[name=optionsRadios]:checked").val();

The reason your code is failing is because you have more than one form on your page: a form for size, another form for sauce, etc. document.forms[0] only looks in the first form, so if you try to get a radio button from one of the other forms it won't find it.

Upvotes: 4

Sean Wessell
Sean Wessell

Reputation: 3510

Javascript:

  function getRadioCheckedValue(radio_name) {
      var group = document.getElementsByName(radio_name);

      for (var i = 0; i < group.length; i++) {
          if (group[i].checked == true) {
              return group[i].value;
          }
      }
  }

http://jsfiddle.net/SeanWessell/yvdxh8js/

However since you're using jQuery in your OP

jQuery:

  function getRadioCheckedValue(radio_name) {
    return $(':radio[name=' + radio_name + ']:checked').val()
  }

http://jsfiddle.net/SeanWessell/yvdxh8js/2/

Upvotes: 2

Related Questions