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

Recommended Answers

All 2 Replies

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.