jquery each() function not working on input fields

Question

I have a cart options that has a increment the product option . The option has an text input and plus / minus options

Markup

<td class="cart-item-qty">
    <div class="quantity-mius">-</div>
    <div class="quantity">
        <input type="text" class="cart-main-product-qty" value="1" />
    </div>
    <div class="quantity-plus">+</div>
</td>

there is about 5 to 6 types of input like above

And the JavaScript code:

var minus = $(".quantity-mius");
var plus = $(".quantity-plus");
var itemValue = $(".cart-main-product-qty");

$(".cart-item-qty").each(function(index) {
    $(this).find(plus).on('click', function(e){
        e.preventDefault();
        increment();
    });
    $(this).find(minus).on('click', function(e){
        e.preventDefault();
        decrement();
    });
});

function increment(){
    newValue = itemValue.val(); 
    newValue++;
    itemValue.val(newValue);
};

function decrement(){
    newValue = itemValue.val();
    newValue--;
    if(newValue < 1){
        itemValue.val(0);
    }else{
        itemValue.val(newValue);
    }
};

When i press the plus button the input value increases in all the inputs and when minus then all decreases.

I want it increase/decrease only on the relevent input field — muhaimin
– muhaimin, Commented May 9, 2015 at 5:10

Sougata Bose · Accepted Answer · 2015-05-09 05:23:54Z

1

Onclicking on those icon simply call the function and find its sibling with that class and calculate the value. Try with -

$(".quantity-plus").on('click', function(e){
    e.preventDefault();
    increment($(this));
});
$(".quantity-mius").on('click', function(e){
    e.preventDefault();
    decrement($(this));
});

function increment($this){
    itemValue = $this.siblings('.cart-main-product-qty');
    newValue = itemValue.val(); 
    newValue++;
    itemValue.val(newValue);
};

function decrement(){
    itemValue = $this.siblings('.cart-main-product-qty');
    newValue = itemValue.val();
    newValue--;
    if(newValue < 1){
        itemValue.val(0);
    }else{
        itemValue.val(newValue);
    }
};

answered May 9, 2015 at 5:23

Sougata Bose

31.8k8 gold badges52 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vikash Kesarwani · Accepted Answer · 2015-05-09 05:14:26Z

0

Why don't you try like this

$(".quantity-plus").on('click', function(e){
    e.preventDefault();
    increment();
});
$(".quantity-mius").on('click', function(e){
    e.preventDefault();
    decrement();
});

It will work

answered May 9, 2015 at 5:14

Vikash Kesarwani

8505 silver badges14 bronze badges

Comments

Robert Lee · Accepted Answer · 2015-05-09 05:18:07Z

In increment and decrement, you're selecting all the input elements at once (the selection is happening outside of the each call at the top of the script).

You are therefore trying to call val() and val(n) on the entire collection of inputs, in affect trying to increment and decrement all of them at once, except in reality val() (with no arguments) doesn't work like that (it should never be used with a collection on inputs, but instead with only one input at a time).

You should select the input using find within the each like you do with the + and - buttons, and pass the found input to increment and decrement as parameters to those functions, or you should do the increment or decrements inline in the each block itself instead of in separate functions.

Community · Accepted Answer · 2020-06-20 09:12:55Z

this works : `manage click event` before selecting each `input`

<script type="text/javascript">

var itemValue = $(".cart-main-product-qty");

$( ".quantity-mius" ).click(function(e) {
    e.preventDefault();
  $( ".cart-main-product-qty" ).each(function( index, element ) {
        
        console.log('decrement');
        decrement();
    })    
});

$( ".quantity-plus" ).click(function(e) {
    e.preventDefault();
  $( ".cart-main-product-qty" ).each(function( index, element ) {
         
         console.log('increment');
        increment();
    })
  });


function increment(){
    newValue = itemValue.val(); 
    newValue++;
    itemValue.val(newValue);
};

function decrement(){
    newValue = itemValue.val();
    newValue--;
    if(newValue < 1){
        itemValue.val(0);
    }else{
        itemValue.val(newValue);
    }


};

</script>

Arun P Johny · Accepted Answer · 2015-05-09 05:25:44Z

You have to target only the input element related to clicked plus/minus button so

$(".cart-item-qty .quantity-mius").click(function(index) {
  $(this).closest('td').find('.cart-main-product-qty').val(function(i, val) {
    var value = +val || 0;
    return value > 1 ? value - 1 : 0
  })
});
$(".cart-item-qty .quantity-plus").click(function(index) {
  $(this).closest('td').find('.cart-main-product-qty').val(function(i, val) {
    return +val + 1 || 1;
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="cart-item-qty">
      <div class="quantity-mius">-</div>
      <div class="quantity">
        <input type="text" class="cart-main-product-qty" value="1" />
      </div>
      <div class="quantity-plus">+</div>
    </td>
  </tr>
  <tr>
    <td class="cart-item-qty">
      <div class="quantity-mius">-</div>
      <div class="quantity">
        <input type="text" class="cart-main-product-qty" value="1" />
      </div>
      <div class="quantity-plus">+</div>
    </td>
  </tr>
  <tr>
    <td class="cart-item-qty">
      <div class="quantity-mius">-</div>
      <div class="quantity">
        <input type="text" class="cart-main-product-qty" value="1" />
      </div>
      <div class="quantity-plus">+</div>
    </td>
  </tr>
  <tr>
    <td class="cart-item-qty">
      <div class="quantity-mius">-</div>
      <div class="quantity">
        <input type="text" class="cart-main-product-qty" value="1" />
      </div>
      <div class="quantity-plus">+</div>
    </td>
  </tr>
</table>

Brijesh Bhatt · Accepted Answer · 2015-05-09 05:25:46Z

0

This works:

$(document).ready(function(){
    var minus = $(".quantity-mius");
    var plus = $(".quantity-plus");

        $(plus).on('click', function(e){
            e.preventDefault(); 
            $(this).parent().find("input.cart-main-product-qty").val(parseInt($(this).parent().find("input.cart-main-product-qty").val())+1);
        });
        $(minus).on('click', function(e){
            e.preventDefault();
            $(this).parent().find("input.cart-main-product-qty").val(parseInt($(this).parent().find("input.cart-main-product-qty").val())-1);
        });
});

FIDDLE

answered May 9, 2015 at 5:25

Brijesh Bhatt

3,8303 gold badges20 silver badges34 bronze badges

Comments

Glenn Ferrie · Accepted Answer · 2015-05-09 05:45:10Z

You said you had more that one of these on the page. Is that because there are multiple items in the cart? I added a data- attribute to your container element. Just a thought. It may help differentiate them.

<td class="cart-item-qty" data-cartItemId="3">
    <div class="quantity-minus">-</div>
    <div class="quantity">
        <input type="text" class="cart-main-product-qty" value="1" />
    </div>
    <div class="quantity-plus">+</div>
</td>

You are casting too wide a net in your increment and decrement functions. You need to find itemValue that same way you are finding plus and minus within $(this) in your foreach. You need to pass along a single element.

If you check the docs on jQuery, there is a prescribed way to pass variables to the eventhandler that is called by on. jQuery API docs

Try this:

var minus = $(".quantity-minus");
var plus = $(".quantity-plus");
var itemValue = $(".cart-main-product-qty");

$(".cart-item-qty").each(function(index) {
    // need to use THIS this in a nested context.
    var that = $(this);

    $(this).find(plus).on('click', { target: that.find(itemValue)  }, increment);
    $(this).find(minus).on('click', { target: that.find(itemValue) }, decrement);  
});

function increment(event) {
    event.preventDefault();

    var el = event.data.target;

    newValue = el.val(); 
    newValue++;
    el.val(newValue);
};

function decrement(event) {
    event.preventDefault();

    var el = event.data.target;

    newValue = el.val();
    newValue--;
    if(newValue < 1){
        el.val(0);
    }else{
        el.val(newValue);
    }
};

Hope this helps!

Antonio · Accepted Answer · 2015-05-09 07:06:28Z

Your code looks almost right. First change this code

var minus = ".quantity-mius";
var plus = ".quantity-plus";
var itemValue = ".cart-main-product-qty";

as you use find you don't need the object. Then the html is not complete, I used this code to make it working

<table>
  <tr>
    <td class="cart-item-qty">
        <div class="quantity-mius">-</div>
        <div class="quantity">
            <input type="text" class="cart-main-product-qty" value="1">
        </div>
        <div class="quantity-plus">+</div>
    </td>
  </tr>
  <tr>
    <td class="cart-item-qty">
        <div class="quantity-mius">-</div>
        <div class="quantity">
            <input type="text" class="cart-main-product-qty" value="1" >
        </div>
        <div class="quantity-plus">+</div>
    </td>
  </tr>
</table>

While the js is

var minus = ".quantity-mius";
var plus = ".quantity-plus";
var itemValue = ".cart-main-product-qty";

$(".cart-item-qty").each(function(index) {
    var outer = $(this)
    $(this).find(plus).on('click', function(e){
        e.preventDefault();
        increment(outer.find(itemValue));
    });
    $(this).find(minus).on('click', function(e){
        e.preventDefault();
        decrement(outer.find(itemValue));
    });
});

function increment(item){
    newValue = item.val();
    newValue++;
    item.val(newValue);
};

function decrement(item){
    newValue = item.val();
    newValue--;
    if(newValue < 1){
        item.val(0);
    }else{
        item.val(newValue);
    }
};

Note that I added an argument to the functions increment and decrement because I guess you want to change just the relative input field

Collectives™ on Stack Overflow

jquery each() function not working on input fields

Markup

And the JavaScript code:

8 Answers 8

Comments

Comments

Comments

this works : `manage click event` before selecting each `input`

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Markup

And the JavaScript code:

8 Answers 8

Comments

Comments

Comments

this works : manage click event before selecting each input

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

this works : `manage click event` before selecting each `input`