Develop Reference

2 textbox that copies each other value while typing, but the other textbox has no comma

I'm currently working with 2 textboxes that copies each other values. But the thing is, my 1st textbox has an autocomma. How could I make my 2nd textbox ignore the comma?
For example. My first textbox value is 1,000 then my 2nd textbox
value should be 1000.
HTML
<input type="text" value="" id="textbox1"/>
<input type="text" value="" id="textbox2"/>
Script
//this function is for my autocomma
function updateTextView(_obj){
var num = getNumber(_obj.val());
if(num==0){
_obj.val('');
}else{
_obj.val(num.toLocaleString());
}
}
function getNumber(_str){
var arr = _str.split('');
var out = new Array();
for(var cnt=0;cnt<arr.length;cnt++){
if(isNaN(arr[cnt])==false){
out.push(arr[cnt]);
}
}
return Number(out.join(''));
}
$(document).ready(function(){
$('#textbox1').on('keyup',function(){
updateTextView($(this));
});
});
//this function copies the textbox1 values to textbox value 2
$("#textbox1").bind('input', function () {
var stt = $(this).val();
$("#textbox2").val(stt);
});

You modify the function updateTextView as below:
function updateTextView(_obj) {
var num = getNumber(_obj.val());
if (num == 0) {
_obj.val('');
$("#textbox2").val('');
} else {
$("#textbox2").val(num);
_obj.val(num.toLocaleString());
}
}
And then remove the following:
$("#textbox1").bind('input', function () {
var stt = $(this).val();
$("#textbox2").val(stt);
});

In plain JS:
Try the onkeyup() event added to the first textbox. Then replace all commas in the value of the first box with nothing using value.replace(/,/g, ""). And then copy the value of the first input
function update(input) {
var value = input.value.replace(/,/g, "");
document.getElementById("second-textbox").value = value;
}
<input onkeyup="(update(this))" />
<input id="second-textbox" />
to the second.

How to retain value after page refresh?

I managed to get the number go up after pressing each button, but I need the value to stay after refreshing the page. I understand I could use localStorage, but I do not understand how it works.
<form>
<input type="text" id="number" value="0" />
<input type="button" onclick="incrementValue10()" value="$10" />
<input type="button" onclick="incrementValue20()" value="$20" />
<input type="button" onclick="incrementValue50()" value="$50" />
</form>
function incrementValue10() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value += 10;
document.getElementById('number').value = value;
}
function incrementValue20() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value += 20;
document.getElementById('number').value = value;
}
function incrementValue50() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value += 50;
document.getElementById('number').value = value;
}

To use localStorage you simply need to call setItem() to save a value and getItem to retrieve it.
It's also worth noting that you should not be using onX attributes. They are bad practice. Use unobtrusive event handlers instead. Also, you can easily DRY the code up by attaching a single function to all elements and varying its action by a data attribute on each one. Something like this:
let output = document.querySelector('#number');
// save the value on click of the button
document.querySelectorAll('.inc').forEach((el) => {
el.addEventListener('click', function() {
var newValue = parseFloat(output.value) + parseFloat(this.dataset.inc);
output.value = newValue;
localStorage.setItem('number', newValue);
});
});
// retrieve the value when the page loads
var oldValue = localStorage.getItem('number') || 0;
output.value = oldValue;
<form>
<input type="text" id="number" value="0" />
<input type="button" class="inc" data-inc="10" value="$10" />
<input type="button" class="inc" data-inc="20" value="$20" />
<input type="button" class="inc" data-inc="50" value="$50" />
</form>
Note that SO snippets block access to localStorage, so here's a fully working jsFiddle

You can use localstorage for this:
if(localStorage.getItem('number') != ""){
document.getElementById('number').value = localStorage.getItem('number');
}
function incrementValue10()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value+=10;
document.getElementById('number').value = value;
localStorage.setItem('number', document.getElementById('number').value)
}
function incrementValue20()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value+=20;
document.getElementById('number').value = value;
localStorage.setItem('number', document.getElementById('number').value)
}
function incrementValue50()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value+=50;
document.getElementById('number').value = value;
localStorage.setItem('number', document.getElementById('number').value)
}

As per the code, you are just storing the values in memory(heap). When page is re-loaded browser just allocates new memory and you can't retain the previous values. So store the values in some persistence like client side(localstorage, sssionstorage and Index DB) if it is entirely related to the particular client's UI state, servr side Databases like SQL, NoSQL, RDBMS.
Refer this link for basic understanding of client side storage.
https://www.w3schools.com/html/html5_webstorage.asp

I cant change value of Input

I want to create Javascript simple calculator, I want to change <input> tag's value on click, I used this
document.getElementById('input').value = "1"
But it types once 1 so I can't type 11 or 111. What is problem? Can you help me?

I don't know if that's the correct answer as OP's code wasn't provided...
var el = document.getElementById('input');
el.value = 1;
var button = document.getElementById('button')
button.onclick = function() {
el.value = parseInt(el.value) + 1;
}
<input id="input" type="text" name="name" value="">
<button id="button">Add 1!</button>
On button click, the function will retrieve the value from the input box, convert it to integer and then add 1.
If that's not the answer you were looking for, let me know.
EDIT: Just to clarify.
I have used parseInt() to convert to integer. This way if el.value = 1
The result will be 2. However if I don't use parseInt() I would get a concatenation instead of an operation and el.value + 1 would do 11, el.value being a string.

First you have to get the value of that field as
var val = document.getElementById('input').value;
Then Add a value and show in it as
document.getElementById('input').value = val + 1;
Here is a complete Running code:
function function_name (argument) {
var val = document.getElementById('input').value;
document.getElementById('input').value = val + 1;
}
<input id="input" type="text" name="name" value="">
<button id="button" onclick="function_name()">Press 1!</button>

How to create a validation on textbox?

I have 3 textboxes, I want to create a validation in textbox. For Example textbox1 value is 10, then textbox2.1stquarter value is 5, textbox3.2ndquarter should have atleast 5 or lower than 5. If the combine value of textbox2 and textbox3 is equal to 10 allow it but if the combine value of textbox2 and textbox3 is greater than 10 should not allow it. How to do it?
Just like this code. I want to get the value of textbox1so the two other textbox should have >10
function CompareValues() {
var textBox1=document.GetElementById('ID_OF_TextBox1');
var textBox2=document.GetElementById('ID_OF_TextBox2');
var textBox3=document.GetElementById('ID_OF_TextBox3');
if ( textBox1.value>textBox2.value + textBox3.value ) {
the value is greater than textbox1
}
}

Seriously you could have done it by yourself mate... Check if the below fiddle helps u... :)
var textBox1=document.getElementById('textbox1').value;
var textBox2=document.getElementById('textbox2').value;
var textBox3=document.getElementById('textbox3').value;
if((+textBox2 + +textBox3) >= 10){
$('#textbox1').val('');
$('#textbox2').val('');
$('#textbox3').val('');
return false;
}else{
alert('value ok');
}
http://jsfiddle.net/B5cKr/

HTML:
<input id="txt1" type="text" />
<input id="txt2" type="text" />
<input id="txt3" type="text" />
<DIV id="btnValid">CLICK</DIV>
JS:
$("#btnValid").on('click', function () {
var txt1 = $("#txt1").val();
var txt2 = $("#txt2").val();
var txt3 = $("#txt3").val();
var combine_2_3 = Number(txt2) + Number(txt3);
if (Number(txt1) > Number(txt2) || Number(txt1) > Number(txt3)) {
if (Number(txt1) > Number(combine_2_3)) {
alert("txt1 value is greater then combine value ");
}
else {
alert("combine value txt2, txt3 is greater then txt1");
$("#txt1").val("");
$("#txt2").val("");
$("#txt3").val("");
}
}
});
DEMO
Updated DEMO

not changing textbox value from ui and unable to display

taking value in 1st textbox and want to display it in 2nd..
1st <input type="text" value=" " id = "marks1" name = "marks1" onblur = "myFunction('marks1')" />
2nd <input type="text" value=" " id = "marks2" name = "marks1" disabled = "disabled" />
and on oblur I am calling a function. Whenever I change the value from UI, on function call I am getting the old value i.e. ' ' instead of changed value.
in the variable "value" the old value which i am getting, i am unable to display it on 2nd textbox.
function myFunction( txtname )
{
alert("call");
var txtobj = document.getElementsByName(txtname);
var value = txtobj[0].value;
alert("my value : "+value);
txtobj[1].value = value;
}
I know the code is okay, but it is not working at me. Is there any other way?

Works for me:
function myFunction(element)
{
var txtobj = document.getElementsByName(element);
var value = txtobj[0].value;
txtobj[1].value = value;
}​
http://jsfiddle.net/pwTwB/1/
Are you getting an error?

Try it this way:
function myFunction( txtname )
{
var txtobj = document.getElementById(txtname);
var target = document.getElementById("marks2");
target.value = txtobj.value;
}

Here is a simple way to set the next textbox's value.
function moveText(ele){
document.getElementById("marks2").value = ele.value;
}
Then use the following in your html markup
<input type="text" id="marks1" onblur="moveText(this)" />
<input type="text" id="marks2" disabled="disabled" />