Javascript live calculation from radio buttons

Question

There are some radio buttons

<input type="radio" name="highlight" data-price="25.1" value="a1">a1
<input type="radio" name="highlight" data-price="55.4" value="a2">a2
<input type="radio" name="highlight" data-price="65.3" value="a3">a3
<input type="radio" name="highlight" data-price="95.9" value="a4">a4

I want to print the "data-price" of selected radio button with live changing. How can I make this?

Possible duplicate of [How to use radio on change event?](http://stackoverflow.com/questions/13152927/how-to-use-radio-on-change-event) — Artyom Neustroev, Oct 22 '16 at 22:34
This alert the value. I need to print the data-price to input field value — General Agro, Oct 22 '16 at 22:36

score 0 · Answer 1 · answered Oct 22 '16 at 22:39

I don't know what exactly you are asking.. but if you just want to print the data-price, you can do it this way.

$(function(){
  $('input[type=radio]').on('click',function(){
    data= $(this).data('price');
    $('#result').text(data);
   
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="highlight" data-price="25.1" value="a1">a1
<input type="radio" name="highlight" data-price="55.4" value="a2">a2
<input type="radio" name="highlight" data-price="65.3" value="a3">a3
<input type="radio" name="highlight" data-price="95.9" value="a4">a4

<div id='result'>
</div>

LegenJerry · Answer 2 · 2016-10-22T23:50:38.487

HTML

<input class='radio' type="radio" name="highlight" data-price="25.1" value="a1">a1
<input class='radio' type="radio" name="highlight" data-price="55.4" value="a2">a2
<input class='radio' type="radio" name="highlight" data-price="65.3" value="a3">a3
<input class='radio' type="radio" name="highlight" data-price="95.9" value="a4">a4
<input id="price" type="text">

Javascript (onclick)

var inputs = document.getElementsByClassName('radio');
var textbox = document.getElementById('price');
var i;
for (i = 0; i < inputs.length; i++) {
    inputs[i].onclick = function(){
        textbox.value = this.dataset.price;
    }
}

Javascript (eventListener)

for (i = 0; i < inputs.length; i++) {
    function myFn(){
        textbox.value = this.dataset.price;
    }
    inputs[i].addEventListener("change",myFn);
}

https://jsfiddle.net/2zfjfkhL/

Javascript live calculation from radio buttons

2 Answers2