CODEWITHSUNDEEP
javascriptjquery
MariaL
MariaL

Reputation: 1242

Issue with plus/minus quantity buttons

I'm updating the quantity of my products with plus and minus buttons, which works but my problem is as I've got multiple products in one container it's updating the quantity of all the products. This is the code:

<form id='myform' method='POST' action='#'>
    <input type='button' value='-' class='qtyminus' field='quantity' />
    <input type='text' name='quantity' value='0' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity' />
</form>
<form id='myform2' method='POST' action='#'>
    <input type='button' value='-' class='qtyminus' field='quantity' />
    <input type='text' name='quantity' value='0' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity' />
</form>

jQuery(document).ready(function(){
    // This button will increment the value
    $('.qtyplus').click(function(e){
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If is not undefined
        if (!isNaN(currentVal)) {
            // Increment
            $('input[name='+fieldName+']').val(currentVal + 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(0);
        }
    });
    // This button will decrement the value till 0
    $(".qtyminus").click(function(e) {
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If it isn't undefined or its greater than 0
        if (!isNaN(currentVal) && currentVal > 0) {
            // Decrement one
            $('input[name='+fieldName+']').val(currentVal - 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(0);
        }
    });
});

And here is the fiddle

I've tried using .closest() in order to target only the specific qty field but this breaks the functionality altogether

jQuery(document).ready(function(){
    // This button will increment the value
    $('.qtyplus').click(function(e){
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If is not undefined
        if (!isNaN(currentVal)) {
            // Increment
            $(this).closest('input[name='+fieldName+']').val(currentVal + 1);
        } else {
            // Otherwise put a 0 there
            $(this).closest('input[name='+fieldName+']').val(0);
        }
    });
    // This button will decrement the value till 0
    $(".qtyminus").click(function(e) {
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If it isn't undefined or its greater than 0
        if (!isNaN(currentVal) && currentVal > 0) {
            // Decrement one
            $(this).closest('input[name='+fieldName+']').val(currentVal - 1);
        } else {
            // Otherwise put a 0 there
            $(this).closest('input[name='+fieldName+']').val(0);
        }
    });
});

Upvotes: 1

Views: 1203

Answers (1)

Graham
Graham

Reputation: 7802

Here is a forked fiddle with it working.

Your issue is in the form itself and the selector:

<form id='myform' method='POST' action='#'>
    <input type='button' value='-' class='qtyminus' field='quantity' />
    <input type='text' name='quantity' value='0' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity' />
</form>
<form id='myform2' method='POST' action='#'>
    <input type='button' value='-' class='qtyminus' field='quantity' />
    <input type='text' name='quantity' value='0' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity' />
</form>

When you do a jquery selector of $('input[name='+fieldName+']') it is returning every element that matches that condition and both of your forms have a field with that name.

Use parent() to find the parent form element, then a find to search only in that context and you'll see this works as intended:

var currentVal = parseInt($(this).parent().find('input[name='+fieldName+']').val());
// If is not undefined
if (!isNaN(currentVal)) {
    // Increment
    $(this).parent().find('input[name='+fieldName+']').val(currentVal + 1);
} else {
    // Otherwise put a 0 there
    $(this).parent().find('input[name='+fieldName+']').val(0);
}

Using closest() would have only gone back UP the document hierarchy, so it had no chance of finding a sibling element. You could also have used the siblings function to identify the desired elements.

Upvotes: 1

Related Questions