Take the 2-minute tour ×

I have an ASP.NET Repeater control, where a number of the following instances of code are generated/created in each ItemTemplate.

I am trying to create a function in jQuery/javascript, where the value in the 'qualityBox' text box, is incremented each time the up arrow is clicked. With my code, this only works for the first 'ItemTemplate' instance - i.e. the first row in my Repeater.

Could anyone kindly guide me in being able to make this work for each row in the Repeater? In other words, that the button pressed in a row makes the 'quantityBox' in that respective row only increment by 1.


share|improve this question

2 Answers 2

up vote 2 down vote accepted

The problem with your code is that your using ID. Id's are suppose to be unique. Therefore, when jQuery finds the first one, that's the one it uses. You need something that is meant to be repeatable, such as class.

        <input type="text" id="quantityBox" value="0"/>
        <input type="button" class="upButton"/>

Next up, you have to be able to select the correct quantity box.

 $(".upButton").click(function () {
     var quantityBox = $("#quantityBox", $(this).parent());
     var currentValue = quantityBox.val();
     quantityBox.val(parseInt(currentValue) + 1);

This first thing to do is change the selector to add to click event to .upButton. This will attach the event to all instances of .upButton rather than just the first.

Next, why perform the DOM lookup twice when you can create a variable and just use that?

Third, It's ok to keep ID for quantityBox because I've added a context parameter. This is saying get the parent element of the clicked element, which in this case will be a td. Then, only look for #quantityBox inside of that element.

Give that a shot.

share|improve this answer
there is a risk that the row $("#quantityBox", $(this).parent()); might return more than one input, if all item templates share common parent when rendered. –  Ivaylo Slavov Oct 28 '11 at 19:28
True, however I wrote this assuming that <ItemTenplate> is inside a DataRepeater, therefore meaning it would get placed into a td element. However, to mitigate this concern, you could wrap the 2 inputs in a div like in your post. That might actually be a more defense way to code it since assumption are usually bad :) –  mccow002 Oct 28 '11 at 19:34
Don't worry, I didn't notice that until you made me to reconsider the complexity my code and I remembered that I needed the div to 'scope' the interactions within the item template. I think a combination of both solutions could fit in quite well :) –  Ivaylo Slavov Oct 28 '11 at 19:39
I edited my answer to reflect your concerns –  mccow002 Oct 28 '11 at 19:41
Thank you so much for the assistance! It worked :) –  Dot NET Oct 28 '11 at 21:01

I would make a data-attribute on the qty box that has an ID of some sort and then also attach that id to the element that has the up arrow so you have a relationship between the two.

    <input type="text" id="quantityBox" data-elementID="$$" value="0"/>
    <input type="button" data-elementID="$$" id="upButton"/>
share|improve this answer
I'd consider a 'matter of last resort' the use of custom html attributes. I know that lots of UI frameworks use and rely on custom attributes (despite the invalid html output produced), but I've always been taught that this is a bad practice which should be avoided if it is in our control. But it is indeed important that there should be a link between the two inputs in an item template, so that the interaction between the two is limited only within that template. –  Ivaylo Slavov Oct 28 '11 at 21:03
@IvayloSlavov - The data- attribute is part of the HTML5 spec. ejohn.org/blog/html-5-data-attributes –  Sam Nov 1 '11 at 16:07
Thanks, always good to learn something –  Ivaylo Slavov Nov 2 '11 at 9:10

Your Answer


