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 RileyFounder/CTOAsked:
Who is Participating?
 
Rainer JeschorConnect With a Mentor Commented:
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 StanyonConnect With a Mentor Commented:
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 RileyFounder/CTOAuthor Commented:
0
 
gajera bhavinCommented:
its fack
0
All Courses

From novice to tech pro — start learning today.