Lim Guang Jian Lim Guang Jian - 1 year ago 34
Javascript Question

Ajax Load a html file and then add a value

Hello I have a file here called personal.html:

<form id="form_personal">
<div class="row" style="">
<div class="row">
<div class="small-12 columns">
<label class="">Username:</label>
<div class="small-12 columns">
<input type="text" name="username" id="us"/>

<div class="small-12 columns">
<button id="submit" type="submit" class="success button">Submit</button>

As you can see from the above code, I have an id called "us". So here is what I am trying to achieve via ajax but it does not work, my

<div class="atest"></div>

is actually in a file called profile.html. So I am including personal.html via AJAX load into profile.html.


url: 'some params, ignore this',
dataType: 'ignore this',
success: function(r)


function append()
// alert();

I am trying to put in the value of "test" into my

<input type="text" name="username" id="us"/>

which is in the personal.html file, How do I achieve that?

hsh hsh
Answer Source

you need to wait until personal.html loads completely,for that you should use complete call back of JQuery load method like this:

$('.atest').load('personal.html', function() {
    //this will run after personal.html has loaded.
    //Do your stuff here