-3

Okay, so I have some dynamically generated text boxes whose values aren't found when I call .val(). The text input that was rendered on page load will return a value with .val(), but all the rest will not.

If this example isn't sufficient to get an answer then I will edit the question with my actual code, but I've done my best to accurately simplify it.

JQuery:

numBoxes = 0

function newText(){
  numBoxes++
  $('<div id="' + numBoxes + '"><input id="soft_text_' + numBoxes + 
    '" type="text"></div>').insertBefore($('button#new'))
}

function logHard(){
  console.log($('input#hard_text').val())
}

function logSoft(){
  $('div').each(function(){
    console.log($('input#soft_text_' + this.id).val())
  })
}

HTML:

<html><body>
<input id="hard_text" type="text" name="first_text">
<button id="new" onclick="newText()">Add new text box</button>
<button onclick="logHard()">Log first text box</button>
<button onclick="logSoft()">Log new text boxes</button>
</body></html>
v4gil
  • 630
  • 7
  • 15
  • It might be because there isn't any text in them? – putvande Sep 17 '16 at 09:15
  • *"I've done my best to accurately simplify it."* Simplifying is good, but it should be a [mcve]. In this case, since it's browser-based tech, make it a **runnable** MCVE using Stack Snippets (the `<>` toolbar button). – T.J. Crowder Sep 17 '16 at 09:17
  • May be this is what you need [Please check this link](http://stackoverflow.com/questions/38322394/jquery-copy-dynamically-added-table-row-values-into-next-row/38328193#38328193) – Jishnu V S Sep 17 '16 at 09:47
  • Did you actually try your code? It works fine: https://jsfiddle.net/kfssqg0c/ (so doesn't represent your actual code if your actual code doesn't work) – freedomn-m Sep 17 '16 at 14:00
  • "..dynamically generated text boxes..." "..that was rendered on load will return.. rest will not.." sounds like a common problem with binding events to elements that don't exist yet: http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – freedomn-m Sep 17 '16 at 14:04
  • @freedomn-m It does, but the only events in this code are bound to buttons that do exist. – Niet the Dark Absol Sep 17 '16 at 15:25
  • It doesn't work on your jfiddle link. It doesn't matter that they don't exist, because they won't be called if they don't exist. I solved the problem, just needed a better selector. As for a runnable MCVE, I'll look into that next time, new to SO. – v4gil Sep 17 '16 at 18:06

2 Answers2

0

This is how I solved the problem. @Niet, it was your suggestion to use better selectors that helped. I'll work towards using selectors that don't require sequential identifying in the future, but this will make it work today.

function logSoft(){
  $('div').each(function(){
    console.log($('div#' + this.id + ' > input').val())
  })
}
v4gil
  • 630
  • 7
  • 15
-1

You should improve your selectors. Keeping an incrementing ID is usually a sign you're doing something wrong.

For instance...

function newText(){
  $('<div class="addedbox"><input type="text"></div>').insertBefore($('button#new'));
}
function logHard(){
  console.log($('input#hard_text').val());
}
function logSoft(){
  $('div.addedbox>input').each(function(){
    console.log($(this).val());
  })
}
Niet the Dark Absol
  • 301,028
  • 70
  • 427
  • 540