Copy value from input 1 to input 2 onclick

Question

Looking for a script that copies input value 1 to input 2 on button click and add +1 to sets text box.

b = document.getElementById('tussenstand').value;
var theTotal1 = b;

$(document).on("click", "#button1", function(){
    theTotal1 = Number(theTotal2) 
    $('#eindstand').val(theTotal2);        
});
$('#eindstand').val(theTotal2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="tussenstand"></input>
<input id="eindstand"></input>
<input id="sets"></input>

<button id="button1">click</button>

Thanks in advance.

Where is `theTotal2` being set? What exactly are you trying to achieve. Even given your code it's not clear at all. — Rory McCrossan, Apr 14 '15 at 14:44
@RoryMcCrossan im trying to copy the value from input 1 to input 2 and to get the script adding +1 to a value in input 3 on button click — Joran Dob, Apr 14 '15 at 14:50
where do you want to add +1? to the input 1 or just need +1 text as value of sets textbox? — Shaunak Shukla, Apr 14 '15 at 14:52

score 4 · Accepted Answer · answered Apr 14 '15 at 14:48

4

I think this will do it.

$(document).on("click", "#button1", function(){
    var total = document.getElementById('tussenstand').value;
    $('#eindstand').val(total);    
    var sets = parseInt($('#sets').val()); 
    $('#sets').val( (sets || 0) + 1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="tussenstand"></input>
<input id="eindstand"></input>
<input id="sets"></input>

<button id="button1" onclick="">click</button>

answered Apr 14 '15 at 14:48

KJ Price

5,774
3
21
34

`$(document).on("click", "#button1", ...` should be `$("#button1").on("click", ...` – Domino Apr 14 '15 at 14:55
1

Not necessarily @JacqueGoupil. `$("#button1").on("click"...` binds directly to the button element while `$(document).on("click", "#button1",` binds to the `document` and *delegates* the click event to the button. Ultimately the do the same thing just in different ways. – KJ Price Apr 14 '15 at 14:58
Oh, right. I haven't done JQuery in a while, I find it too slow. Just read more about event delegation, I see how it can sometimes be useful. In this case though, I don't see the point, and it might just slow down execution. – Domino Apr 14 '15 at 15:04
I think that's a valid argument but is not always true. This selected answer here provides some great points about [delegation vs direct binding](http://stackoverflow.com/questions/8827430/event-delegation-vs-direct-binding-when-adding-complex-elements-to-a-page) – KJ Price Apr 14 '15 at 15:11

Shaunak Shukla · Answer 2 · 2015-04-14T14:57:39.757

1

$('#button1').click(function(){
    $('#eindstand').val($('#tussenstand').val());
    $('#sets').val(Number($('#sets').val())+1);    
});

check here : jsfiddle

Edited as you commented

edited Apr 14 '15 at 14:57

answered Apr 14 '15 at 14:49

Shaunak Shukla

2,347
2
18
29

Hi @shaunak shukla thanks but i need to start the input 3 from 1 and than onclick add 1. – Joran Dob Apr 14 '15 at 14:52
@JoranDob, Now check my answer, It's having less code and It's working – Shaunak Shukla Apr 14 '15 at 14:58

Domino · Answer 3 · 2015-04-14T17:31:16.397

Look at the JQuery API Documentation for the .on() method. The function doesn't take the target as a parameter, but as the caller object! EDIT: well, it would actually still work the other way around, but that makes event delegation. Only do that if you know what you're doing. I prefer changing this:

$(document).on("click", "#button1", function(){ ... });

into this:

$("#button1").on("click", function() { ... });

Which in vanilla JS would be:

document.getElementById("button1").addEventListener("click", function() { ... });

Next, you shouldn't need to define variables outside of your function, and naming variables with numbers in them is a bad practice. Try to make the names as clear as possible.

Now that this is clear, here's how I'd write it:

$("#button1").on("click", function() {
    $("#eindstand").val($("#tussenstand").val());
    $("#sets").val(parseInt($("#sets").val())+1);    
});

score 1 · Answer 4 · answered Apr 14 '15 at 15:25

The code below should work. There are several issues that will help you in the future. In the HTML the function that is triggered via the onclick will interfere with the jQuery onclick. You may want to remove it.

onclick="bereken();

The way that you have your code the b variable is not declared.

b=document.getElementById('tussenstand').value;

The way that the jQuery onclick is written should have a narrower scope (not the document). The way that it is now every time you click any were in the document it fires. I changed this:

$(document).on("click", "#button1", function(){

to this:

$("#button1").on("click", function() {

The full edited code is here.

var count = 0;
$("#button1").on("click", function(){    

    if ( typeof b === 'number') {
        count++;

        $("#eindstand").val(b);
        $("#sets").val(count);
    }    
});

score 0 · Answer 5 · answered Apr 14 '15 at 14:56

To achieve that use:

$(function() { //on DOM ready
  
  $('#button1').click(function(){ //Attach event
    
    //Get value safe - can use parseFloat() too:
    val1 = parseInt($('#tussenstand').val());
    val2 = parseInt($('#eindstand').val());
    sets = parseInt($('#sets').val());
    
    //Make sure we are using integers:
    if (isNaN(val1) || isNaN(val2) || isNaN(sets)) return;
    
   //Add
    $('#eindstand').val(val1 + val2);
    
    //Increment:
    $('#sets').val(sets+1);
  
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="tussenstand"  type='number' />
<input id="eindstand" value='0' type='number' />
<input id="sets" value='0' type='number' />

<button id="button1">click</button>

Copy value from input 1 to input 2 onclick

5 Answers5