Search code examples
jqueryspinnerthemeroller

Multiple Spinner elements?

I want to have spinner elements on my shopping cart to select quantity. Like this one: http://jqueryui.com/spinner/

The problem is the spinner layout is applied to a input field with id="spinner", but how can I have multiple input fields, one for each product?

Doing this only the first field will have spinner layout:

<form action="shopping:cart.php" >
quantity 1: <input  id="spinner"><br>
quantity 2: <input  id="spinner"><br>
<input type="submit" value="Submit">
</form>
Solution

  • You cannot have duplicate id attributes as it means the HTML of the page is invalid, and causes problems in JS.

    Use a class to group instead:

    <form action="shopping:cart.php" >
    quantity 1: <input class="spinner"><br>
    quantity 2: <input class="spinner"><br>
    <input type="submit" value="Submit">
</form>

    Then you need to change your jQuery selector to recognise this class:

    $('.spinner').spinner();