How to set value of input without locking user input - javascript

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

Related

How to display the value in a read only field which is returned from the function

I have 3 input fields. when i mouse out from 3rd input field, sum of 3 input field values should be populated in 4th input field (kept in read only). How to do this using html and javascript?
You can use onmouseout event to get the sum of all three fields. First create a method getSum and use it in onmouseout to execute.
function getSum(){
//Fetch value from all input fields
let first = document.getElementById('field1').value;
let second = document.getElementById('field2').value;
let third = document.getElementById('field3').value;
let fourth = document.getElementById('field4');
//Calculate the sum
let sum = Number(first)+Number(second)+Number(third);
//Assign the sum to the fourth field
field4.value = sum;
}
<!DOCTYPE html>
<html>
<body>
<h3>Enter Number:</h3>
<label>First:</label>
<br>
<input type="number" id="field1">
<br>
<label>Second:</label>
<br>
<input type="number" id="field2">
<br>
<label>Third:</label>
<br>
<input type="number" id="field3" onmouseout="getSum()">
<br>
<label>Sum:</label>
<br>
<input type="number" id="field4" disabled>
</body>
</html>
You could use the onmouseout event to call a javascript function that populates the 4th field.
For more info see here: https://www.w3schools.com/jsref/event_onmouseout.asp
function mouseEvt(scope){
let in1 =parseInt( document.querySelector('input[name=in1]').value);
let in2 =parseInt( document.querySelector('input[name=in2]').value);
let in3 =parseInt( document.querySelector('input[name=in3]').value);
document.querySelector('input[name=in4]').value=in1+in2+in3;
}
<input type="text" name="in1" readonly value="1"/>
<input type="text" name="in2" readonly value="1"/>
<input type="text" onmouseout="mouseEvt(this)" name="in3" readonly value="1"/>
<input type="text" name="in4" readonly/>

How to set min and max data for child elements

Hello I can't set min and maximum value from database.
Actually I want to make dynamic it through PHP. In the back-end there should be two fields first minimum and second one with maximum. In maximum field, I can set maximum and in minimum field I can set, and call it through PHP in my coding.
Is that something can we do? here's coding.
<html>
<body>
<head>
</head>
<?php
echo '
<script>
$(document).on("change", ".qty1", function() {
var sum = 0;
$(".qty1").each(function(){
sum += +$(this).val();
});
$(".total").val(sum);
});
</script>';
$maxnum = 7;
if(num > $maxnum){
echo "<script>alert('Yes it is big');</script>";
}
?>
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="qty1" value="" />
<input type="text" class="total" value="" />
</body></html>
how can I use php with jquery or should I change my coding. I don't know how I can change my coding is there any idea please?
you could put all values into an array and then get the min/max
$(document).on("change", ".qty1", function() {
var arr = [];
var sum = 0;
$(".qty1").each(function(){
arr.push($(this).val());
sum += +$(this).val();
});
$(".total").val(sum);
$("#min").val(Math.min.apply(Math, arr));
$("#max").val(Math.max.apply(Math, arr));
});
Working fiddle https://jsfiddle.net/w47fLjcu/

HTML form:input calculate 2 fields

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" />

How can I change one input field in the same amount I change another input field?

If I change the value of b then I would like change a in the same amount.
That means:
If a is 300 and b is 500 then if I change a to 400 then b should be 600. And if I change a to 200 then b should be 400.
Simple, but I do not know how to do it.
$(".a").change(function(){
$(".b").val($(".b").val() +- val($(".a"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" class="a" step="100" value="100">
<input type="number" class="b" value="500">
Try this, use field to hold old value:
<input type="text" type="number" class="a" step="100" value="100">
<input type="text" type="number" class="b" value="500">
<input type="hidden" id="storeValue" value="100"/>
<script>
$(".a").change(function(){
var oldValue=parseInt(jQuery("#storeValue").val());
$(".b").val(parseInt($(".b").val()) + (parseInt($(".a").val())-oldValue));
jQuery("#storeValue").val($(".a").val());
});
</script>
try this
$(".a").change(function(){
var diff = ($('.a').val())-($('.ah').val());
var newval1 = Number($(".b").val())+Number(diff);
$(".b").val(newval1);
$('.ah').val($('.a').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" class="a" step="100" value="100">
<input type='hidden' class="ah" step="100" value="100">
<input type="number" class="b" value="500">
If you move the problem away from jQuery, try something like this:
var a = 200;
var b = 400;
var difference = 0;
function changeA(newValue) {
difference = a - newValue;
a = newValue;
b -= difference
}
changeA(300);
console.log(a);
console.log(b);
Update: Was broken, fixed. Run it in the console. This isn't a fix for the jQuery version of your code, it's to highlight a simply version of the issue so you can grow as a developer.

HTML display result in text (input) field?

I have a simple HTML form, with 3 input field, when you hit = button, it suppose to add 2 numbers that you typed in the first 2 input fields and display result in 3rd filed. Is it possible to do that? (I need result in a box (or table) or some thing rather than in plain text). I try the following but doesn't work (it does nothing), can somebody help me?
<HTML>
<HEAD>
<TITLE>Sum</TITLE>
<script type="text/javascript">
function sum()
{
var num1 = document.myform.number1.value;
var num2 = document.myform.number2.value;
var sum = parseInt(num1) + parseInt(num2);
document.getElementById('add').innerHTML = sum;
}
</script>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="number1" VALUE=""> +
<INPUT TYPE="text" NAME="number2" VALUE="">
<INPUT TYPE="button" NAME="button" Value="=" onClick="sum()">
<INPUT TYPE="text" ID="add" NAME="result" VALUE="">
</FORM>
</BODY>
</HTML>
innerHTML sets the text (including html elements) inside an element. Normally we use it for elements like div, span etc to insert other html elements inside it.
For your case you want to set the value of an input element. So you should use the value attribute.
Change innerHTML to value
document.getElementById('add').value = sum;
<HTML>
<HEAD>
<TITLE>Sum</TITLE>
<script type="text/javascript">
function sum()
{
var num1 = document.myform.number1.value;
var num2 = document.myform.number2.value;
var sum = parseInt(num1) + parseInt(num2);
document.getElementById('add').value = sum;
}
</script>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="number1" VALUE=""/> +
<INPUT TYPE="text" NAME="number2" VALUE=""/>
<INPUT TYPE="button" NAME="button" Value="=" onClick="sum()"/>
<INPUT TYPE="text" ID="add" NAME="result" VALUE=""/>
</FORM>
</BODY>
</HTML>
This should work properly.
1. use .value instead of "innerHTML" when setting the 3rd field (input field)
2. Close the input tags
Do you really want the result to come up in an input box? If not, consider a table with borders set to other than transparent and use
document.getElementById('sum').innerHTML = sum;
With .value and INPUT tag
<HTML>
<HEAD>
<TITLE>Sum</TITLE>
<script type="text/javascript">
function sum()
{
var num1 = document.myform.number1.value;
var num2 = document.myform.number2.value;
var sum = parseInt(num1) + parseInt(num2);
document.getElementById('add').value = sum;
}
</script>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="number1" VALUE=""/> +
<INPUT TYPE="text" NAME="number2" VALUE=""/>
<INPUT TYPE="button" NAME="button" Value="=" onClick="sum()"/>
<INPUT TYPE="text" ID="add" NAME="result" VALUE=""/>
</FORM>
</BODY>
</HTML>
with innerHTML and DIV
<HTML>
<HEAD>
<TITLE>Sum</TITLE>
<script type="text/javascript">
function sum()
{
var num1 = document.myform.number1.value;
var num2 = document.myform.number2.value;
var sum = parseInt(num1) + parseInt(num2);
document.getElementById('add').innerHTML = sum;
}
</script>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="number1" VALUE=""/> +
<INPUT TYPE="text" NAME="number2" VALUE=""/>
<INPUT TYPE="button" NAME="button" Value="=" onClick="sum()"/>
<DIV ID="add"></DIV>
</FORM>
</BODY>
</HTML>

Categories

Resources