Cannot reference JS element: dynamically-generated dropdown list

[chrisnewman]

Some advice please

Using AJAX to implement a dropdown list inside an HTML webpage populated from a MySQL query on the serverside scripted in PHP. The PHP contains embedded HTML code and uses the output dlrective to return code to browser via AJAX

I positioned the SELECT dropdown list inside the HTML page using a <DIV ID='serversidephpscript.php> tag.

The dropdown works fine even for the dynamically rendered select list in question called Suburb.

i want to use a client side cookie to remember the field contents and menu selection between page refreshes.

The form specific JS functions submit and clear work fine for all of the hardcoded form elements into HTML page.

Can reference these elements in JS using the dot notation for all but the surbub. When I use the same for the dynamically generated I cannot find anyway to reference it using JS. I've tried dot notation. using document.GetElementById ('myid') and GetElementByName ('select' page). I know that's a bit of info to get across. I have used Firefox plugin called firebug to inspect content of form variables and they look fine for suburb and other elements.

Any pointers to other techniques would be appreciated. Or suggestions?

[mehh]

try

document.getElementById('myid')

. Its a lower case 'g' and there is no space before the brackets. I think that firebug also has a JS error read out. What is that telling you?

<edit>
Also by the second function I think you where attempting this:

document.getElementsByName('select')[0]

[chrisnewman]

Code snippet from picklist.php

$result = mysql_query ('SELECT distinct suburb FROM person order by suburb');
$out = '<select name="suburb" id="suburb_id" class="required"><option value="Any" selected="selected">Any</option>';

while ($row = mysql_fetch_assoc($result)) {
$out .= '<option value="' . $row['suburb'] . '">' . $row['suburb'] . '</option>';

}

$out .= '</select>';
mysql_free_result($result);
mysql_close($link);
echo "$out";

?>

// Code snippet form located in body of default.php

<form name="searchaction" method="get" onSubmit="return checkFields(this);">

// some form html

<select name="num">
<option value="15" selected="selected">15 results
<option value="30" >30 results
<option value="50" >50 results
<option value="100" >100 results
</select>

<td nowrap="nowrap" valign="top"><h6>Locality</h6></td>

// div tag to place output of picklist.php

<td><div id="listContainer"></div></td><td></td>

// remainder of form html

//Code snippet from page header of default.php to test value of selected item

var x = document.getElementById('suburb_id'); // assign value to local variable
alert ("Test value: " + x.selectedIndex);

I ran the script and Firefox returns this message "x has no properties"

Tried your second suggestion changed test to

var x = document.getElementsByName('select')[1]; // it's the second select element on page
alert ("Name: " + x.selectedIndex);

I ran the script and Firefox returns this message "x has no properties"

[mehh]

there is a differance between

document.getElementsByName('select')[1]

and

document.getElementsByTagName('select')[1]

. I assumed you where trying to access the element by the name attribute (

name="select"

) rather than the tag name (

<select>

).
Try

document.getElementsByTagName('select')[1]

[chrisnewman]

Sorry for the delay. Its 6.30 am here and just got up.

i set up a for loop to test for existence for both select elements

//Code snippet

var i=0;
var y="";
for (i=0; i<2; i++) {
var x = document.getElementsByTagName('select')[i];
y=y + ("Select type: " + x + " ");

}

The output is

Select type: [object HTMLSelectElement] Select type: undefined

[rocknbil]

Code snippet from page header of default.php to test value of selected item

This may be rudimentary, but since no one has asked - precisely when are you executing Javascript on the output? It may be simply that the elements you're referencing haven't been loaded yet.

Try moving your Javascript to the last thing on the page, or execute window.onload().

[chrisnewman]

When you say 'move Javascript to last thing on the page' what do you mean? You mean move something to the end of the header just before the </script> tag on the HTML page? what precisely?

[vincevincevince]

Moving the javascript to the last thing on the page means putting it just before the </body> tag

[chrisnewman]

i inserted the following at the end of the page

?> // end of last PHP section

<script language="JavaScript" type="text/javascript">

window.onload = init;

</script>

</BODY>

</HTML>

I have expensed with the previous <body onload= > structure and replaced it with the following function

function init () {

getDropDownList('picklist.php'); // retrieves picklist element from server
setupForm();
InitialiseErrorMessage();

}

</script>

</head>

<body>

anything else as before. I quit Firefox I relaunched FF.

The output is
Select type: [object HTMLSelectElement] Select type: undefined

Any other ideas? I notice that XMLHTTP returns a Code 4 when processing is complete. Is this likely to happen after the window.onload finishes execution?

[chrisnewman]

Finally fixed the problem. Apparently the dynamic element was not loaded in memory and therefore not referencable. I added a function call inside the XMLHTTP function that populates the list. That call was originally attached to the body onload event handler

Code snippet

function loadList() {

if (xmlhttp.readyState==4) { // tests for process completion when form element accessible

if (xmlhttp.status==200) {
  document.getElementById('listContainer').innerHTML=xmlhttp.responseText;
              
}

setupForm(); // function call sets form variables from cookie data
   }

Thanks again to Vince, mehh and rocknbil for their assistance