HTML form:input calculate 2 fields - javascript

I'm using spring mvc for my form which has the tag
<form:input type="number" class="value1" id="value1" path="commandName.object.field1" />
<form:input type="number" class="value1" id="value1" path="commandName.object.field2" />
<input type="text" disabled="disabled" id="result" />
I read some questions in regards to calculations and even found a js fiddle:
http://jsfiddle.net/g7zz6/1125/
how do i calculate 2 input fields and put results in 3rd input field
but it doesn't work when the input tag is form:input. Is it possible to do auto calculation of the 2 form:input fields upon keyin and update the 3rd input?


Here you go
HTML
<input type="text" class="input value1">
<input type="text" class="input value2 ">
<input type="text" disabled="disabled" id="result">
JS
$(document).ready(function(){
$('input[type="text"]').keyup(function () {
var val1 = parseInt($('.value1').val());
var val2 = parseInt($('.value2').val());
var sum = val1+val2;
$("input#result").val(sum);
});
});
Fiddle https://jsfiddle.net/1sbvfzcc/


$(document).ready(function(){
var val1 = +$(".value1").val();
var val2 = +$(".value2").val();
$("#result").val(val1+val2);
});
$('.input').blur(function(){
var val1 = +$(".value1").val();
var val2 = +$(".value2").val();
$("#result").val(val1+val2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="input value1" value="20">
<input type="text" class="input value2" value="30">
<input type="text" disabled="disabled" id="result">
Please check the code this might help you understand why your code is not working.
You are using document ready function which is not able to get the value as no default value for input box.
I have added a new blur function which will calculate the value on change of input box


Try this your form tag syntax was wrong
$('form').on('keyup' ,'.value1', function(){
var k=0;
$('.value1').each(function(){
k +=parseFloat($(this).val()|0);
})
$('input:text').val(k)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="number" class="value1" id="value1" path="commandName.object.field1" />
</form>
<form>
<input type="number" class="value1" id="value1" path="commandName.object.field2" />
</form>
<input type="text" disabled="disabled" id="result" />

Related

Display value in input in html

I have the following code for html:
<label for="">Input</label>
<input type="text" name="" id="input_01" placeholder="Enter some text">
<label for="">Output</label>
<input type="text" name="" id="ouput_01">
<script>
var input_01 = document.getElementById("input_01")
var output_01 = document.getElementById("output_01")
input_01.addEventListener('keyup',function(){
output_01.value = input_01.value
})
</script>
I want to display the input value as the output. However, I found that the command "output_01.value = input_01.value" doesn't work and there is nothing displayed. I do not know why and do not know how to solve this problem. How can I display the content of an input in 'ouput_01'? Thank you.

make sure you don't have typo in your code.
change from
<input type="text" name="" id="ouput_01">
to
<input type="text" name="" id="output_01">

your INPUT tag output ID does not match the one on your javascript DOM and this output_01.value = input_01.value is wrong, instead you should add event to your function parameter in your Event Listener then assign your event.target.value to your output DOM value
<label for="">Input</label>
<input type="text" name="" id="input_01" placeholder="Enter some text">
<label for="">Output</label>
<input type="text" name="" id="output_01">
<script>
var input_01 = document.getElementById("input_01")
var output_01 = document.getElementById("output_01")
input_01.addEventListener('keyup', function(event) {
output_01.value = event.target.value
})
</script>

How to set value of input without locking user input

I have multiple inputs and i want to display result in input and change it freely.
When i type 5 in first input it should display 5 in the second. But how to change the value of second input and display it in the first? I want to be able to constantly change the values.
function calc(){
var val1 = document.getElementById("val1");
let val2 = document.getElementById("value2");
val2.value = 2;
}
<html>
<head>
</head>
<body>
<input id="value1" type="number" value="" oninput="calc()">
<input id="value2" type="number" value="" oninput="calc()">
</body>
</html>

You can pass an additional parameter to your function and change the values as per the parameters.
function calc(num){
var val1 = document.getElementById("value1");
let val2 = document.getElementById("value2");
num ? val1.value = val2.value : val2.value = val1.value;
}
<input id="value1" type="number" value="" oninput="calc(0)">
<input id="value2" type="number" value="" oninput="calc(1)">
I have replaced the if else condition with a ternary operator. I hope that you are familiar with it.

<html>
<head>
</head>
<body>
<input id="value1" type="number" value="" oninput="document.getElementById('value2').value =this.value">
<input id="value2" type="number" value="" oninput="document.getElementById('value1').value =this.value">
</body>
</html>
Use like this

Addition/subtraction to a specific value to user input

Is it possible to have a textbox where the user will input a number and in another textbox, which will automatically add 5 to the value of the first textbox and subtract 5 to the value in the third textbox?
For example:
User input: 10
2nd textbox: 15
3rd textbox: 5
Please help

You can do it like this:
<input type="text" id="input1" onkeyup="setValues(this.value);">
<input type="text" id="input2">
<input type="text" id="input3">
<script type="text/javascript">
function setValues(value){
document.getElementById('input2').value = (parseInt(value)+5);
document.getElementById('input3').value = (parseInt(value)-5);
}
</script>

you can find solution Link.
HTML Part
<input type="number" id="input1">
<input type="number" id="input2">
<input type="number" id="input3">
JS Part
$('#input1').bind('click keyup', function(event) {
$('#input2').val(parseInt(this.value)+5);
$('#input3').val(parseInt(this.value)-5);
})

How to calculate form fields values to update hidden field value?

I want to know how to calculate the input values of the following fields
<input type="text" name="score1" class="auto-sum">
<input type="text" name="score2" class="auto-sum">
<input type="text" name="score3" class="auto-sum">
And update the span text and the hidden field value
TOTAL <span id="amountTotal">0 </span>
<input id="total" type="hidden" name="total" value="">
Thanks in advance

This should do what you want to achieve:
function displaySum () {
var sum = 0;
// iterate over the input fields
$('.auto-sum').each(function () {
var value = $(this).val() || 0;
var number = parseInt(value, 10); // parse the input value to an integer
if (isNaN(number)) {
number = 0;
}
sum += number; // add the value to the sum
});
// set the value of the two elements
$('#amountTotal').text(sum);
$('#total').val(sum);
}
// whenever the value of one of the input fields changes, call the displaySum function
$('.auto-sum').on('change, keyup', displaySum);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="score1" class="auto-sum">
<input type="text" name="score2" class="auto-sum">
<input type="text" name="score3" class="auto-sum">
TOTAL <span id="amountTotal">0 </span>
<input id="total" type="hidden" name="total" value="">

I tried with blur method for after mouseleave from input and check all input values and added ! Then update to wanted element !!
$("input").on("blur",function(){
var total = 0;
$("[type='text']").each(function(){
if($(this).val() != "") {
total += parseInt($(this).val());
}
});
$("#amountTotal").text(total);
$("#total").val(total);
});

Try with query each() function .Use with parseFloat convert the string to number .for real time update do with keyup event
$('.auto-sum').keyup(function(){
var a=0;
$('.auto-sum').each(function(){
a+=parseFloat($(this).val())
})
$('#amountTotal').text(a|0)
$('#total').val(a|0)
console.log($('#total')[0].outerHTML)//its show the hidden field value
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="score1" class="auto-sum" value="2" >
<input type="text" name="score2" class="auto-sum" value="5">
<input type="text" name="score3" class="auto-sum" value="5">
TOTAL <span id="amountTotal" >0 </span>
<input id="total" type="hidden" name="total" value="">

You can use <input type="number" /> inputs to force values entered to be a number.
From there you can call jQuery with the query selector input.auto-sum to get all of the input elements with the class auto-sum
Using the each function you can add the numeric to an accumulator to get the total.
You can then use jQuery with the query selectors needed to set any other elements on the page with the Total value.
function getTotal() {
var total=0;
$('input.auto-sum').each(function(i,e)
{
total += Number($(e).val());
});
$('#amountTotal').text(total);
$('#total').val(total);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Score 1: <input type="number" name="score1" class="auto-sum"><br />
Score 2: <input type="number" name="score2" class="auto-sum"><br />
Score 3: <input type="number" name="score3" class="auto-sum"><br />
TOTAL: <span id="amountTotal">0 </span><br />
<input id="total" type="hidden" name="total" value="">
<input type="button" id="btnTotal" onclick="getTotal()" value="Get Total" />

Please try this one.
$('.auto-sum').on('change',function(){
var totalvalue=0;
$('.auto-sum').each(function(a,b){
totalvalue=totalvalue+parseInt(($(b).val()=='' || isNaN($(b).val()))?0:$(b).val());
});
$('#amountTotal').text(totalvalue);
$('#total').val(totalvalue);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="score1" class="auto-sum">
<input type="text" name="score2" class="auto-sum">
<input type="text" name="score3" class="auto-sum">
TOTAL <span id="amountTotal">0</span>
<input id="total" type="hidden" name="total" value="">

<input type="text" name="score1" class="auto-sum">
<input type="text" name="score2" class="auto-sum">
<input type="text" name="score3" class="auto-sum">
<input type="button" id="calculator" value="Caculate">
$("#calculator").on("click",function (){
var result=0;
var sum_fields=$(".auto-sum");
for(var i=0;i<sum_fields.length;i++){
if(!isNaN(sum_fields[i]) && sum_fields[i]>0){
result += sum_fields[i];
}
}
$("#amountTotal").text(result);
$("#total").val(result);
});
Create array for the fields and loop through them
Check if it not a NaN and more than 0 add them to the result then after the loop attach the result to the hidden field and as a span text

I post this as an answer because the comment areas are to small
At first i think it´s an good idea to write
<input type = "number">
when you don´t want to display the small arrows look at this solution:
https://css-tricks.com/snippets/css/turn-off-number-input-spinners/
the keyup event ist the best way to "live" display the total sum
At last take a look at vue.js
This is the best solution for this scenario.

if you're interested in a pure javascript solution:
All inputs have an oninput event attribute that fires when the input is changed.
You can attach an event handler to the event like so:
<input oninput="updateTotal" />
where updateTotal is a function declared in your script:
function updateTotal { /* code that updates the total */ }
OR if you select the input in your script then you can attach the event handler like this:
selectedInput.oninput = function updateTotal () {
...
}
Here's my implementation that selects all the inputs with the class "auto-sum", assigns the event handler to each of them and updates the code by looping over each input's value attribute:
https://jsfiddle.net/billy_reilly/5dd24v81/2/

function displaySum () {
var sum = 0;
// iterate over the input fields
$('.auto-sum').each(function () {
var value = $(this).val() || 0;
var number = parseInt(value, 10); // parse the input value to an integer
if (isNaN(number)) {
number = 0;
}
sum += number; // add the value to the sum
});
// set the value of the two elements
$('#amountTotal').text(sum);
$('#total').val(sum);
}
// whenever the value of one of the input fields changes, call the displaySum function
$('.auto-sum').on('change, keyup', displaySum);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="score1" class="auto-sum">
<input type="text" name="score2" class="auto-sum">
<input type="text" name="score3" class="auto-sum">
TOTAL <span id="amountTotal">0 </span>
<input id="total" type="hidden" name="total" value="">

How to set sum value on text feild when second value is set text?

This is my demo cord.
<input type="text" id="my_input1" />
<input type="text" id="my_input2" />
<input type="text" id="total" />
<input type="button" value="Add Them Together" onclick="doMath();" />
<script type="text/javascript">
function doMath()
{
// Capture the entered values of two input boxes
var my_input1 = document.getElementById('my_input1').value;
var my_input2 = document.getElementById('my_input2').value;
// Add them together and display
var sum = parseFloat(my_input1) + parseFloat(my_input2);
document.getElementById('total').value=sum;
}
I want to work this function when my_input2 is enter it's value. Just like onclick method for button is there any event to set value to total tetxfeild after key release event?

<script type="text/javascript">
$(document).ready(function () {
$("#my_input2").blur(function () {
var sum = parseInt($("#my_input1").val()) + parseInt($("#my_input2").val());
$("#total").val(sum);
});
});
</script>
<div>
<input type="text" id="my_input1" />
<input type="text" id="my_input2" />
<input type="text" id="total" />
<input type="button" value="Add Them Together" />
</div>
And also u should frame ur question correctly bcz u have added code in button click and asking us it should work after leaving textbox

Put onkeyup() on second input field this will fire your function.
Something like that:
<input type="text" id="my_input2" onkeyup="doMath();" />

try this
<input type="text" id="my_input2" onchange="doMath();" />

Categories

Resources