CODEWITHSUNDEEP
javascriptjqueryhtml
XG studio
XG studio

Reputation: 13

increment value by one jQuery

I want to increment values by 1, when I click buttons then it is get value by input hidden and show in console. like click button add1 it is pick the value 5 and show in console and vice versa. now I want to increment value by 1 to click every button get value and increment. like click add1 and show 5 in console when I click again add1 button it os increment by 1 and show 6 and so on. any suggestion how do this?

jQuery(function($) {
  $(document).on('click', '.add', function(e) {

    var $parent = $(this).closest('.vote');
    var _vote = parseInt($parent.find('#_vote').val());
    console.log(_vote);
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <title></title>
</head>

<body>
  <div class="vote">
    <button class="add">add1</button>
    <input type="hidden" name="_vote" id="_vote" value="5">
  </div>

  <div class="vote">
    <button class="add">add2</button>
    <input type="hidden" name="_vote" id="_vote" value="10">
  </div>

  <div class="vote">
    <button class="add">add3</button>
    <input type="hidden" name="_vote" id="_vote" value="15">
  </div>

Upvotes: 1

Views: 2470

Answers (6)

gurvinder372
gurvinder372

Reputation: 68393

Just set the new incremented value to the same element

    $parent.find('#_vote').val( _vote + 1 );

Demo

jQuery(function($) {
  $(document).on('click', '.add', function(e) {

    var $parent = $(this).closest('.vote');
    var _vote = parseInt($parent.find('#_vote').val());
    console.log(_vote);
    $parent.find('#_vote').val( _vote + 1 ); //this line has been added
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <title></title>
</head>

<body>
  <div class="vote">
    <button class="add">add1</button>
    <input type="hidden" name="_vote" id="_vote" value="5">
  </div>

  <div class="vote">
    <button class="add">add2</button>
    <input type="hidden" name="_vote" id="_vote" value="10">
  </div>

  <div class="vote">
    <button class="add">add3</button>
    <input type="hidden" name="_vote" id="_vote" value="15">
  </div>

Note

  • Its a good idea to save the $parent.find('#_vote'), just like you did for $parent into a variable so that you don't have to fetch it again.

Upvotes: 0

Priya
Priya

Reputation: 1470

get hidden value and increment it by one and then store this value in hidden field.

        var $parent = $(this).closest('.vote');
        var _vote = parseInt($parent.find('#_vote').val());
        console.log(_vote);
        $parent.val(parseInt(_vote)+1)

Upvotes: 0

Pravin Vavadiya
Pravin Vavadiya

Reputation: 3207

You can do this like Below.

Just add below two lines in your Jquery code

var _vote = parseInt($parent.find('#_vote').val()) + 1;
$parent.find('#_vote').val(_vote)


jQuery(function($) {
  $(document).on('click', '.add', function(e) {

    var $parent = $(this).closest('.vote');
    var _vote = parseInt($parent.find('#_vote').val()) + 1;
    $parent.find('#_vote').val(_vote)
    console.log(_vote);
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <title></title>
</head>

<body>
  <div class="vote">
    <button class="add">add1</button>
    <input type="hidden" name="_vote" id="_vote" value="5">
  </div>

  <div class="vote">
    <button class="add">add2</button>
    <input type="hidden" name="_vote" id="_vote" value="10">
  </div>

  <div class="vote">
    <button class="add">add3</button>
    <input type="hidden" name="_vote" id="_vote" value="15">
  </div>

Upvotes: 0

PPL
PPL

Reputation: 6555

Please try with this jQuery function.

jQuery(function($) {
  $(document).on('click', '.add', function(e) {
    var $parent = $(this).closest('.vote');
    var _vote = parseInt($parent.find('#_vote').val());
    var test = _vote + parseInt(1);

    var $parentId = $(this).closest('.vote');
    var _voteId = $parent.find('#_vote');

    _voteId.val(test);

    console.log(_vote);
  });
});

Upvotes: 0

Pedram
Pedram

Reputation: 16575

You can add an each loop then define i by 0 then increment i with i++ when click. In other word, you plus your current value with 0 then after second click i increment by i++ then it plus current value with 1.

jQuery(function($) {
  $('.add').each(function() {
    var i = 0;
    $(this).on('click', function(e) {
      var $parent = $(this).closest('.vote');
      var _vote = parseInt($parent.find('#_vote').val());
      console.log(_vote + i++);
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <title></title>
</head>

<body>
  <div class="vote">
    <button class="add">add1</button>
    <input type="hidden" name="_vote" id="_vote" value="5">
  </div>

  <div class="vote">
    <button class="add">add2</button>
    <input type="hidden" name="_vote" id="_vote" value="10">
  </div>

  <div class="vote">
    <button class="add">add3</button>
    <input type="hidden" name="_vote" id="_vote" value="15">
  </div>

Upvotes: 0

void
void

Reputation: 36703

On each click you can increase the value by one and set it back to the value of the input field. I would suggest you to store the input element in a variable so that you wont have to fetch that again and again.

jQuery(function($) {
  $(document).on('click', '.add', function(e) {

    var $el = $(this).closest('.vote').find('#_vote')
    var _vote = +$el.val();
    console.log(_vote);
    $el.val(_vote + 1);


  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <title></title>
</head>

<body>
  <div class="vote">
    <button class="add">add1</button>
    <input type="hidden" name="_vote" id="_vote" value="5">
  </div>

  <div class="vote">
    <button class="add">add2</button>
    <input type="hidden" name="_vote" id="_vote" value="10">
  </div>

  <div class="vote">
    <button class="add">add3</button>
    <input type="hidden" name="_vote" id="_vote" value="15">
  </div>

Upvotes: 2

Related Questions