How to display value using radio buttons in javascript and add it with checkboxes value?

Question

I'm trying to add the radio button and the checkboxes, but I'm either getting a nan value from the checkboxes or nothing is displayed if I add them both. I'm not sure why I am not getting the answer I thought I've understood through my code, especially on javascript.

function calculatePrice() {
  var i;
  var resultmessage = "";
  var pizzamount = parseFloat(0);
  var radval;
  var radval2;
  var chckbox;
  var totalvalue = parseInt(0);

  for (i = 0; i < document.cost.typed.length; i++) {
    if (document.cost.typed[i].checked) {
      radval = document.i.typed[i].value;
    }
  }

  if (document.cost.cheese.checked) {
    pizzamount += 150 / 100;
  }
  if (document.cost.pepperoni.checked) {
    pizzamount += 150 / 100;
  }

  radval = parseFloat(radval);
  pizzamount = parseFloat(pizzamount)
  var resultmessage = "Total cost: $" + pizzamount;
  document.getElementById("result").innerHTML = resultmessage;
}

<form name="cost" autocomplete="on">
  <table class="left" border="1px">
    <tr>
      <th>
        Choose a Pizza Size
      </th>
    </tr>
    <tr>
      <td>
        <input type="radio" name="typed" value="18" checked>Extra Large
        <br>
        <input type="radio" name="typed" value="15">Large
        <br>
        <input type="radio" name="typed" value="10">Medium
        <br>
        <input type="radio" name="typed" value="8">Small
        <br>
      </td>
    </tr>
    <tr>
     <td>
       <input type="checkbox" name="cheese" checked>Extra Cheese<br>
       <input type="checkbox" name="pepperoni">Pepperoni<br>
     </td>
   </tr>
  </table>
 <input type="button" value="Place Order" onClick="calculatePrice()">
</form>

Well, your HTML doesn't reflect your javascript variables, your accessors in your javascript aren't doing what you think and you never actually call the calculate function. At a start. — Snowmonkey
– Snowmonkey, Commented Feb 8, 2017 at 18:50
I forgot to add it. Since I only want to show the portion of my code, but thanks for pointing it out. — Nico Robin
– Nico Robin, Commented Feb 8, 2017 at 18:52
In order to access the fields, you'd do document.getElementsByName("typed") rather than what you're doing. — Snowmonkey
– Snowmonkey, Commented Feb 8, 2017 at 19:14

Snowmonkey · Accepted Answer · 2017-02-08 19:27:11Z

1

Made a few small changes, but largely cosmetic -- firstly, note that I'm still storing the check and radio as variables, and accessing them. But when I use the radio, I simply use that to get the size, then (using its index) reference the price/size array to get the actual pizza price. Other than that, it's working exactly the same.

calculatePrice = function calculatePrice() {
  var resultmessage = "";
  var pizzamount = parseFloat(0);
  var radval;
  var radval2;
  var chckbox;
  var totalValue = parseInt(0);
  var priceTable = [
    {
      size: "18",
      price: 12.00
    }, {
      size: "15",
      price: 10.75
    }, {
      size: "10",
      price: 9.90
    }, {
      size: "8",
      price: 9.25
    }];
  var size = document.getElementsByName("size");
  var extras = document.getElementsByName("extras");
  
  // First, calculate the size. This is a radio, so
  //  we should only get one value.
  for (var i=0; i<size.length; i++) {
    if(size[i].checked){
    radVal = priceTable[i].size;
    totalValue += priceTable[i].price;
    }
  }
  // next, the extras. This may be multiple options
  for (var i=0; i<extras.length; i++) {
    if (extras[i].checked) {
      totalValue += (150/100);
    }
  }

  //radval = parseFloat(radval); 
  totalValue = parseFloat(totalValue);
  var resultmessage = "Total cost: $" + totalValue;
  document.getElementsByClassName("running-total")[0].innerHTML = resultmessage;

}

label {
  font-weight: bold;
  display: block;
}
form {
  width: 250px;
  border: 1px dotted green;
}

<form name="cost" autocomplete="on">
  <fieldset>
    <label for="size">Choose a Pizza Size:</label>
    <input type="radio" name="size" value="18" checked>Extra Large
    <input type="radio" name="size" value="15">Large
    <input type="radio" name="size" value="10">Medium
    <input type="radio" name="size" value="8">Small
  </fieldset>
  <fieldset>
    <label for="specials">Pizza Special:</label>

  </fieldset>
  <fieldset>
    <label for="extras">Extras:</label>
    <input type="checkbox" name="extras" value="cheese">Cheese
    <input type="checkbox" name="extras" value="pepperoni">Pepperoni
  </fieldset>
  <input type="button" onClick="calculatePrice()" value="Calculate Price!" /> <span class="running-total"></span>
</form>

edited Feb 8, 2017 at 19:27

answered Feb 8, 2017 at 19:12

Snowmonkey

3,7611 gold badge18 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nico Robin Over a year ago

I tried for the past for like an hour and I couldn't get the radio buttons or check boxes to connect. I was getting a Nan value when I tried to get the check boxes to print the value. Thank you so much and this helped a lot.

Snowmonkey Over a year ago

Glad to help. If you need clarification on anything, let me know -- I can edit the snippet accordingly.

Dudeguy21 · Accepted Answer · 2017-02-08 19:02:52Z

0

Your html is incomplete. You don't have the specials or extras columns filled out, and you have some pizza sizes on there twice.

What you'll want to do is have things that you cannot have more than one of as a set of radio buttons (e.g. pizza sizes), and things you can have multiple of as a set of check boxes.

Then, you need to iterate through each checkbox and radio button to see if it's checked, and if it is, add it's value to the total.

It will also make it easier to work with if you add a border to the table and it's children.

I wasn't really able to make much sense of the code you had, so I hope that you find this helpful.

answered Feb 8, 2017 at 19:02

Dudeguy21

379 bronze badges

Collectives™ on Stack Overflow

How to display value using radio buttons in javascript and add it with checkboxes value?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related