Radio Button Javascript

Question

I have radiobuttons like below:

Apple
<input type="radio" id="one" name="apple" data-price="10" value="light"/> Light
<input type="radio" id="two" name="apple" data-price="20" value="dark" /> Dark
<input type="text" id="appleqty" name="appleqty" value="" />

Mango
<input type="radio" id="three" name="Mango" data-price="30" value="light"/> Light
<input type="radio" id="one" name="Mango" data-price="40" value="dark" /> Dark
<input type="text" id="Mangoqty" name="Mangoqty" value="" />

Pine Apple
<input type="radio" id="four" name="Pineapple" data-price="50" value="light"/> Light
<input type="radio" id="five" name="Pineapple" data-price="60" value="dark" /> Dark
<input type="text" id="Pineappleqty" name="Pineappleqty" value="" />

Grape
<input type="radio" id="six" name="Grape" data-price="70" value="light"/> Light
<input type="radio" id="seven" name="Grape" data-price="80" value="dark" /> Dark
<input type="text" id="Pineappleqty" name="Pineappleqty" value="" />

The radiobuttons are separated in a Group as (Apple,Mango,Pineapple,Grape). I need to add the Price with the Quantity he needs.

Example:

If a user clicked Dark Apple in the radiobutton with 1 Qty the Price should be 20 and if the user changed the clicked Radio to the Light Apple radiobutton then the price should be 10 - 20(Previous Price If Checked) = 10 . Is this possible using JavaScript?

My code that I have tried:

function upprice(ref)
{
    var elname = ref.getAttribute("name");
    var qtyname = elname+"qty";
    var price = ref.getAttribute("proprice");
    var qty = parseInt(document.getElementById(qtyname).value)
    var newprice = parseInt(price*qty);
    var olprice = parseInt(document.getElementById("orderpagepriceinstant").innerHTML);
    var totalprice = parseInt(olprice+newprice);
    document.getElementById("orderpagepriceinstant").innerHTML = parseInt(totalprice)
}

Kindly Check My Above Question I Have Added My Javascript Code That I Have Tried — Varun Sridharan
– Varun Sridharan, Commented Sep 17, 2012 at 5:49
Note that id is supposed to be unique, but you've used id="one" twice (one of the apple radios and one of the mango radios). — nnnnnn
– nnnnnn, Commented Sep 17, 2012 at 5:55

RobG · Accepted Answer · 2012-09-17 06:20:07Z

2

Your inputs should be something like:

<input type="radio" name="apple" value="10">Light
<input type="radio" name="apple" value="20">Dark
<input type="text" name="appleqty" value="">

You can put a click listener on the radio buttons and a change listener on the quantity to update the price:

<input type="radio" onclick="updatePrice(this)" ...>
<input type="text" onclick="updatePrice(this)" ...>

and the update function is:

function updatePrice(el) {
  var priceEach, quantity, itemValue;

  if (el.type == 'radio') {
    priceEach = getRBValue(el);
    quantity = el.form[el.name + 'qty'].value;

  } else if (el.type == 'text') {
    quantity = el.value;
    priceEach = getRBValue(el.form[el.name.replace(/qty$/,'')]);
  }

  /* 
     code here to validate the value of quantity
  */

  itemValue = quantity * priceEach;


  /* 
     do something with itemValue
  */

  alert(itemValue);
}

// Get the value of a radio button set
function getRBValue(el) {
  var buttons;

  // See if have been passed a button or button set (NodeList)
  if (el.type == 'radio') {
    buttons = el.form[el.name];
  } else if (typeof el.length == 'number') {
    buttons = el;
  }

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

</script>

The markup, you can also add a click listener to the form to do updates rather than on each radio button. You should also have a reset button so the user can clear the form.

<form ... >
    <input type="radio" name="apple" value="10" onclick="updatePrice(this)">Light
    <input type="radio" name="apple" value="20" onclick="updatePrice(this)">Dark
    <input type="text" name="appleqty" value="" onchange="updatePrice(this)">
    <br>
    <input type="reset">
</form>

answered Sep 17, 2012 at 6:20

RobG

148k32 gold badges180 silver badges216 bronze badges

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

4 Comments

Varun Sridharan Over a year ago

Sorry Sir Its Not Working For Me

RobG Over a year ago

It's just an example of an approach, it "works" for me. Can you explain "not working"? Error messages, incorrect value, etc. Note that I didn't use the data-price attribute because radio buttons already have a value attribute that can be used for that purpose. So you might need to change el.value to el.getAttribute('data-price') and so on.

Varun Sridharan Over a year ago

i get this error el.form is null priceEach = getRBValue(el.form[el.name.replace(/qty$/,'')]); el.form is null buttons = el.form[el.name];

RobG Over a year ago

Put the form controls in a form.

Korvin Szanto · Accepted Answer · 2012-09-17 05:45:08Z

1

Here's a quick jQuery example: http://jsfiddle.net/FTscC/

(laptop dying, I'll elaborate when I can tomorrow!)

answered Sep 17, 2012 at 5:45

Korvin Szanto

4,5194 gold badges22 silver badges49 bronze badges

2 Comments

Varun Sridharan Over a year ago

its working but can i get it in pure javascript.. not in jquery

jitendra Over a year ago

You can invoke javascript method using onclick() event for radio button. And, read or modify attribute of elements using getAttribute() or setAttribute().

Collectives™ on Stack Overflow

Radio Button Javascript

Example:

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Example:

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related