populate form based on drop down selection

[jpknoob]

Hello all, I have a drop down that is populated using php and mysql. when the user makes a selection, I run the function showUser(), however, nothing happens when i make a selection, can anyone help with what I'm doing wrong?

The JS

<script type="text/javascript">
	function showUser(str)
	{
	if (str=="")
	  {
	  document.getElementById("txtHint").innerHTML="";
	  return;
	  }
	if (window.XMLHttpRequest)
	  {// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	  }
	else
	  {// code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	xmlhttp.onreadystatechange=function()
	  {
	  if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
		document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
		}
	  }
	xmlhttp.open("GET","getuser.php?q="+str,true);
	xmlhttp.send();
	}
</script>

The PHP script

<?php
//Include connection to database
require_once 'connect.php';

$q=$_GET["q"];

$sql="SELECT * FROM table WHERE id = '".$q."'";

$resultab = mysql_query($sql);

echo "<table border='1'>
<tr>
<th>id</th>
<th>Kinase</th>
<th>Kinase Sku</th>
<th>Antibody</th>
<th>Antibody2</th>
<th>Tracer</th>
<th>Tracer Conc</th>
</tr>";

while($row = mysql_fetch_array($resultab))
  {
  echo "<tr>";
  echo "<td>" . $row['id'] . "</td>";
  echo "<td>" . $row['kinase'] . "</td>";
  echo "<td>" . $row['kinase_sku'] . "</td>";
  echo "<td>" . $row['antibody'] . "</td>";
  echo "<td>" . $row['antibody2'] . "</td>";
  echo "<td>" . $row['tracer'] . "</td>";
  echo "<td>" . $row['tracer_conc'] . "</td>";
  echo "</tr>";
  }
echo "</table>";
?>

The HTML

<form action="" method="post">
	<fieldset>
	
		<!-- RUN QUERY TO POPULATE DROP DOWN -->
		<?php
		$query = "SELECT * FROM kbaCalc
					ORDER by kinase";
		
		$result = mysql_query($query) or die(mysql_error());
		$num = mysql_num_rows($result); //number of messages
		
		while($row = mysql_fetch_array($result))	{
		
			$kinase = $row['kinase'];
			$tracer_conc = $row['tracer_conc'];
			
			$options.= "<option value='$id'>".$kinase;
			
		}
		
		echo "</select>";
		
		?>
                
                <select name="users" onchange="showUser(this.value)">
	            <option value="">Select a Kinase:</option>
	            <?=$options?>
                </select>

                <div id="txtHint">Stuff here!</div>

         </fieldset>
</form>

If I make a normal html select dropdown, the script works, however, when I populate it using php, I get nothing.

Any help/advice would be awesome.

[pritaeas]

Your option tag is not closed, not sure if that will cause problems.

Your PHP script uses a table named 'table', while the other one uses 'kbaCalc'.

[jpknoob]

Hi, thanks for the response.

The table name in the php script was a typo.

I have update the $options to;

$options.= "<option value='$id'>$kinase</option>";

but still get nothing showing

[pritaeas]

If you get nothing your query fails, try:

$resultab = mysql_query($sql) or die(mysql_error());

[jpknoob]

i have error_reporting(E_ALL & ~E_NOTICE); at the start of my code, but don't get anything back

[pritaeas]

Run the php file by itself.

[jpknoob]

If I run the file by itself, the script runs and outputs the table with no content. When I add a value to $q, I get the results I expect.

Any other suggestions?

[pritaeas]

If the script is fine, then it must be the javascript. Debug that (compare similar thread).

[jpknoob]

The Javascript works fine if I take out the php that populates the drop down. If i use;

<select name="users" onchange="showUser(this.value)">
   <option value="">Select a Kinase:</option>
   <options value="1">1</option>
   <options value="2">2</option>
   <options value="3">3</option>
   <options value="4">4</option>
</select>

the whole thing works as it should, very frustrating!

[fobos]

If your not getting anythinng in the drop down box, try this.

You: //Changes are in RED

while($row = mysql_fetch_array($result)) { 			
    $kinase = $row['kinase'];			
    $tracer_conc = $row['tracer_conc']; 			
    $options.= "<option value='$id'>".$kinase; 
    // You do not have ID defined in $row..		
} 		
echo "</select>"; <-- Why is this here? 		
?>                 
<select name="users" onchange="showUser(this.value)">	            
<option value="">Select a Kinase:</option>	            
<?=$options?> // Never write in shorthand. Confuses with XML
</select>

New:

$row = mysql_fetch_array($result);			
$kinase = $row['kinase'];			
$tracer_conc = $row['tracer_conc']; 			
$options = "<option value='".$row['id']."'>$kinase</option>"; 					
?>                 
<select name="users" onchange="showUser(this.value)">	            
<option value="">Select a Kinase:</option>	            
<?php echo $options ?>
</select>

I changed while($row = mysql_fetch_array($result)) { to $row = mysql_fetch_array($result); because when you had it your way, that only queries in the curly brackets. The other way, you can pass variables thru out the page. If im wrong, sorry. This is what i always do. I hope this helps

[pritaeas]

@fobos: If you remove the while loop, he'll get only one option. There are supposed to be more. The while loop should be left as-is.

[fobos]

lol thanks for catching that.. my mistake

<form action="" method="post">	
    <fieldset> 		
    <select name="users" onchange="showUser(this.value)">	            
        <option value="">Select a Kinase:</option>
        <!-- RUN QUERY TO POPULATE DROP DOWN -->		
        <?php		
        $query = "SELECT * FROM kbaCalc ORDER by kinase"; 		
        $result = mysql_query($query) or die(mysql_error());		
        /*$num = mysql_num_rows($result);*/ 		
        while($row = mysql_fetch_array($result))	{ 			
            echo "<option value='".$row['id']."'>".$row['kinase']."</option>"; 
        } 
        ?> 	                           
    </select>                 
    <div id="txtHint">Stuff here!</div>          
    </fieldset>
</form>

I knew something was up..lol. Now, this will populate the option.

[fobos]

Awwww no rep points

[jpknoob]

The drop down populates just fine, my problems are when I select from the drop down, the returned table from the php script only shows the headers and not the contents.

If I remove the php code that populates the drop down and replace it with html, the script runs fine and I get the populated table.

[fobos]

Ok, well 2 things that you need to try for me. We are going to do some error checking.
On your php page that gets called, instead of

$q  = $_GET['q'];

Try puutting a number in its place and run the page by its self.

$q = "1";

If that works, then we will move on to the javascript. If not, then redo your query statement and re run the statement with the same code from above.

/* Old */
$sql="SELECT * FROM table WHERE id = '".$q."'";
/* New */
$sql="SELECT * FROM table WHERE id = '$q'";

Now the javascript.

//try putting in an alert in the beginning.
<script type="text/javascript">
function showUser(str) {
    if (str=="") {
        document.getElementById("txtHint").innerHTML="";
        return;
    }
    // Alert
    alert(str);
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) (
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","getuser.php?q="+str,true);
    xmlhttp.send();
}
</script>

if the string doesnt get passed, try this.

//try putting in an alert in the beginning.
<script type="text/javascript">
function showUser() {
    var xmlhttp; // You forgot to add this.
    var1 = document.getElementById("users").value;
    alert(var1);
    if(var1==""){
        document.getElementById("txtHint").innerHTML = "";
        return false;
    }
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) (
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","getuser.php?q="+str,true);
    xmlhttp.send();
}
</script>

Make sure you add the id="users" to your select.

<select name="users" id="users" onchange="showUser()">

I know this is alot, but i want you to try this and let me know. Its just kinda funny that you dont get anything when you use php for your options, you get nothing, but html shows results.

[jpknoob]

Have ran your edits.

The php file runs no probs when I insert a value into $q.

Both alerts show a box with a single number in it.

Thank you for the asistance btw, it is greatly appreciated.

[fobos]

No problem man. there was an update on my thread with a couple of things. 1) you needed to add the var xmlttp, so i did that in the second to last code block. Also, added the select code block. So does it work now?

[jpknoob]

Unfortunately not. I am using this;

<script type="text/javascript">
function showUser(str)	{
var xmlhttp; // You forgot to add this.
var1 = document.getElementById("users").value;
alert(var1);
if (var1=="")	{
	document.getElementById("txtHint").innerHTML="";
	return;
}

// Alert
alert(str);

if (window.XMLHttpRequest)	{
// code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp=new XMLHttpRequest();
}

else	{// code for IE6, IE5
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function()	{
	if (xmlhttp.readyState==4 && xmlhttp.status==200)	{
		document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
	}
}

xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>

When i select from the drop down, i get an error window with the number 1, then a second window with the same number and finally the table is returned without the contents.

[fobos]

lol thats because you have the 2 alerts in there.

function showUser(str) {
    var xmlhttp; // You forgot to add this.
    // Take out
    var1 = document.getElementById("users").value;
    alert(var1);  
    if (str=="")	{	
        document.getElementById("txtHint").innerHTML="";	
        return;
    } 
// Alert
alert(str);// Take this out also.

Now it should be fine.

[jpknoob]

lol, didn't even notice that!

Unfortunately, the end result is still the same, see attached image.

[fobos]

did you use this one?

//try putting in an alert in the beginning.
<script type="text/javascript">
function showUser() {
    var xmlhttp; // You forgot to add this.
    var1 = document.getElementById("users").value;
    if(var1==""){
        document.getElementById("txtHint").innerHTML = "";
        return false;
    }
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) (
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","getuser.php?q="+var1,true);
    xmlhttp.send();
}
</script>

with this

<select name="users" id="users" onchange="showUser()">

[jpknoob]

Have just copied your code across in case i missed something and now nothing happens after i select from the drop down

[fobos]

change var1 to user that way its not being confused as a variable like xmlhttp

var1 = document.getElementById("users").value;
to 
user = document.getElementById("users").value;
and change
if(var1==""){
to
if(user==""){
and change
xmlhttp.open("GET","getuser.php?q="+var1,true);
to
xmlhttp.open("GET","getuser.php?q="+user,true);

[fobos]

Well you go results with your code, until you used mine. Here is yours that worked, just took out the alerts.

<script type="text/javascript">
function showUser(str)	{
var xmlhttp; // You forgot to add this.
var1 = document.getElementById("users").value;
if (var1=="")	{
	document.getElementById("txtHint").innerHTML="";
	return;
}

if (window.XMLHttpRequest)	{
// code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp=new XMLHttpRequest();
}

else	{// code for IE6, IE5
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function()	{
	if (xmlhttp.readyState==4 && xmlhttp.status==200)	{
		document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
	}
}

xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>

[jpknoob]

I am an idiot!

i just realised that in the following code;

<!-- RUN QUERY TO POPULATE DROP DOWN -->
<?php
$query = "SELECT * FROM kbaCalc ORDER by kinase";
$result = mysql_query($query) or die(mysql_error());

/*$num = mysql_num_rows($result);*/
while($row = mysql_fetch_array($result)) {

	echo "<option value='".$row['id']."'>".$row['kinase']."</option>";
}
?>

I had the id as the option and was supposed to have the name!

All works and many many thanks for the help and advice!

[cscheck]

Anyway I could get the final product of this code sans the db connection info? I am really struggling with implementing something very very similar and could most likely figure it out if I could look at the final version of the code. (html, js, & php)

Thanks,

Cheers