I am using JQuery .each() on a list and am wondering how to retrieve the text from an input field within the list item, the code looks like:

<ul id="foo">
  <li id="1">
    <input type="text" />
  </li>
  <li id="2">
    <input type="text" />
  </li>
</ul>

I then need to get the id and text to send to an AJAX call

$(#foo li).each( function() {
  id = this.id; // Works fine
  mytext = ???; // The bit i'm stuck with
  ...
});

There is only one input control per list item.

I am using JQuery .each() on a list and am wondering how to retrieve the text from an input field within the list item, the code looks like:

<ul id="foo">
  <li id="1">
    <input type="text" />
  </li>
  <li id="2">
    <input type="text" />
  </li>
</ul>

I then need to get the id and text to send to an AJAX call

$(#foo li).each( function() {
  id = this.id; // Works fine
  mytext = ???; // The bit i'm stuck with
  ...
});

There is only one input control per list item.

• javascript
• jquery

3 Answers 3

$('#foo li').each( function() { 
  id = this.id; // Works fine
  mytext =  $(this).find('input[type=text]').val();  
  $('#foo').after('<div> text in input = ' +mytext + '</div>');
}); 

here it is working http://jsfiddle/J8ZUT/1/

$(#foo li).each( function() {
  id = this.id; // Works fine
  mytext = $(this).find(':input').val(); // <------------
  ...
});

Note that this will also work with selects and other "input" types, also this will only work when there is only a single :input within the list element.

mytext = $(this).find('input').val();