PHP generated textbox operation with Javascript

Question

I'm using text boxes to let users change the quantity in a ecommerce website, e.g., http://nordschleife.metaforix.net/118/118/index.php/sony.html

There are two problems that I hope to solve:

1. On the catalog view (such as the one from the previous URL), the up and down arrows only work for the 1st text box. All subsequent entries don't work.

2. After clicking an arrow, the page goes to the top, which is not what I intend as well.

PHP is used to generate the entries, jQuery is used for the actions.

The source file for the page is here http://www.mediafire.com/?sharekey=9df4aef22a728de5c2b435915e8821d7e04e75f6e8ebb871

Answer 1

1. Use jQuery's live() to create events that will be re-applied when the page is changed via an AJAX update.
2. event.preventDefault() will stop this.

Answer 2

1: Instead of registering an event for every arrow separately you can make only one script for all of them. Make an arrow look like this:

<a id="upImg_705" ... rel="qty_705" class="uparrow">
<input id="qty_705" class="input-text qty" type="text" value="1" maxlength="12" name="qty"/>
<a id="downImg_705" ... rel="qty_705" class="downarrow">

an then register these functions as click event handlers:

$('.uparrow').live("click", function() { 
   var rel = $(this).attr('rel');
   var textbox = document.getElementById(rel);
   textbox.value = parseInt(textbox.value)+1;
   return false;
}
$('.downarrow').live("click", function() { 
   var rel = $(this).attr('rel');
   var textbox = document.getElementById(rel);
   textbox.value = parseInt(textbox.value)-1;
   return false;
}

2: To prevent goin to the top of the page use href="javascript:void(0);" instead of href="#" in your links. Alternatively your onclick method might return false to prevent default action (i.e. changing the location of your web page).