jquery add value to dynamically created input text

Question

I have a set of dynamically create input text boxes created via jQuery ajax and need to populate certain fields with values. I am using this;

$('#priority').attr('value', tplData);

but that does not seem to be working.

I tried .val(tplData), but to no avail.

Is there a different way to set the values of fields, via jQuery, that have been created dynamically?

The input field html is as follows;

<div class="field-container">
  <!-- This field is being dynamically created via an ajax call using jQuery -->
  <input type="text" name="priority" id="priority" class="input-group vert-spacer-bottom" placeholder="Priority">
</div>

Many thanks in advance.

EDIT It seems to definitely be something with dynamically create elements, because if I create the input element statically in the HTML and try these suggestions, it works perfect. But if the input fields are created dynamically, no dice.

Answer 1

First thing is,is your textbox generated before you assign the value to it.?? You can check if any error is there in console tab.Sometimes what happen if any error is occurred before your code it will not fire.So right click on page->Inspect Element->Console.If any errors then solve it and retry.

you can try like $('#priority').val(tplData)

Answer 2

If you have multiple controls then u have to use class

$(".priority").prop("value",tplData);

check if any errors in console.

Answer 3

Try:

$('body').find('#priority').attr('value', tplData);

EDIT : It should be work, however you can do this too:

$('body').find('name=["priority"]').val(tplData);
$('body').find('#priority').val(tplData);

EDIT: See this on jsfiddle

Answer 4

So, after further banging of my head against the proverbial code wall, I was able to engineer a solution that ended up working superbly!

The dynamically created textbox is now accepting assignment of a value to it from my jquery code. The magic was in rethinking exactly how the element must be seen by jquery in terms of visibility to the code.

First thing to account for is that the container DIV is static and always present in the document. This means that anything created in that DIV will strictly be client-side always. Locking into a client-side frame of mind then led me to thinking that jQuery needs to be made aware of the newly created elements. This was achieved by the following code;

var inputElm = '';
inputElm += '<input type="' + data.type + '" name="' + data.name + '" id="' + data.name + '" class="' + data.name + ' input-group vert-spacer-bottom" placeholder="' + data.placeholder + '" />';

$('.field-container').after().html(inputElm);

Now, when I execute the code...it works beautifully and sets the value of the input textbox to the desired value.