Member Avatar for waniejjang

Hi all,

I have a problem with javascript function. I already do a dynamic dropdown menu where user have to select a company name at dropdown. And after select the company name, an email address will appear in textbox.

The company table consists of Id, comp_name, email_add fields.

But I don't know the javascript to call the value of the dropdown. Below is the code that I have done:

<?
$query="SELECT * FROM company";
$result3 = mysql_query ($query); ?>
							<select name="company_name" id="company_name" class="formfield" onChange="showEmail();">
<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>
<?php										$c_id=$_POST['c_id'];					$sql="SELECT * FROM company WHERE Id=$c_id";
$r = mysql_query($sql);
							while($row=mysql_fetch_array($r))			
{							 $email_add = $row['email_add'];
 echo "<input name='email_add' id='email_add' type='text' size='40' value='$email_add'>";
							}

But I don't know how to call the function showEmail() with the selected id. I have try this:

function showEmail(){
	id=document.getElementById("company_name").value;
	
	if (id==""){
		document.getElementById("email_add").value="";
		return;
	}
	else {
		document.getElementById("email_add").value;
	}
}

so the situation in the system is when user select the company name at dropdown, email address will be appear in a textfield name "email_add" without submit button. Can anyone help me with the javascript?
Thank you.

Edited by waniejjang because: n/a
  • 2 Contributors
  • 2 Replies
  • 2K Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by waniejjang
Member Avatar for Airshow

Waniejjang,

There's several ways to do this. I'll give you the HTML and javascript. You will need to write the php.

1. Custom HTML Attributes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
{}
</style>

<script>
function showEmail(s){//s is the select element
	s.form.email_add.value = s[s.selectedIndex].getAttribute('email') || '';
}
</script>
</head>

<body>

<!-- Must have a form tag -->
<form>
<select name="company_name" id="company_name" class="formfield" onChange="showEmail(this);">
	<option value="">Please Select</option>
	<!-- email is a custom tag. This is legal XHTML but will not validate in many XHTML validators. -->
	<option value="c_0" email="aaa@hotmail.com">Company A</option>
	<option value="c_1" email="bbb@hotmail.com">Company B</option>
	<option value="c_2" email="ccc@hotmail.com">Company C</option>
</select>
<input name="email_add" id="email_add" type="text" size="40" value="">
</form>
</body>
</html>

2. Javascript Object

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
{}
</style>

<script>
var companyEmails = {
	//construct this object in a php loop using sql result.
	c_0: "aaa@hotmail.com",
	c_1: "bbb@hotmail.com",
	c_2: "ccc@hotmail.com"
};

//This is a static js function. No php required here.
function showEmail(s){ //s is the select element
	var c_id = s[s.selectedIndex].value;
	s.form.email_add.value = (c_id) ? companyEmails[c_id] : '';
}
</script>
</head>

<body>

<!-- Must have a form tag -->
<form>
<select name="company_name" id="company_name" class="formfield" onChange="showEmail(this);">
	<option value="">Please Select</option>
	<option value="c_0">Company A</option>
	<option value="c_1">Company B</option>
	<option value="c_2">Company C</option>
</select>
<input name="email_add" id="email_add" type="text" size="40" value="">
</form>

</body>
</html>

3. AJAX (untested)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
{}
</style>

<script>
// Cross-browser utility function which returns a request object.
function getXmlHttpRequest(){
	var http_request = false;
	try { http_request = new XMLHttpRequest(); }// Mozilla, Safari,...
	catch(e) {
		try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); }
		catch (e) {
			try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); }
			catch (e) {};
		}
	}
	return http_request;
}
function showEmail(s) { //s is the select element
	var xhr = getXmlHttpRequest();
	if(!xhr) {
		alert("Cannot create XMLHTTP instance");
		return false;
	}
	var c_id = s[s.selectedIndex].value;
	s.disabled = true;//Prevent further ajax calls until response (or error) is received
	var params = '?c_id=' + c_id;
	var url = 'fetchCompanyEmail.php';
	xhr.open('GET', url+params, true);
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4) {
			if (xhr.status == 200 || xhr.status == 0) {//xhr.status == 0 is for testing with local files.
				s.form.email_add.value = xhr.responseText;
			}
			else {
				alert("Error in obtaining company email address");
			}
			s.disabled = false;
		}
	}
	xhr.send(null);
}
</script>
</head>

<body>

<!-- Must have a form tag -->
<form>
<select name="company_name" id="company_name" class="formfield" onChange="showEmail(this);">
	<option value="">Please Select</option>
	<option value="c_0">Company A</option>
	<option value="c_1">Company B</option>
	<option value="c_2">Company C</option>
</select>
<input name="email_add" id="email_add" type="text" size="40" value="">
</form>
</body>
</html>

Use the AJAX version if you are unhappy about sending a full list of company emails to the client. They could be read with the browser's "view source".

You will need to write the file 'fetchCompanyEmail.php' which must read $_GET and return an email string without any html tags.

Airshow

Edited by Airshow because: n/a
Member Avatar for waniejjang

Hi airsow,

Thanks for ur help. It gives me idea on how to do it. Thanks :)

Wanie.

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.