document.elementById returns null after jQuery loads external content with .load() or .post()

I am using jQuery to load some data inside a div, after posting some options. The returned data also contains a dynamically generated form. After the data has loaded, I need to get the form values using getElementById(name), but it does not work (returns null).

I have tried sending and loading the results with .load() and .post()

Example code:

//function to load data
function loadProductPrices(var1)
{
    //#thisProductPrices is the data container
    $('#thisProductPrices').load('filename.php', { 'var1': var1});
}

//function to get element value after previous function has been called 
//(this one is called by a button that is part of the content that has 
//been generated by the previous call) 
function getAndSaveValue(elementID)
{
    var thisValue = document.getElementById(elementID).value; // this returns null (?)
    // after I have the new value I will post and save, using jquery again.
}

The html generated by loadProductPrices() returns a list of items

PriceValue
<input type="text" id="price_productID" 开发者_开发问答value="PriceValue" />
<input type="button" value="save new price" onclick="getAndSaveValue(price_productID)" />
// the above button calls getAndSaveValue, in order to retrieve the new price 
//and save it...
//however it returns null.

Any suggestions? thnx!

There are two ways to fix the problem:

1. You have to wrap the parameter passed to getAndSaveValue in quotation marks (otherwise you pass the variable price_productID (which is undefined) to the function and not the string):

   onclick="getAndSaveValue('price_productID')"
   //                    ---^            ---^
   

2. Pass the element directly:

   onclick="getAndSaveValue(this)"
   

   then you have to change the function to:

   function getAndSaveValue(element) {
       var thisValue = element.value;
   }
   

Side note: At least for element retrieval and traversing, I would use jQuery consistently. In solution #2 it is not necessary, but in #1, you could change your code to:

onclick="getAndSaveValue('#price_productID')"
//                     ---^

and

var thisValue = $(elementId).val();

the price_productID is undefined...

instead of :

input type="button" value="save new price" onclick="getAndSaveValue(price_productID)"

use:

input type="button" value="save new price" onclick="getAndSaveValue('#thisProductPrices')"

Load runs asynchronously(it kind of runs "in the background"). If you do something like this it should work: //function to load data

function loadProductPrices(var1, callBack)
{
    //#thisProductPrices is the data container
    $('#thisProductPrices').load('filename.php', { 'var1': var1}, callBack);
}

//function to get element value after previous function has been called 
//(this one is called by a button that is part of the content that has 
//been generated by the previous call) 
function getAndSaveValue(elementID)
{
    var thisValue = document.getElementById(elementID).value; // this returns null (?)
    // after I have the new value I will post and save, using jquery again.
}

loadProductPrices('bla',function() {
    getAndSaveValue('elementId');
});

This will only call getAndSaveValue once you're sure filename.php is loaded.

I think you have to write the "getAndSaveValue" function end of jquery..

$(document).ready({

    function loadProductPrices(var1)
    {

        //#thisProductPrices is the data container

       $('#thisProductPrices').load('filename.php', { 'var1': var1});

    }

});

function getAndSaveValue(elementID){

    var thisValue=document.getElementById(elementID).value;

}

This is an excellent example of how working while being in need for sleep is not recommended. I am sorry, there was nothing wrong with the code I have shown you, the mistake was completely mine and it took me 10 seconds to realize after I had a good nap...

The functions above are a bit more complex in reality, and at some point I did the fatal mistake to alter the contents of the container with a 'loading please wait' message and then check for values... for elements that would not exist in the DOM anymore of course... :)

Please excuse me for this. I will mark everyone's answer as useful (they all, after all, in a right direction).

What did we learn from this? Sleep over a problem and then ask :)