I have a button where i append inputs to the HTML DOM.
Later on i have a button to fetch input values if they matches with a keyword.
In this example "a".

HTML

<button class="btn btn-info" id="btnAddInput">Add input</button>
<button class="btn btn-info" id="fetchValue">Fetch value</button>
<div id="inputs"></div>

JS

$('#btnAddInput').on('click', function() {
  $('#inputs').append('<input type="text" class="myInput"><br>');
  });
$('#fetchValue').on('click', function() {
  var value = $(document).find('input[value="a"]');
  console.log(value);
});

Fiddle: /

I´ve learned that, if you add HTML to the DOM with Jquery, you sometimes have to use document as selector, to find elements.
But i have no success in this case.

Inputs that you add is, in my code saved into mysql.
And if you load up all saved inputs at start, the js code find values.

So, what am i missing?

I have a button where i append inputs to the HTML DOM.
Later on i have a button to fetch input values if they matches with a keyword.
In this example "a".

HTML

<button class="btn btn-info" id="btnAddInput">Add input</button>
<button class="btn btn-info" id="fetchValue">Fetch value</button>
<div id="inputs"></div>

JS

$('#btnAddInput').on('click', function() {
  $('#inputs').append('<input type="text" class="myInput"><br>');
  });
$('#fetchValue').on('click', function() {
  var value = $(document).find('input[value="a"]');
  console.log(value);
});

Fiddle: https://jsfiddle/Ljrkdm53/

I´ve learned that, if you add HTML to the DOM with Jquery, you sometimes have to use document as selector, to find elements.
But i have no success in this case.

Inputs that you add is, in my code saved into mysql.
And if you load up all saved inputs at start, the js code find values.

So, what am i missing?

• javascript
• jquery

• You want this? jsfiddle/Ljrkdm53/1 – Anoop Joshi P Commented Dec 11, 2015 at 7:57

4 Answers 4

You're confusing the various values associated with inputs. You're not the only one!

• The value attribute specifies the initial value of the input. It does not change when the input's value changes, and so since you're appending an input that has no value attribute, then typing in it, it doesn't suddenly get a value attribute — so you can't search for it by that value.

• The value property on HTMLInputElement instances reflects the input's current value.

• There's also the defaultValue property, which reflects the value attribute.

If you need to find an input based on its current value, there's no CSS selector that will do it, you need to use a broader search and filter:

var inputsWithA = $("input").filter(function() {
    return this.value == "a";
});

Here's a quick example showing the values of an input's value property, defaultValue property, and value attribute:

$("button").on("click", function() {
  var input = $("input");
  msg("The input's <code>value</code> property is: '" + input.val() + "'");
  msg("The input's <code>defaultValue</code> property is: '" + input.prop("defaultValue") + "'");
  msg("The input's <code>value</code> <strong>attribute</strong> is: '" + input.attr("value") + "'");
  
  msg("We can only use CSS with the attribute, so for instance <code>$('input[value=\"original\"]')</code> will find it but <code>$('input[value=\"" + input.val() + "\"]')</code> will not:");
  msg("<code>$('input[value=\"original\"]')</code> found it? " +
      ($('input[value="original"]').length ? "Yes" : "No")
  );
  msg("<code>$('input[value=\"" + input.val() + "\"]')</code> found it? " +
      ($('input[value="' + input.val() + '"]').length ? "Yes" : "No")
  );
});
function msg(html) {
  $("<p>").html(html).appendTo(document.body);
}

<p>Type something in the input, then click the button:</p>
<input type="text" value="original">
<button type="button">Click Me</button>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>

If I run that and change the input's value to "updated" before clicking the button, I get:

The input's value property is: 'updated'

The input's defaultValue property is: 'original'

The input's value attribute is: 'original'

We can only use CSS with the attribute, so for instance $('input[value="original"]') will find it but $('input[value="updated"]') will not:

$('input[value="original"]') found it? Yes

$('input[value="updated"]') found it? No

Here is the code you need.

$('#btnAddInput').on('click', function() {
$('#inputs').append('<input type="text" class="myInput"><br>');
});

$('#fetchValue').on('click', function() {
  var value = $('.myInput').val();
  console.log(value);
});

You can check it working here:

jsfiddle/Ljrkdm53/7

What you are missing is that the find returns an array of objects and not one value and that the value selector only uses the initial value. You need to use an each function on the value you have now to do something with it.

$(document).find('input').each(function () {
    if( $(this).val() == "a")
        console.log( $(this).val());
});

Try with each function.

$('input').each(function() {
    if ($(this).val() == 'a') {
        console.log('a');
    }
});