You can access the value of the number input using e.target.value.
Here’s an example:
$(function(){
$('input[type=radio]').on('click',function(){
data= $(this).data('price');
$('#result').val(data);
$('#result2').text(data*3);
});
$('#result').on("change", function(e) {
data= e.target.value;
$('#result').val(data);
$('#result2').text(data*3);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="highlight" data-price="1" value="a1">a1
<input type="radio" name="highlight" data-price="2" value="a2">a2
<input type="radio" name="highlight" data-price="3" value="a3">a3
<input type="radio" name="highlight" data-price="4" value="a4">a4
<input type="number" id='result'>
<div id='result2'></div>
$(function(){
$('input[type=radio]').on('click',function(){
data= $(this).data('price');
$('#result').val(data);
$('#result2').text(data*3);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my_form" class="container" oninput="result2.value = parseInt(result.value*3)">
<input type="radio" name="highlight" data-price="1" value="a1">a1
<input type="radio" name="highlight" data-price="2" value="a2">a2
<input type="radio" name="highlight" data-price="3" value="a3">a3
<input type="radio" name="highlight" data-price="4" value="a4">a4
<input type="number" id='result'>
<input type="number" id='result2'>
</form>
I simply add oninput function
I want to do a live calculation, Where output will be printed from the input filed. I have to put data to that specific input field by selected radio button or , manually typing. I have done the live calculation when that input field data was selected from the radio button, But the problem creates when I type manually to the input field. How can I do live calculation both on typing or selecting values?
$(function(){
$('input[type=radio]').on('click',function(){
data= $(this).data('price');
$('#result').val(data);
$('#result2').text(data*3);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="highlight" data-price="1" value="a1">a1
<input type="radio" name="highlight" data-price="2" value="a2">a2
<input type="radio" name="highlight" data-price="3" value="a3">a3
<input type="radio" name="highlight" data-price="4" value="a4">a4
<input type="number" id='result'>
<div id='result2'></div>
