Plus and Minus jQuery

I've found this example and it's exactly what I need for my site.

http://jsfiddle.net/puJ6G/389/

The only issue is that I need it several times on the same page.  If I click the plus sign then it increases all the instances of it on the page not just the one.  I've tried adding an ID in different places but still no luck.
LVL 12
Nathan RileyFounderAsked:
Who is Participating?
 
Rainer JeschorCommented:
Hi,

here an adjusted sample:
http://jsfiddle.net/EE_RainerJ/ZzYHt/

Basicly I use the IDs of the fields and rewrote the jQuery selectors:
Script
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($('#'+fieldName).val());
        // If is not undefined
        if (!isNaN(currentVal)) {
            // Increment
            $('#'+fieldName).val(currentVal + 1);
        } else {
            // Otherwise put a 0 there
           $('#'+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($('#'+fieldName).val());
        // If it isn't undefined or its greater than 0
        if (!isNaN(currentVal) && currentVal > 0) {
            // Decrement one
            $('#'+fieldName).val(currentVal - 1);
        } else {
            // Otherwise put a 0 there
            $('#'+fieldName).val(0);
        }
    });
});

Open in new window


HTML:
<form id='myform' method='POST' action='#'>
    <input type='button' value='-' class='qtyminus' field='quantity1' />
    <input type='text' id='quantity1' value='0' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity1' /><br/>
    <input type='button' value='-' class='qtyminus' field='quantity2' />
    <input type='text' id='quantity2' value='4' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity2' /><br/>
    <input type='button' value='-' class='qtyminus' field='quantity3' />
    <input type='text' id='quantity3' value='99' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity3' /><br/>
</form>

Open in new window


HTH
Rainer
0
 
Chris StanyonCommented:
Couple of things wrong with the suggested code - 'field' is not a valid attribute so I wouldn't advise using it. Also, there are  is no 'name' attribute to your inputs so if you ever need to submit your form - the values won't be submitted.

Have a look at this:

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

Open in new window

$('.qtyminus').click(function() {
    qty = $(this).next('input');
    var currentVal = parseInt(qty.val());
    var newVal = (!isNaN(currentVal) && currentVal > 0) ? currentVal - 1 : 0;
    qty.val(newVal);
});

$('.qtyplus').click(function() {
    qty = $(this).prev('input');
    var currentVal = parseInt(qty.val());
    var newVal = (!isNaN(currentVal)) ? currentVal + 1 : 0;
    qty.val(newVal);
});

Open in new window

http://jsfiddle.net/ChrisStanyon/5gdeh/
0
 
Nathan RileyFounderAuthor Commented:
0
 
gajera bhavinCommented:
its fack
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.