CODEWITHSUNDEEP
javascriptjqueryhtmlajaxdynamic
Plastic
Plastic

Reputation: 10318

Can't get value from dynamically created hidden input field

I got an element, dynamically added on the page after an ajax call, that has an hidden input field within:

<div id='added_title'>
<b>Title</b> 
<input type='hidden' id='title_n' name='title_n' value='TITLE_NAME'/>
</div>

After the ajax call i need to get input field value to show it in another div but without any event or click, just after the ajax call finish.

i tried:

$("input[name='title_n']").val();
$("input[id='title_n']").val();
$("#title_n").val()
$("#added_title input[name='title_n']").val();

I also tried to use data-attribute like this:

<div id='added_title' data-title = 'TITLE_NAME'>
    <b>Title</b> 
    </div>

accessing the data with:

$('#added_title').data('title');

But i always get "undefined" value.

Any suggestion?

EDIT

Ajax call:

$.ajax({
    type: 'POST',
    url: '/tools/get_title.php',
    data:  { title: title},
        success: function (response) {
            $("#title_div").html(response);
        }
});

where "title_div" is the ID of "added_title" parent.

Upvotes: 0

Views: 2434

Answers (1)

Maverick
Maverick

Reputation: 4498

$("#title_n").val() is the fastest and easiest way to get the value that you are after.

The problem with the code you have above, is that the $.ajax call is fired, then code continues to execute, including, presumably the call to the hidden input.

Then the $.ajax call completes and fires the success event, which puts said element on the page.

You can't do anything with the hidden element until after the $.ajax call is finished, so you should have your code dealing with that element in a function that is called in the success function of the $.ajax call.

Upvotes: 1

Related Questions