PHP dynamic dropdown onChange problem

[waniejjang]

Hi, I'm really new to PHP and programming I can say. I really need your help.
Basically I'm doing a dynamic dropdown menu using PHP and MySQL and when user select the company name at dropdown, then email address will be populated at new textfield.
The company table consists of Id, company_name, email_add, and status_email fields.

I already done the dropdown menu but when select the company name, nothing happen. Here is the code:

<? 
$query="SELECT * FROM company";
$result3 = mysql_query ($query); ?>

<select name="company_name" class="formfield" onChange="showEmail();">
<?      
while($row=mysql_fetch_array($result3))                         {                                           $email_add=$row['email_add'];                               $id = $row['Id'];
$company_name = $row['company_name']; ?>

<option value="$id"><? echo $company_name; ?></option>
<? } ?>
</select>
<?   
$sql="SELECT * FROM company WHERE Id=$id";
                                            $sqlresult = mysql_query($sql);
                                            while($row=mysql_fetch_array($sqlresult))
                                            {                                       $email_add=$row['email_add'];
echo "<input name='email_add' type='text' value='$email_add'>"; 

}

Javascript codes:

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">

function showEmail()
{
if ($id=="")
  {
  document.getElementById("email_add").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("email_add").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","surveynew.php?id="+$id,true);
xmlhttp.send();
} 

Thanks in advance :)

[sudeepjd]

You are using AJAX (The XHTTP request) to do this. An Ajax request require 2 files. A sending file which you have here. And a receiving file. The receiving file process the request and sends it back to the sending file to be handled.

The below code should be part of your receiving file.

$sql="SELECT * FROM company WHERE Id=$id";
$sqlresult = mysql_query($sql);
while($row=mysql_fetch_array($sqlresult)){	 
	$email_add=$row['email_add'];
	echo "<input name='email_add' type='text' value='$email_add'>"; 
}

I would rather have you send back only the data required which in this case would be the e-mail ID. Which would make the code the following:

<?php
$id=$_GET['id'];
$sql="SELECT * FROM company WHERE Id=$id";
$sqlresult = mysql_query($sql);
$row=mysql_fetch_array($sqlresult)
echo $row['email_add'];
?>

See that I have removed the while loop above. If you are pulling data using a primary Key (ID) as in this case, only 1 result will come back, so a while loop is not required. This code when directly run in a browser with a ?id=1 parameter (to send the company_id should show the e-mail address.

You cannot give a $id which is a PHP variable in javascript. You need to convert it to a JavaScript variable to be sent to the receiving file. So your JavaScript should be:

<script type="text/javascript">

function showEmail(){
	id=document.getElementById("company_name").value;
	
	if (id==""){
		document.getElementById("email_add").value="";
		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("email_add").value=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","surveynew.php?id=" + id,true);
	xmlhttp.send();
}
</script>

You would also need to add in a text box with the name "email_add" to have the onreadystatechange function put the data into. Also change the surveynew.php to the name of the receiving file.

Try this out and let me know if you have any problems with the code. I'll be happy to help you out.

[waniejjang]

Hi Sudeep.. thanks for your reply and sorry for my late reply.
I already try your code, but still have a problem. Actually when user select the company name, email address will automatically appear in the textfield on the same page. Can I use ajax for this problem or you know other solutions?
Thanks :)

[sudeepjd]

If you are just want the e-mail address for the selected company, you can directly use JavaScript. Try out the code below, it may be what you are looking for.

<html>
<head>
<script type="text/javascript">
	function getEmail(){
		document.getElementById("compmail").value=document.getElementById("sel_comp").value;
	}
</script>
</head>
<body>
	<select name="sel_comp" id="sel_comp" size="1" onchange="getEmail()">
		<option value="[e-mail]">Company 1</option>
		<option value="[e-mail]">Company 2</option>
		<option value="[e-mail]">Company 3</option>
		<option value="[e-mail]">Company 4</option>
	</select>
	<input type="text" name="compmail" id="compmail" />
</body>
</html>

You can generate the dropdown and the company names and e-mail addresses above using PHP.

If you are looking at something a little more advanced like pulling more fields from the DB, then AJAX would help. Try out a JavaScript Framework like Mootools. It will make your job way easier, especially when it comes to AJAX.

If you still have a problem, post your code and specify the names of the files. It will make it much easier to help you out.

All the best.

[waniejjang]

Hi sudeep..thanks for ur reply. But the things that i need is not like that. I already manage to make the email address appear in a textbox. But theres still a problem where when I try to capture the company_id in order to save this data in another table. Here the code that I done to get the email address.

<? 
if($ques_id==11) 
{
	$query="SELECT * FROM company";
	$result3 = mysql_query ($query); ?>
                                           
	<select name="company_name" id="company_name" class="formfield" onChange="showEmail(this.value);">
	<option value="">Please Select</option>
<? 	      
	while($row=mysql_fetch_array($result3))
	{
		$c_id = $row['Id'];
		$company_name = $row['company_name'];
?>
		<option value="<? echo $c_id ?>"><? echo $company_name ?></option>
<? } ?>
	</select>
<? 
		$c_id=$_GET['c_id'];
		$sql="SELECT * FROM company WHERE Id=$c_id";
		$r = mysql_query($sql);
		$row = mysql_fetch_array($r);
?>
		<input name="email_add" id="email_add" type="text" size="40" value="<? echo $row['email_add']; ?>" class="formfield">
<? } ?>

Javascript that I did for onChange.

function showEmail(c_id)
{
	var url = "surveynew.php";
	if(c_id=='')
	{
		alert('Please Select the Company.');
		return false;
	}
	else
	{
    	url = url + "?c_id=" + c_id;
        window.location = url; 
    }		
}

So when user select company name, it will call the same page with the value of company name which is c_id . The email address had appear but when I submit this form and post the c_id value it did not save in database. Here is the code for update table with the c_id value.

include("db_connect.php");
db_connect();

$c_id = $_POST['c_id'];

$i = "UPDATE graduates SET email_add='$_POST[stud_email_add]', comp_id='$_POST[c_id]' WHERE studentIc=$id";
mysql_query($i) or die(mysql_error());

Did u know what is the problems? did my javascript codes was wrong?

[waniejjang]

sorry for the update table codes. Got some mistake. Here the new one:

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

$c_id = $_POST['c_id'];
$stud_email_add = $_POST['stud_email_add'];

$i = "UPDATE graduates SET email_add='$_POST[stud_email_add]', comp_id='$_POST[c_id]' WHERE studentIc=$id";
mysql_query($i) or die(mysql_error());
?>

[waniejjang]

guys, I already make it! thanks for ur help :) thanks~~