Increment value of textbox on button click with different ids

Question

This is my code and in it I am using two <textbox> and two <button> tags. The goal is that I want to increment the value in a <textbox> after clicking on its respective buttons:

<!DOCTYPE html>
<html>
<head>
    <title> My first increment </title>
</head>
<body>

    <input type="text" name="TextBox" id="TextBox1" value="0" />
    <input type="Button" id='AddButton1' value="+" />

    <input type="text" name="TextBox" id="TextBox2" value="0" />
    <input type="Button" id='AddButton2' value="+" />


    <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script>
        $(document).ready(function(){
            var i = 1;
            $('#AddButton'+i).click( function() {
                var counter = $('#TextBox'+i).val();
                counter++ ;
                $('#TextBox'+i).val(counter);               
            });
            i++;
        });
    </script>
</body>

My problem is that I am not able to increment the value in a loop.

For a single <textbox> the inner value is being incremented, but when I use i++ the behavior is not repeated.

Let me see if i understand correctly. you want to click on Button 1 and do increment on first textbox? then click on second button and do it for second textbox? why u go through this approach then? — Masoud Andalibi
– Masoud Andalibi, Commented Sep 2, 2017 at 7:35
I gave an answer, but wanted to point out that the version of jQuery you're using is SUPER old. Try upgrading for a better experience. — Brian Gottier
– Brian Gottier, Commented Sep 2, 2017 at 7:48

Brian Gottier · Accepted Answer · 2017-09-02 07:46:42Z

The thing is, you're not really doing anything to find the Id. You can't just increment nothing. This is how I'd do it:

<!DOCTYPE html>
<html>
<head>
    <title> My first increment </title>
</head>
<body>
    <input type="text" name="TextBox" id="TextBox1" value="0" />
    <input type="Button" id='AddButton1' value="+" />
    <input type="text" name="TextBox" id="TextBox2" value="0" />
    <input type="Button" id='AddButton2' value="+" />

    <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script>
        $(document).ready(function(){

            $('#AddButton1, #AddButton2').click( function(){
                var id = $(this).attr('id').replace(/AddButton/, '');
                var num = parseInt($('#TextBox' + id).val());
                num++;
                $('#TextBox' + id).val(num);               
            });
        });
    </script>
</body>

Saeid · Accepted Answer · 2017-09-02 08:52:37Z

1

Try this code:

$(document).ready(function(){ 
    $('[id^="AddButton"]').click(function() {
        var counter = $(this).prev().val();
        counter++ ;
        $(this).prev().val(counter);        
    });
});

edited Sep 2, 2017 at 8:52

Saeid

2,7925 gold badges23 silver badges20 bronze badges

answered Sep 2, 2017 at 8:01

chinmay bhat

111 bronze badge

Collectives™ on Stack Overflow

Increment value of textbox on button click with different ids

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related