Develop Reference

Using buttons on number input will not update the first input

So I'm trying to make the first input = the same as the second input on change, the arrows accomplish this, but the buttons which also change the second input doesn't pass on the value to the first input
working jsfiddle - https://jsfiddle.net/ryoLvedx/1/
function passonvalue(value) {
return (value);
}
$('[name="quantity2"]').on('change', function() {
value = $(this).val();
$('[name="quantity"]').val(passonvalue(value));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="QuantitySelector__CurrentQuantity" pattern="[0-9]*" name="quantity" value="1">
<input type="button" class="QuantitySelector__Button Link Link--secondary second-quantity" value="-" onclick="this.parentNode.querySelector('input[type=number]').stepDown()" />
<input class="quantity" min="10" step="10" name="quantity2" value="10" type="number" />
<input type="button" class="QuantitySelector__Button Link Link--secondary second-quantity" value="+" onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus"/>

Compare two variables with generated numbers

Currently I learn the curve of PHP and for first time trying to make AJAX request to my PHP script. I got cart in my own written shop for learning purposes, it generates button and input field with same "data-id" attributes for each position. And of course, input field got "value" attribute with current amount of products.
Code:
Jquery:
$(document).ready(function() {
$(".btn").click(function () {
var id = $(this).attr("data-id");
var idInput = $(".field").attr("data-id");
var value = $(".field").attr("value");
if (id === idInput) {
$.post("/cart/addAjax/" + id, {}, function (data) {
$("#cart-count").html(data);
});
$.post("/cart/addAjax/" + value, {});
return false;
} else {}
});
});
Example of input of PHP generated HTML:
<input class="field" data-id="3" type="number" value="23">
<button class="btn" data-id="3">Quantity</button>
<input class="field" data-id="14" type="number" value="3">
<button class="btn" data-id="14">Quantity</button>
<input class="field" data-id="17" type="number" value="2">
<button class="btn" data-id="17">Quantity</button>
<input class="field" data-id="18" type="number" value="8">
<button class="btn" data-id="18">Quantity</button>
<input class="field" data-id="19" type="number" value="10">
<button class="btn" data-id="19">Quantity</button>
I want Jquery script to compare input/button "data-id" attributes and send "value" of selected "data-id" attribute request to PHP side, but don't know how to tell script get "value" from selected "data-id", guess its the reason why its POST successfully only for first generated product in cart, for the rest products script doesn't work. Can someone enlighten me how to achieve this? Thanks in advice.

You need to structor your html a little better.
I made some changes to the html and put each btn and field under a div.
This will make things easer to find the selected input by its btn click.
Read the comment to understand.
$(document).ready(function() {
$(".btn").click(function () {
var id = $(this).attr("data-id");
// now go to the selected btn Parent, and then find the .field
// there you are sure its the right field becouse both the button
// and the field is containe under one div{Parent}
var idInput = $(this).parent().find(".field")
console.clear();
console.log("you Selected id " +id + " and its value is " + idInput.val())
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input class="field" data-id="3" type="number" value="23">
<button class="btn" data-id="3">Quantity</button>
</div>
<div>
<input class="field" data-id="14" type="number" value="3">
<button class="btn" data-id="14">Quantity</button>
</div>
<div>
<input class="field" data-id="17" type="number" value="2">
<button class="btn" data-id="17">Quantity</button>
</div>
<div>
<input class="field" data-id="18" type="number" value="8">
<button class="btn" data-id="18">Quantity</button>
<div>
<input class="field" data-id="19" type="number" value="10">
<button class="btn" data-id="19">Quantity</button>
</div>

$('button').on('click',function(){
var data = $(this).data('id');
var url = 'your php file';
$.post(url,data,function(rdata){
//do whatever yo want with returned data
});
});

is there a Validator to check if operator is already used or not?

I'm trying to find a validator in JS to check if a operator has been used or not ( we're making a simple calculator)so I tried to make a Function checkOperator(), But it was a dead-end and when I used it, it doesnt do anything.
function checkOperator(){
var operation = document.getElementsByClassName("operator");
var string = document.getElementsByName('show');
var lastChar = string.charAt(string.length-1);
if(lastChar === operation){
var restring =string.replace(operation,operation);
return restring;
}
}
<div id="cursor" class="rekenmachine">
<form name="rekenmachine">
<div>
<input id="cursor" type="text" name="show" value="">
<input id="cursor" type="button" name="Clear" value="C" onclick="rekenmachine.show.value =''">
</div>
<div class="input">
<input id="cursor" type="button" value="7" onclick="rekenmachine.show.value +='7'">
<input id="cursor" type="button" value="8" onclick="rekenmachine.show.value +='8'">
<input id="cursor" type="button" value="9" onclick="rekenmachine.show.value +='9'">
<input id="cursor" type="button" class="operator" value="/" onclick="rekenmachine.show.value +='/'">
</div>
</form>
</div>
I expected to only be able to Put one operator, since Eval can't calculate the string if there are multiple operators next to each other.

Main problem in your code is that you need to use value (and [0]) to access the actual text of (the first) element of getElementsByName or getElementsByClassName. See How do I get the value of text input field using JavaScript? .
(I recommend to use an id and getElementById() to get a unique element and avoid having to use [0])
Also, it's a bad idea in my opinion to use "string" as an identifier.
function checkOperator(){
var elementShow = document.getElementsByName('show')[0];
var text = elementShow.value;
var lastChar = text.charAt(text.length-1);
if(lastChar !== '/'){
elementShow.value = text + '/'
}
}
<div id="cursor" class="rekenmachine">
<form name="rekenmachine">
<div>
<input id="cursor" type="text" name="show" value="">
<input id="cursor" type="button" name="Clear" value="C" onclick="rekenmachine.show.value =''">
</div>
<div class="input">
<input id="cursor" type="button" value="7" onclick="rekenmachine.show.value +='7'">
<input id="cursor" type="button" value="8" onclick="rekenmachine.show.value +='8'">
<input id="cursor" type="button" value="9" onclick="rekenmachine.show.value +='9'">
<input id="cursor" type="button" class="operator" value="/" onclick="checkOperator()">
</div>
</form>
</div>
Remark :
I simplified the logic by explicitly using '/' here.
You can get the operator using document.getElementsByClassName("operator")[0].value; however if you have several operators the logic will be a bit more complicated than that. (since you don't just want to test for repetitions of the same operators, you cannot have +-/ the same as you can't have //.
But that would be something for another question ;)

function checkOperator(){
var operation = document.getElementsByClassName("operator");
var string = document.getElementsByName('show')[0].value;
console.log(string);
if(string.indexOf('/') > -1){
// here you can do what you want
alert('yes');
}else{
alert('no');
}
}
$(document).ready(function(){
$(document).click(function(){
checkOperator();
});
});

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

Why my adding of two numbers does not work?

I managed to resolve this issue with a different method but i still don't understand why this method didn't work in the first place, i am probably missing something:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
*{padding: 10px}
</style>
</head>
<body>
<script type="text/javascript">
function adding(){
var addnum1=parseInt(num1);
var addnum2=parseInt(num2);
var result=addnum1 + addnum2;
sum.value=result;
}
</script>
<input type="text" name="num1"><br>
<input type="button" value="+" disabled="true"><br>
<input type="text" name="num2"><br>
<input type="button" value="=" onclick="adding()"><br>
<input type="text" name="sum">
</body>
</html>

Here is a example of a jsfiddle that you can use to learn better.
https://jsfiddle.net/pxpmp45v/2/
JavaScript:
function adding(){
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
var addnum1=parseInt(num1);
var addnum2=parseInt(num2);
var result= addnum1 + addnum2;
var sum = document.getElementById('sum');
sum.value=result;
}
Your HTML:
<input type="text" id="num1"><br>
<input type="button" value="+" disabled="true"><br>
<input type="text" id="num2"><br>
<input type="button" value="=" onclick="adding()"><br>
<input type="text" id="sum">
Few things to note while retrieving value and assigning to a textbox:
You must use getElementById method and assign a id attribute to your element.
<input type="text" id="num1">
You must also retrieve the value of that element in your JavaScript otherwise you will get a NaN. Use this document.getElementById('num2').value instead of document.getElementById('num2')
Debugging help: Try console.log which prints your variables to your browsers console thus helping you identify what is wrong.

While I have seen people accessing the values of inputs directly as global variables it not recommended. I would suggest using getElementsByName to access the values.
function adding(){
document.getElementsByName("sum")[0].value =
parseFloat(document.getElementsByName("num1")[0].value) +
parseFloat(document.getElementsByName("num2")[0].value);
}
<input type="text" name="num1"><br>
<input type="button" value="+" disabled="true"><br>
<input type="text" name="num2"><br>
<input type="button" value="=" onclick="adding()"><br>
<input type="text" name="sum">

num1, num2, and sum aren't declared in your javascript.
You could give them IDs like
<input type="text" id="num1">
<input type="text" id="num2">
<input type="text" id="sum">
And then access them with document.getElementById()
function adding(){
var addnum1 = parseInt(document.getElementById('num1').value);
var addnum2 = parseInt(document.getElementById('num2').value);
var result = addnum1 + addnum2;
document.getElementById('sum').value = result;
}