0

I have multiple rows (DIVs), each with multiple child DIVs, each with a single INPUT. Each row also has a button that calls the code listed below.

The calling code is correct as the first alert() pops up.

I've tried both the initial $('input... , the following (function () {... and the following line $("'#" + dest..., but neither work. There is no subsequent alert(), which I'm expecting to iterate through each INPUT under the given main DIV.

function fnFinanceBudgetEditRecord(destDiv) {
  alert("fnFinanceBudgetEditRecord [" + destDiv + "]");

  $('input', $("'#" + destDiv + "'")).each(function () {
  //$('#' + destDiv + ' input').each(function () {
  //$("'#" + destDiv + "'").find('input').each(function () {
    alert(this.value); // "this" is the current element in the loop
  });

}

EDIT: On a hunch, I've changed my existing naming scheme from BDGT_Description_[e59c6468-049f-11e9-9de4-d050996c3d53]_Field to BDGT_Description_e59c6468-049f-11e9-9de4-d050996c3d53_Field and code that wasn't working now is. So I'm going to rename all my IDs to exclude the square brackets.

Where am I going wrong? Note, all elements are unique.

aSystemOverload
  • 2,994
  • 18
  • 49
  • 73
  • Possible duplicate of [Can multiple different HTML elements have the same ID if they're different elements?](https://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme) – CertainPerformance Mar 17 '19 at 22:32
  • 1
    You have duplicate IDs in a single document, which is invalid HTML (and which jQuery doesn't understand). Use classes instead – CertainPerformance Mar 17 '19 at 22:32
  • I'm a little confused, there are no duplicate IDs, they have unique GUID based names, one for example is 'BDGT_[e59baa8a-049f-11e9-9de4-d050996c3d53]'. – aSystemOverload Mar 17 '19 at 22:35
  • Your `$("'#" + destDiv + "'")` *looks* like it's trying to select divs with an ID of `destDiv` - but you never change `destDiv`, so iterating over the collection should only ever contain one element, at most. Can you post the HTML and an example `destDiv` you're calling the function with? – CertainPerformance Mar 17 '19 at 22:44
  • Maybe I'm missing something, but destDiv is a variable, which is provided at the beginning of the function, it is not static text. The name of the destination DIV (the top level row DIV) is passed to the function when called from the button. – aSystemOverload Mar 17 '19 at 22:46
  • You mean, it doesn't contain a string? `"fnFinanceBudgetEditRecord [" + destDiv + "]"` *looks* like you have a string there, and `"'#" + destDiv + "'"` which you pass as the selector will also result in a single static string. – CertainPerformance Mar 17 '19 at 22:48
  • destDiv contains a string, the name of a specific DIV like OuterDiv_000005, there are no other DIVs called OuterDiv_000005. I'm expecting the jQuery Code to look for '#OuterDiv_000005' because when you concatenate "'#", the contents of destDiv and "'", thats what you get. Can jQuery handle a variable within the selector code? – aSystemOverload Mar 17 '19 at 22:56
  • The jQuery there accepts a string as input, and just like with all Javascript, `"'#" + destDiv + "'"` will evaluate to a string. If you only have one `#OuterDiv_000005` element, then the `.each` callback will only run once. (but, if you only have one element, there's no reason to use a loop at all) – CertainPerformance Mar 17 '19 at 22:59
  • There are multiple INPUT elements within the specified #OuterDiv_000001, 2, 3, 4. It is these elements that I wish to access. – aSystemOverload Mar 17 '19 at 23:14
  • `$('#' + destDiv + ' input').each`? – CertainPerformance Mar 17 '19 at 23:15
  • @CertainPerformance No, doesn't work either. Function is still triggered, but the `alert(this.value); ` is not triggered. – aSystemOverload Mar 18 '19 at 20:59

1 Answers1

0

If you give the inputs a same class, you can get their values by using document.querySelectorAll(). Like so:

HTML

<div id="destDiv">
   <input class="destDivInput" type="text" />
   <input class="destDivInput" type="text" />
   <input class="destDivInput" type="text" />
</div>

JS

function fnFinanceBudgetEditRecord(destDiv) {
   var inputs = document.querySelectorAll('#' + destDiv + ' .destDivClass');
   inputs.forEach(function (input) {
      console.log(input.value);
      //
   });
}
Isaac Oluwatemilorun
  • 566
  • 5
  • 16