Question

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!

Answer 1

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();