jquery - multiple buttons with respective value incrementing on click

Question

I have a range of input buttons, each with its own value.

<ul class="sizeDriller">
  <li><input type="button" value="S" class="sizeInput" /></li>
  <li><input type="button" value="M" class="sizeInput" /></li>
  <li><input type="button" value="L" class="sizeInput" /></li>
  <li><input type="button" value="XL" class="sizeInput" /></li>
</ul>

If I click on one of the buttons, I want to attach a qty of "1" per click to the respective button, so the first button value should go "S/1", then "S/2", then "S/3" and so on.

My script is not really working:

var incr = 0;
$('.sizeInput').bind('click', function()
  {
  var initial = $(this).val();
  var init = parseInt(incr);
  var counter = init+1;
  $(this).attr('value',initial+'/'+counter);
  });
}

I think I need some kind of loop, but I am not getting anywhere...

Thanks for help!

======================================================== Reset button:

<a href="#" class="resetSize">Reset/a>

Reset function:

$('.resetSize').bind('click', function()
  {
  $('.sizeInput').each(function(e)
    {
    var current = $(this).val().split("/")[0];
    $(this).attr('value',current);               
  });
});

When using parseInt, use 10 as the radix. So parseInt(incr) should be parseInt(incr, 10). Also, to set the value attribute using jQuery, simply use $(this).val(yourValueHere). — artlung
– artlung, Commented Jun 16, 2011 at 19:25

Niklas · Accepted Answer · 2011-06-16 19:16:06Z

2

You could use data() to store the counter:

$('.sizeInput').bind('click', function(){
  var initial = $(this).val();
      if(typeof $(this).data('counter') == "undefined"){
          $(this).data('counter',1); 
      }else{
          $(this).data('counter',$(this).data('counter')+1);
          initial = initial.substr(0,initial.indexOf('/'));
      }

   $(this).val(initial+'/'+$(this).data('counter'));
});

example: http://jsfiddle.net/niklasvh/etjYL/

answered Jun 16, 2011 at 19:16

Niklas

30k5 gold badges54 silver badges74 bronze badges

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

2 Comments

frequent Over a year ago

also checking this. Thanks so far.

frequent Over a year ago

ok, I tried to develop a global reset button. Sort of works, but after resetting and trying to increment a 2nd time, the original value disappears. I put my reset function up in the original text. Thanks for any help

roberkules · Accepted Answer · 2011-06-16 19:12:59Z

1

<ul class="sizeDriller">
    <li><input type="button" value="S" /><input type="hidden" name="sizeS" value="0" /></li>
    <li><input type="button" value="M" /><input type="hidden" name="sizeM" value="0" /></li>
    <li><input type="button" value="L" /><input type="hidden" name="sizeL" value="0" /></li>
    <li><input type="button" value="XL" /><input type="hidden" name="sizeXL" value="0" /></li>
</ul>

$('.sizeDriller input[type="button"]').bind('click', function(e) {
    var type = $(this).val().split("/")[0];
    var counter = $("input[name='size"+type+"']");

    var newcount = parseInt(counter.val())+1;
    if (newcount > 5) {
        newcount = 0;
    }

    counter.val(newcount);
    $(this).val(type + (newcount > 0 ? ("/" + newcount) : ""));
});

see it working @ http://jsfiddle.net/roberkules/xVeL8/

answered Jun 16, 2011 at 19:12

roberkules

6,6052 gold badges46 silver badges52 bronze badges

3 Comments

frequent Over a year ago

ah. Thank you! Let's see how this looks in my script.

frequent Over a year ago

I like your solution, but the one from Niklas is easier to implement and work with in my setting. So +1, but the check goes to Niklas. Thanks again!

roberkules Over a year ago

I added the hidden input fields for the case that you actually wanna send the values.

Kevin Brown · Accepted Answer · 2011-06-16 19:10:28Z

0

Try var counter = init=+1 instead.

answered Jun 16, 2011 at 19:10

Kevin Brown

12.7k34 gold badges100 silver badges156 bronze badges

Comments

SaschaJohn · Accepted Answer · 2011-06-16 19:16:05Z

0

what about something like this

<input type="button" value="S" initialVal="S" class="sizeInput" onclick="changeValue()"/>
....

function changeValue(){

 if ($(this).data('counter')){
   counter++;
 }else {
   $(this).data('counter', 1) //set initial to value1
 }
 $(this).val($(this).attr("initialVal")+'/'+$(this).data('counter'))

}

answered Jun 16, 2011 at 19:16

SaschaJohn

191 gold badge1 silver badge4 bronze badges

Comments

artlung · Accepted Answer · 2011-06-16 19:20:47Z

0

$('.sizeInput').bind('click', function(){
    var value = $(this).val(),
        size  = value.split('/')[0],
                // get part after the slash, if it exists, parse as integer
                // if there is no slash and part after it, then 0 is value
                // and then add 1 to the count
        num   = (parseInt(value.split('/')[1], 10) || 0) + 1;
    $(this).val(size + '/' + num);
});

answered Jun 16, 2011 at 19:20

artlung

33.5k19 gold badges76 silver badges124 bronze badges

Comments

Joe · Accepted Answer · 2011-06-16 19:23:00Z

0

Give this a shot:

    <ul class="sizeDriller">
  <li><input type="button" value="S" class="sizeInput" /></li>
  <li><input type="button" value="M" class="sizeInput" /></li>
  <li><input type="button" value="L" class="sizeInput" /></li>
  <li><input type="button" value="XL" class="sizeInput" /></li>
</ul>

<script>
$(document).ready(function() {
var init = 0;
var counter = 0;
$('.sizeInput').bind('click', function()
  {
  var initial = $(this).val().substring(0,1);
  var num = $(this).val().substring(2);
  if (!num) {
    init = 1
        counter = 1;
  } else {
    init = parseInt(num);
    counter = init+1;
  }
  $(this).attr('value',initial+'/'+counter);
  });
});
</script>

answered Jun 16, 2011 at 19:23

Joe

3662 silver badges4 bronze badges

Collectives™ on Stack Overflow

jquery - multiple buttons with respective value incrementing on click

6 Answers 6

2 Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related