jquery add value to dynamically created input text field

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.

No, they are all different. So, here's the weird part. I can make it work if I create the input element as a static HTML input field. Works like a charm. If I let jquery create it after the page is rendered though, can't get it to work at all regardless of implementation method. — Skittles
– Skittles, Commented Jul 20, 2015 at 10:51

Siamak Ferdos · Accepted Answer · 2015-07-20 10:03:21Z

2

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

edited Jul 20, 2015 at 10:03

answered Jul 20, 2015 at 4:20

Siamak Ferdos

3,3096 gold badges35 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Skittles Over a year ago

I tried this and it still didn't work. Seemed a very reasonable suggestion.

Skittles Over a year ago

Well, all of these look great, but none worked. Does it matter that I'm using the bootstrap library?

Siamak Ferdos Over a year ago

what's value of tplData? put your code completely here. I append jsfiddle link for your problem

Skittles Over a year ago

It's derived from an AJAX call. It will typically be a 2 to 4 character string. e.g. "P1S2" or "P2" ...etc. Please go read my latest comment at the top also...thanks.

Hetvi · Accepted Answer · 2015-07-20 04:26:02Z

0

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)

answered Jul 20, 2015 at 4:26

Hetvi

1321 gold badge1 silver badge8 bronze badges

1 Comment

Skittles Over a year ago

Yes, the field is generated before attempt is made to push a value to it. Secondly, please see my OP as I already tried what you're suggesting.

Light · Accepted Answer · 2015-07-20 04:42:08Z

0

If you have multiple controls then u have to use class

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

check if any errors in console.

answered Jul 20, 2015 at 4:42

Light

1,09710 silver badges33 bronze badges

Comments

Skittles · Accepted Answer · 2015-07-21 00:37:46Z

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.

Collectives™ on Stack Overflow

jquery add value to dynamically created input text field

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related