populate form based on drop down selection

Question

jpknoob

12 Years Ago

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.

javascript mysql php

4 Contributors
25 Replies
362 Views
5 Months Discussion Span
Latest Post 12 Years Ago Latest Post by cscheck

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

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'.

Edited 12 Years Ago by pritaeas because: n/a

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

If you get nothing your query fails, try:

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

Edited 12 Years Ago by pritaeas because: n/a

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

Run the php file by itself.

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

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

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

@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.

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.

jpknoob · Answer 1 · 2012-01-17T19:53:04+00:00

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

jpknoob · Answer 2 · 2012-01-17T20:14:20+00:00

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

jpknoob · Answer 3 · 2012-01-17T20:26:43+00:00

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?

jpknoob · Answer 4 · 2012-01-17T20:52:39+00:00

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 19 Posting Whiz in Training · Answer 5 · 2012-01-18T20:45:18+00:00

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

fobos 19 Posting Whiz in Training · Answer 6 · 2012-01-19T00:11:21+00:00

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 19 Posting Whiz in Training · Answer 7 · 2012-01-19T23:49:10+00:00

fobos 19 Posting Whiz in Training

12 Years Ago

Awwww no rep points

jpknoob · Answer 8 · 2012-01-20T18:49:23+00:00

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 19 Posting Whiz in Training · Answer 9 · 2012-01-20T19:46:11+00:00

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 · Answer 10 · 2012-01-20T20:05:15+00:00

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 19 Posting Whiz in Training · Answer 11 · 2012-01-20T20:08:16+00:00

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 · Answer 12 · 2012-01-20T20:15:01+00:00

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 19 Posting Whiz in Training · Answer 13 · 2012-01-20T20:24:37+00:00

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 · Answer 14 · 2012-01-20T20:33:28+00:00

lol, didn't even notice that!

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

fobos 19 Posting Whiz in Training · Answer 15 · 2012-01-20T20:38:02+00:00

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 · Answer 16 · 2012-01-20T20:41:57+00:00

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

fobos 19 Posting Whiz in Training · Answer 17 · 2012-01-20T20:49:26+00:00

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 19 Posting Whiz in Training · Answer 18 · 2012-01-20T20:55:01+00:00

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 · Answer 19 · 2012-01-20T21:10:20+00:00

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 0 Newbie Poster · Answer 20 · 2012-07-16T13:15:36+00:00

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