CODEWITHSUNDEEP
javascripthtmlradio-button
user2988501
user2988501

Reputation: 107

Printing radio button numeric values to a text box

I was just wondering how do Print the selected radio value to the text box dynamically, so that the value in the text box matches the value of the corresponding selected radio button, using javascript? Any help is greatly appreciated, I'm just starting out with javascript and am finding it tough!

p.s. I am only familiar with javascript so sorry to the people who helpfully posted JQuery solutions! I do appreciate it!

HTML Code:

<h2>Configuration</h2>
<div>
<input type ="radio" id="gtmanual" name="car" value="277790.00" checked="checked" >
<label for ="gtmanual">GT Manual -  &euro; 27,7790.00 </label>
<br>
<input type ="radio" id="gtauto" name="car" value="28,500.00" >
<label for ="gtauto">GT Automatic -  &euro; 28,500.00 </label>
<br>
<input type ="radio" id="gtsmanual" name="car" value="32,450.00">
<label for ="gtsmanual">GT-S Manual -  &euro; 32,450.00 </label>
<br>
<input type ="radio" id="gtmanual" name="car" value="33,155.00">
<label for ="gtsauto">GT-S Auto -  &euro; 33,155.00 </label>
 <br>
<div class="col-sm-4">
<input type="text" id="total" readonly>
</div>
</div>

And here is the javascript code:

var total=0
var carcost=0

gtmanual=document.getElementById("gtmanual")
gtmanual=document.getElementListner("click" calculateCar, false);

window.onload=function calculateCar() {
var mycar=document.getElementByName("car");
 for (var i=0; i<mycar.length; i++)
 {
         if (mycar[i].checked) {
             carcost = parseFloat(mycar[i].value);
             break;
          }
          var total+= total+carcost=0;
     }

 document.getElementById("total").value=total;


}

Upvotes: 0

Views: 1806

Answers (4)

sharif2008
sharif2008

Reputation: 2798

you can do by this simple JS-

example : click here

var rad = document.getElementsByName('car');
var value = null;
for(var i = 0; i < rad.length; i++) {
    rad[i].onclick = function() {
    value=document.querySelector('input[name="car"]:checked').value;
    document.getElementById('total').value=value ; 
  };
}

Upvotes: 1

King-of-IT
King-of-IT

Reputation: 578

try this code.this is in javascript as per your requirement 

   <html>
<head>
</head>
<script>
function getvalue(temp)
{
document.getElementById("total").value=temp.value;
}
</script>
<h2>Configuration</h2>
<div>
<input type ="radio" id="gtmanual"  name="car" value="277790.00" onclick="getvalue(this)">
<label for ="gtmanual">GT Manual -  &euro; 27,7790.00 </label>
<br>
<input type ="radio" id="gtauto"  name="car" value="28,500.00" onclick="getvalue(this)">
<label for ="gtauto">GT Automatic -  &euro; 28,500.00 </label>
<br>
<input type ="radio" id="gtsmanual"  name="car" value="32,450.00" onclick="getvalue(this)">
<label for ="gtsmanual">GT-S Manual -  &euro; 32,450.00 </label>
<br>
<input type ="radio" id="gtmanual"  name="car" value="33,155.00" onclick="getvalue(this)">
<label for ="gtsauto">GT-S Auto -  &euro; 33,155.00 </label>
 <br>
<div class="col-sm-4">
<input type="text" id="total" readonly>
</div>
</div>

Upvotes: 3

Vrutin Rathod
Vrutin Rathod

Reputation: 900

I have created what you wanted but its done with jQuery:

Link to the full working demo - http://jsfiddle.net/b7YNp/

jQuery:

$('input[name="car"]').change(function(){
    $('#total').val($('input[name="car"]:checked').val());
});

Upvotes: 3

Mayank Tripathi
Mayank Tripathi

Reputation: 1352

Here is your solution: http://jsfiddle.net/webcarvers/DU2AZ/

JS

$(document).ready(function(){
$("#total").attr("value", $("input:radio[name='car']:checked").val());
$("input").on('click', function(){
$("#total").attr("value", $("input:radio[name='car']:checked").val());
});
});

Upvotes: 1

Related Questions