getElementById returning 'undefined' in my AJAX attempt

Question

rad1964 0 Light Poster

13 Years Ago

I can not for the life of me get an ajax example/tutorial to work. I have tried dozens including prototype library and JQuery.

Here is my latest attempt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Easy</title>
<script type="text/javascript">
function getXMLHTTP() {
	var xmlhttp=false; 
	try{
		xmlhttp=new XMLHttpRequest();
	}
	catch(e) { 
	try{ 
		xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
	}
	catch(e){
	try{
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch(e1){
		xmlhttp=false;
	}
	}
}

return xmlhttp;
}

function habadashery(strURL) {         
     var req = getXMLHTTP(); 
     if (req) {
      req.onreadystatechange = function() {
      if (req.readyState == 4) { 
       if (req.status == 200) {                   
         document.getElementById("teamH").innerHTML=req.responseText;
		 alert(req.value);
      }
      else { 
         alert("There was a problem while using XMLHTTP:\n");
      }
     }            
    }        
    req.open("GET", strURL, true); 
    req.send(null);
   }
}
</script>
</head>
<body>
<?php 
include("sparkplug.php");
$result = mysql_query("SELECT DISTINCT (team) FROM member_data2011spring WHERE division='a' ORDER BY team ASC") 
or die(mysql_error());  
	$options=""; 
while($row = mysql_fetch_array( $result )) {
    $team=$row["team"];
    $options.="<option value=\"$team\">".$team;
} 
?>
<p>&nbsp;</p>
<form id="emsw" class="formFields" action="">
	<select class="differ" name="teamHome" id="teamH" onchange="habadashery('findplayer.php?teamH='+this.value)">
		<option value="0" selected="selected">Choose Home Team<?=$options?></option>
	</select>
    <div id="playerH"></div>
</form>
</body>
</html>

As you can see I am trying to alert the variable teamH but I keep getting an undefined in the alert. I also tried a static drop down and I received the same undefined alert.

Any suggestions as how I get that variable to contain my drop down choice?

thanks,
rad1964

javascript

4 Contributors
37 Replies
387 Views
1 Week Discussion Span
Latest Post 13 Years Ago Latest Post by rad1964

AleMonteiro 238 Can I pick my title?

13 Years Ago

You are alerting "req.value", witch doesen't exists. And you cannot set a <select> innerHTML, you must add options to it.

The PHP page should return just the data, without the HTML. You could do it with XML, JSON or with your own syntax.

If you in the future need to use more data then just the value and the text, i recommed that you use JSON.

Just for the select you can pass the data like this: value|data||value|data
Here an example

<html>
	<script type="text/javascript">
		
	var strData = '1|Option One||2|Option Two';

	function parseData(data)
	{
		var select = document.getElementById("select");
		var arrData = data.split("||");
	   
		for(var i=0; i < arrData.length; i++)
		{
			var arrValues = arrData[i].split("|");
			select.options[i] = new Option(arrValues[1], arrValues[0]);
		}
	}
	
	window.onload = function()
	{
		parseData(strData);
	}
	</script>
	
	<body>
		<select id="select" size="1"></select>
	</body>
</html>

AleMonteiro 238 Can I pick my title?

13 Years Ago

Because the tutorial PHP page returns the entire select and not only it's options.

This works:

myDiv.innerHTML = '<select><option value=1>Option One</option></select>'

But this does not work:

mySelect.innerHTML = '<option value=1>Option One</option>'

The tutorial is using the first one, but your code is trying the second.

AleMonteiro 238 Can I pick my title?

13 Years Ago

alert the req.responseText and see what's coming

AleMonteiro 238 Can I pick my title?

13 Years Ago

So, there you go.

You don't have a JS problem anymore, it's just not working because the ajax doesn't return what is should.

You got to resolve your PHP and MySQL problem, maybe it's missing some include in this page.

ddymacek 15 Posting Whiz

13 Years Ago

first off change line 66

while($row = mysql_fetch_array( $result )) {
$team=$row["team"];
$options.="<option value=\"$team\">".$team;
// change $options above to this:
$options.="<option value=\"$team\">".$team."</option>";
} 
// change line 77 from this:
    <div id="player"><select name="select"><option>Select Player</option></select></div>
to this:
<div id="player"></div>
//with nothing inside of it

as for findplayer.php you also need to change how it works, I didn't take the time to do the db stuff because I don't have any data anyway but here is a sample code of how to build up your <select> input box with options that you will return to your other page:

<?php

//get the q parameter from URL
$q=$_GET["teamH"];
// faking your data which should come from your query.
// you need to run your query here... 
if ($q == "Cubs") {
	$player[]="Rex Grossman";
	$player[]="Donald Driver";
	$player[]="Tony Gonzalez";
} else if ($q == "Chiefs") {
	$player[]="Todd Haley";
	$player[]="Charles Dickens";
	$player[]="Ray Lewis";
} else if ($q == "Rays") {
	$player[]="Bart Scott";
	$player[]="Trent Dilfer";
	$player[]="Ron Jawarski";	
} else if ($q == "Seahawks") {
	$player[]="Jack Black";
	$player[]="Pete Carroll";
	$player[]="Tim Davis";	
} else {
	$player[]="To be named later";
}

$html = '';
$html = "<select name='player_name' id='player_name'>";
if (strlen($q) > 0) {  // you can remove this, as you will have run a query and am assuming you have results.
	//while($row = mysql_fetch_array( $result )) {   <=== replace the foreach line below with this line
	foreach ($player as $key=>$value) {
		$html .= "<option value=".$value.">".$value."</option>";
		// and replace the $value tags above with $row['name_first'] . " " . $row['name_last']
	}	
}
// close your select box and return the html you built
$html .= "</select>";
//output the response
echo $html;
?>

for ease of use I faked the 'team' data on the first page as well by commenting out your query and simply adding in:

$teams = array("Cubs","Chiefs","Rays","Seahawks");
$options = '';
//while($row = mysql_fetch_array( $result )) {
foreach($teams as $team) {
	//$team=$team;
	$options.="<option value=\"$team\">".$team."</option>";
} 
?>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

rad1964 0 Light Poster · Answer 1 · 2011-09-13T07:12:38+00:00

Here is my findplayer.php in case it matters:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<?php 
	$teamH=intval($_GET['teamH']);
			 
	$result = mysql_query("select name_last, name_first from member_data2010fall where id = $teamH") 
			   or die(mysql_error()); 
			   
	$html="";
	
	$html='<select name="name"><option>Choose Player</option>';
		while($row=mysql_fetch_array($result)) { 
	$name_first=$row["name_first"];
	$name_last=$row["name_last"];
	$html.='<option value="'.$name_first.' '.$name_last.'">'.$name_first.' '.$name_last.'</option>';
	}
	$html.='</select>';
	echo $html;
?>
</body>
</html>

rad1964 0 Light Poster · Answer 2 · 2011-09-13T07:27:44+00:00

where id = $teamH"

is actually

where team = $teamH"

rad1964 0 Light Poster · Answer 3 · 2011-09-13T15:43:35+00:00

Well if that is all true, why does this tutorial exsist? http://roshanbh.com.np/2007/12/change-dropdown-list-options-values-from-database-with-ajax-and-php.html

rad1964 0 Light Poster · Answer 4 · 2011-09-14T02:20:39+00:00

SO this is what I originally had, it still doesn;t work though.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Easy 2</title>
<script type="text/javascript">
function getXMLHTTP() {
    var x = false;
    try {
        x = new XMLHttpRequest();
    }
    catch(e) {
        try {
            x = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(ex) {
            try {
                req = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch(e1) {
                x = false;
            }
        }
    }
    return x;
}



function habadashery(strURL)
    {         
     var req = getXMLHTTP(); 
     if (req)
     {
      req.onreadystatechange = function()
     {
      if (req.readyState == 4) { /
       if (req.status == 200) {                     
         document.getElementById('player').innerHTML=req.responseText;
      }
      else
      { 
         alert("There was a problem while using XMLHTTP:\n");
      }
      }            
      }        
    req.open("GET", strURL, true); 
    req.send(null);
     }
 }

</script>
</head>
<body>

<?php 
include("sparkplug.php");

$result = mysql_query("SELECT DISTINCT(team) FROM member_data2011spring WHERE division='a' ORDER BY team ASC") 
or die(mysql_error());  

$options=""; 

while($row = mysql_fetch_array( $result )) {
    $team=$row["team"];
    $options.="<option value=\"$team\">".$team;
} 
?>

<p>&nbsp;</p>
<form id="emsw" class="formFields" action="">
		<select class="differ" name="teamH" id="teamH" onchange="habadashery('findplayer.php?teamH='+this.value)">
			<option value="0">Choose Home Team<?=$options?></option>
		</select>
    <div id="player"><select name="select"><option>Select Player</option></select></div>
</form>

</body>
</html>

and the findplayer.php...

<?php 	
$teamH=intval($_GET['teamH']);
$result = mysql_query("select name_last, name_first from member_data2010fall where team = $teamH") 
			   or die(mysql_error()); 
?>

    <select name="select">
    <option>Choose Player</option>
    <? while($row=mysql_fetch_array($result)) { ?>
       <option value><?=$row['name_first']?></option>
    <? } ?>
    </select>

rad1964 0 Light Poster · Answer 5 · 2011-09-14T04:11:55+00:00

ok, so I got his alert in place:

alert(req.responseText);

And I get the alert that says:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<br />
<b>Warning</b>:  mysql_query() [<a href='function.mysql-query'>function.mysql-query</a>]: Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2) in <b>/hermes/bosweb/web211/b2110/apo.sfdadmin/sfda.org/reports/findplayer.php</b> on line <b>7</b><br />
<br />
<b>Warning</b>:  mysql_query() [<a href='function.mysql-query'>function.mysql-query</a>]: A link to the server could not be established in <b>/hermes/bosweb/web211/b2110/apo.sfdadmin/sfda.org/reports/findplayer.php</b> on line <b>7</b><br />
Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)

So I am not sure what this means. I know I connect to the database because my teams show up in the drop down. Is this a host issue?

rad1964 0 Light Poster · Answer 6 · 2011-09-14T04:31:17+00:00

I am currently chatting with my host technician they told me to use a different value for connecting, which I just put in and now NOTHING connects, lol stay tuned......

rad1964 0 Light Poster · Answer 7 · 2011-09-15T01:22:14+00:00

Tech responded with: I have noticed that database connection string is working fine at /testdb.php. It appears to be issue with your script . Please verify the script from your end.

Not sure where to go now :(

rad1964 0 Light Poster · Answer 8 · 2011-09-15T02:13:39+00:00

tech says its my code.. I told them no its your MySQL string... wtf!!!!!!

ddymacek 15 Posting Whiz · Answer 9 · 2011-09-15T02:21:17+00:00

clearly you are having more than one issue at this point. so make another test page, one that is very simple db connection, see if you can connect to your db and run a query and get data out. Can you do this without all the rest of the code... ?

rad1964 0 Light Poster · Answer 10 · 2011-09-15T02:52:27+00:00

rad1964 0 Light Poster

13 Years Ago

oh yeah easily.. working fine.

ddymacek 15 Posting Whiz · Answer 11 · 2011-09-15T03:01:18+00:00

so where are you at? are you getting errors, if so, post full codes again and we can go over every line of what you are looking at now.

rad1964 0 Light Poster · Answer 12 · 2011-09-15T04:21:56+00:00

ok so this is the problem, I had too many cooks in the kitchen... every person I talked to, chatted with or followed advice from, got me more and more into trouble.

I added back, yes back, my include statement to connect to the database, because I removed it and was told I could still connect since I made the connection on the easy.php page, so when I added my sparkplug.php (MySQL Connection file) back into the findplayer.php file, I actually got a return of data populating another drop down. I am going to mess with it for a few, I am sure I will have questions shortly, thank you.

ddymacek 15 Posting Whiz · Answer 13 · 2011-09-15T04:36:06+00:00

right on, I had missed a couple of the earlier posts when you were adding an removing codes and started with one near the bottom of page 1 posts with your code.
anyway... I'll check in tomorrow to see if you have further questions.

rad1964 0 Light Poster · Answer 14 · 2011-09-15T05:37:11+00:00

OK so I have full population of 2 drop downs both have the correct value and name.
Where I am failing on this current bit of code is the filtering portion.

I pass the onchange event

onchange="homeTeam('findplayer.php?teamH='+this.value)"

to the findplayer.php page, set it

$teamH=intval($_GET['teamH']);

and use teamH in MySQL Query

WHERE team = $teamH

to filter ONLY the players from that team.

Odd thing is for team '501 Heat' which is the first choice of a team (right below the Choose a team option), it works, for all other teams, I get all A League players.
Should be only A League players ON THAT team chosen.

I assume my next step is to find out if the value for teamH actually receives the choen value. How do I do that?

rad1964 0 Light Poster · Answer 15 · 2011-09-15T05:40:02+00:00

Here is the full easy.php code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Easy 2</title>
<script type="text/javascript">
function getXMLHTTP() {
    var x = false;
    try {
        x = new XMLHttpRequest();
    }
    catch(e) {
        try {
            x = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(ex) {
            try {
                req = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch(e1) {
                x = false;
            }
        }
    }
    return x;
}

function homeTeam(strURL) {         
     var req = getXMLHTTP(); 
     if (req) {
      req.onreadystatechange = function() {
      if (req.readyState == 4) { 
       if (req.status == 200) {                   
         document.getElementById("player").innerHTML=req.responseText;
		 <!--alert(req.responseText);-->
      }
      else { 
         alert("There was a problem while using XMLHTTP:\n");
      }
     }            
    }        
    req.open("GET", strURL, true); 
    req.send(null);
   }
}
</script>
</head>
<body>

<?php 
// Make the MySQL Connection
include("sparkplug.php");

// Retrieves distinct names of the A League teams from the 2011 spring membership data from the "member_data2011spring" table and sort by team name, a to z
$result = mysql_query("SELECT DISTINCT(team) FROM member_data2011spring WHERE division='a' ORDER BY team ASC") 
or die(mysql_error());  

$options=""; 

while($row = mysql_fetch_array( $result )) {
    $team=$row["team"];
    $options.="<option value=\"$team\">".$team;
} 
?>

<p>&nbsp;</p>
<form id="emsw" class="formFields" action="">
	<div style="float:left;">
    	<select class="differ" name="teamH" id="teamH" onchange="homeTeam('findplayer.php?teamH='+this.value)">
			<option>Choose Home Team<?=$options?></option>
		</select>
    </div>
    <div id="player" style="float:left;"><select name="select"><option>Select Player</option></select></div>
</form>

</body>
</html>

and here is the full findplayer.php code:

<?php 	
$teamH=intval($_GET['teamH']);
include('sparkplug2.php');
$result = mysql_query("SELECT name_last, name_first FROM member_data2010fall WHERE team = $teamH AND division = 'a' ORDER BY id") 
			   or die(mysql_error()); 
?>
<select name="select">
    <option>Choose Player</option>
<? while($row=mysql_fetch_array($result)) { ?>
    <option value="<?=$row['name_first'].' '. $row['name_last']?>"><?=$row['name_first'].' '. $row['name_last']?></option>
<? } ?>
</select>

Taywin 312 Posting Virtuoso · Answer 16 · 2011-09-15T08:29:57+00:00

Not sure if you need to add a quotation around the $teamH??? Haven't done PHP for over 4 years...

ddymacek 15 Posting Whiz · Answer 17 · 2011-09-15T20:49:25+00:00

you can either do a javascript alert right before you call findplayer.php
or do an echo after you set your $teamH=intval($_GET); variable

echo $teamH;

right before you call your query to see what value was passed in for teamH.
I don't know why it would work for the first one but not the others, I would expect the query to not return anything if a team was not passed in that was actually in the db, so to get all players is confusing at this point

rad1964 0 Light Poster · Answer 18 · 2011-09-16T04:53:24+00:00

ok so I put echo $teamH; after the

$teamH=intval($_GET['teamH']);

I got the value 0

Which tells me that it is somehow passing the value of the very first choice which is "Choose Home Team".

<option>Choose Home Team</option>
<option value="510 Heat">510 Heat</option>

which is the only value that would equal 0 as all other values have the A teams proper name.

When the Query runs it returns all players of A League because teamH=0.

I guess...

rad1964 0 Light Poster · Answer 19 · 2011-09-16T04:56:04+00:00

<select class="differ" name="teamH" id="teamH" onchange="homeTeam('findplayer.php?teamH='+this.value)">
			<option>Choose Home Team<?=$options?></option>
		</select>

Somewhere in the code above is the answer I feel. Perhaps the this.value in the onchange event is only giving the value assigned to Choose Home Team.

rad1964 0 Light Poster · Answer 20 · 2011-09-16T08:03:43+00:00

I replaced some code in easy.php to generate the original (1st) drop down.

$result = mysql_query("SELECT DISTINCT(team) FROM member_data2011spring WHERE division='a' ORDER BY team ASC") 
or die(mysql_error());  


$options=""; 
$foo1="<select class=\"differ\" name=\"teamH\" id=\"teamH\" onchange=\"homeTeam('findplayer.php?teamH='+this.value)\">";
	while($row = mysql_fetch_array( $result )) {
$team=$row["team"];
$options.="<option value=\"$team\">".$team;
$foo2="</select>";
} 
?>

<p>&nbsp;</p>
<form id="emsw" class="formFields" action="">
	<div style="float:left;">
    	<?php echo $foo1; echo $options; echo $foo2; ?>
    </div>
    <div id="player" style="float:left;"><select name="select"><option>Select Player</option></select></div>
</form>

So the variable being passed is 0 for everything except "510 Heat". I looked at the team column in MySQL and it is varchar(40), if that means anything.

rad1964 0 Light Poster · Answer 21 · 2011-09-16T08:10:04+00:00

Here is a screen shot of what I am seeing in Firebug (the value alert of teamH is what you see in between the 2 drop downs. Only 510 Heat has a value other then "0" which is "510" but not "510 Heat" and this "510" value actually filters my Query correctly and is the only one to do so. Odd.

[IMG]http://radmedia.org/ss_easyphp.jpg[/IMG]

Taywin 312 Posting Virtuoso · Answer 22 · 2011-09-16T17:47:34+00:00

I am guessing (again) there may be 2 problems here.

One is that PHP doesn't convert string with special character in the middle as a string. For example, "510 Heat" as you said would be sent via URL as "findplayer.php?teamH=510 Heat" which causes the problem. What you may need to do is to convert the string into a string that can be sent via URL (something like findplayer.php?teamH=510%20Heat).

The other problem which definitely is a real problem is that your findplayer.php retrieves the value as integer, not string. I can't tell you how to ensure that the value coming in is a string...

ddymacek 15 Posting Whiz · Answer 23 · 2011-09-16T21:02:14+00:00

it's the intval. remove it. you are not expecting an integer, intval() is trying to convert the string '510 Heat' to a number, or any other string you are passing in, so remove the intval($teamH) call.
taywin, is also correct in that you may need to urlencode the string before sending it over in your ajax call. in your ajax, alert your url that you are passing in before sending it over to see what you think you are passing is correct. then when you get it in findplayer echo it out again to see if you have expected data.

rad1964 0 Light Poster · Answer 24 · 2011-09-17T00:56:58+00:00

I removed the intval (which was recommended as a fix for some bug in IE...) and then I added the urlencode to the onchange event.. which I am guessing is not the correct place, since everything remained the same. Also when I removed the intval, nothing changed in my alert.

homeTeam('findplayer.php?urlencode(teamH)='+this.value)