0

The issue I'm having is fairly hard for me to explain, but I have replicated it in a jsFiddle http://jsfiddle.net/6ms4T/1/

What I am trying to achieve is by updating the 'Quantity' text box, I want to display the value elsewhere (the line below which I'll refer to as the 'Cost line').

Basically, updating the first input box (qty_item_1) is updating all the (quant_) IDs in the 'Cost line', rather than just the one related to that product.

function recalc(){

$("[id^=quant_]").text($("input[id^=qty_item_]").val());

etc...

Full code is here: http://jsfiddle.net/6ms4T/1/

Any help would be appreciated.

Mathew Thompson
  • 55,877
  • 15
  • 127
  • 148
Web Hippo
  • 3
  • 2

4 Answers4

1

Add an attribute that holds an information about your input. I've added an attribute "rel" with value 1 for the first input, and 2 for the second, and then used this rel for building the right id's for the li elements.

Here is an updated working jsFiddle : http://jsfiddle.net/6ms4T/8/

gabitzish
  • 9,535
  • 7
  • 44
  • 65
0

You can make things relatively concise, and apply events to only the specific elements by identifying the numeric component of the id, and then using that number as part of the selector:

var idNum = this.id.match(/\d+/);
$("#quant_" + idNum).text($("#qty_item_" + idNum).val());

JS Fiddle demo.

References:

David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • It doesn't work ... the second quantity is update with first input's value. – gabitzish Apr 25 '12 at 12:09
  • Oh. I'll have another look at that. – David Thomas Apr 25 '12 at 12:12
  • @gabitzish you're right, it doesn't work. It delays the update until the next quantity is updated, but still returns the same value. – Web Hippo Apr 25 '12 at 12:12
  • Ah that's great! I'll try it in my full form and let you know if this works. It looks like it probably will though! – Web Hippo Apr 25 '12 at 12:13
  • It seems to, in the version you posted...so, here's hoping! =) – David Thomas Apr 25 '12 at 12:15
  • Hi @DavidThomas I tried your code, and the jsFiddle worked no problem. However, it doesn't work in my code. I truncated the `qty_item_` id from `ctl00_EnquiryForm1_qty_item_` as I didn't think it mattered, but for some reason updating the ID in your code to match mine isn't working at all. Any Ideas on this? – Web Hippo Apr 25 '12 at 12:27
  • Update the demo, post a link, and I'll take a look. – David Thomas Apr 25 '12 at 13:20
  • Updated: http://jsfiddle.net/6ms4T/23/ As you will see, this no longer works. The extended ID name is generated from the ASP code – Web Hippo Apr 25 '12 at 13:29
  • Yes; the problem is that you're not passing the `$(this)` jQuery object to the function; so it's not able to perform a `match()` against the `id`. – David Thomas Apr 25 '12 at 13:49
0

You can find the id of the element that is changing and then extract the digits part of it for use in the rest of your calculations. Here is the aspects that I changed and a working version.:

var uniqueOne = $(this).attr("id").match(/\d+/);
$("[id^=quant_][id$="+uniqueOne+"]").text($("input[id^=qty_item_][id$="+uniqueOne+"]").val());

While not the cleanest looking code, what it does is find the ids that start with quant_ and end with uniqueOne. You could probably condense these but it highlights combining two selectors (the starts with and ends with).

Looks like you have lots of great ideas to choose from.

Edit:

If your id's don't start with qty_item_, then you'll need to use a different selector. The lowest-hanging-fruit for this one would be the contains selector: id*=blah.

Updated version with 'gross' ids to find: http://jsfiddle.net/6ms4T/22/

Edit:

The previous jsfiddle didn't handle updating the total as expected. This updated version should reduce confusion by identifying all the cases where DOM elements are sought by ID; however, there is a high probability that this should be refactored: http://jsfiddle.net/6ms4T/24/.

EDIT:

OP's tags had various numbers and letters generated into his IDs but the final digits were preceded by an underscore. The significant id was thereby found with the regex /\d+$/. As other posters have shown, there is more than one way to solve this. I personally liked User gabitzish's.

veeTrain
  • 2,915
  • 2
  • 26
  • 43
  • This doesn't work in my code, I truncated the qty_item_ id from ctl00_EnquiryForm1_qty_item_ as I didn't think it mattered, but for some reason updating the ID in your code to match mine isn't working at all. Any Ideas on this? – Web Hippo Apr 25 '12 at 12:26
  • @WebHippo; `id^=qty_item_` means the id _starts with_ `qty_item_`. If it actually starts with `ctl00...` then it definitely won't find it. You might need to use the [contains operator](http://api.jquery.com/attribute-contains-selector/) instead: `id*=qty_item` – veeTrain Apr 25 '12 at 12:35
  • Again it works in this jsFiddle, but not in my asp form, which is odd. Unfortunately, I am not in the position to post a link to the page in question. – Web Hippo Apr 25 '12 at 13:05
  • @WebHippo; note, you'll need to change the way you find the id that you bind to. `$("input[id*=qty_item_]").bind("keyup", recalc);`. Also, be sure to have a Developer Tool up and running to make sure there are not javascript errors occurring. – veeTrain Apr 25 '12 at 13:07
  • @WebHippo; yes; the error will happen with my approach on initial load because you're running recalc() without passing any jQuery object in. However, subsequent calls to recalc should be fine and $(this) will represent the textbox that was keyed-up -- assuming you are binding correctly. You should probably not call recalc() on its own. Especially if you don't customize it to do something when there is no object. – veeTrain Apr 25 '12 at 13:23
  • @WebHippo; the problem with your jsfiddle is [fixed here](http://jsfiddle.net/6ms4T/25/). Your ctl00 was getting found by the regex. I found the **last** digits of the string instead. – veeTrain Apr 25 '12 at 13:40
0

change start of recalc() function as follows; 

function recalc(e){
    var idx = $(e.target).attr('id').split('_').pop();
    $("[id^=quant_" + idx + "]").text($(e.target).val());

... }

rt2800
  • 3,045
  • 2
  • 19
  • 26
  • Out of all the ideas posted, this one works in my code, but it targets and value with say '1' at the begining, so updating the quantity will update: 1, 10, 11, 12 etc. – Web Hippo Apr 25 '12 at 12:24
  • The last number in ID of input boxes (like qty_item_1,qty_item_2) is used to select related text-label where quantity is to be displayed. – rt2800 Apr 25 '12 at 12:33
  • I agree, it's works with just `qty_item_1` and `qty_item_2`, but transferring your code into mine, I have more than 2 `qty_item_` when updating `qty_item_1` then `qty_item_1` updates, but so does `qty_item_10`, `qty_item_11`, `qty_item_12`, etc – Web Hippo Apr 25 '12 at 13:08