Dynamically populate text box through drop down box

This site is best viewed in a modern browser with JavaScript enabled.

Dynamically populate text box through drop down box

bhoomika

i want to populate text box on selection of an option from drop down box

as user select an option from drop down box the text box should be populated with that same option text automatically

is it possible to do it in java script or php
drop down box is populated with a "Journal" dababase table
and in option value i m passing its id.
if its possible to pass only id to the text box using java script or php.

i will manage rest of the things.

please help me

thanks in advance.

Bhoomika

Pittimann

Hi!

Just a simple example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<form name="theform" onsubmit="CheckForm()">
<select name="myOptions" onchange="document.theform.showValue.value=this.value">
<option value="">Please select an option</option>
<option value="I am the first option">I am the first option</option>
<option value="I am the second option">I am the second option</option>
<option value="I am the third option">I am the third option</option>
<option value="I am the forth option">I am the fourth option</option>
</select>
<input type="text" name="showValue"><br>
</form>
</body>
</html>

By the way: doing that with PHP would mean to send data back to the server, having to be dealt with on the server and then send the populated form to the client. I don't think, that is very practical...

Cheers - Pit

JPM

Hi Pitmann
Is it possible to send me the code for the dropdown menu to populate more than one or two textbox fields.

I have 10 stores and I want the user to select a store.
Then the Textfield must be filled with the selected store's details

Hope you can help me

JMRKER

Alternative method ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
var StoreDetails = [
  ['Please select an option',''],
  ['Store 1','Store 1 Details'],
  ['Store 2','Store 2 Details'],
  ['Store 3','Store 3 Details'],
  ['Store 4','Store 4 Details'],
  ['Store 5','Store 5 Details'],
  ['Store 6','Store 6 Details'],
  ['Store 7','Store 7 Details'],
  ['Store 8','Store 8 Details'],
  ['Store 9','Store 9 Details'],
  ['Store 10','Store 10 Details']  // Note: no comma at end of last entry
];
function Setup(TA) {
  var str = "<select onchange=\"StoreInfo('"+TA+"')\">";
  for (var i=0; i<StoreDetails.length; i++) {
    str += '<option value="'+StoreDetails[i][1]+'">'+StoreDetails[i][0]+'</option>';
  }
  str +='</select>';
  str +='<input id="Store'+TA+'" type="text"><br>';
  document.write(str);

}
function StoreInfo(TA) {
  var IDS = 'Store'+TA;
	alert(IDS+'\n'+(Number(TA)))
  document.getElementById(IDS).value = StoreDetails[TA][1];
}
</script>
</head>
<body>
<form name="theform" onsubmit="CheckForm()">
<script type="text/javascript">
Setup('1');
Setup('2');
Setup('3');
Setup('4');
Setup('5');
Setup('6');
Setup('7');
Setup('8');
Setup('9');
Setup('10');
</script>
</form>
</body>
</html>

JPM

Hi JRKER
Thank you for the response, I checked it out and it is almost right.
What I want is 1 Dropdown for all the stores and 5 text boxes for this one dropdown.
So when the user selects a store it fill the 8 text boxes with that stores details.
It must also clear the text boxes and fill it with new store info if the user select a different store from the drop down.
So I think It must contain something like

function Clear_Form() {
document.form1.txtName.value="";
document.form1.txtAddress1.value="";
document.form1.txtAddress2.value="";
document.form1.txtAddress3.value="";
document.form1.txtTel.value="";
document.form1.txtFax.value="";
document.form1.txtEmail.value="";
document.form1.txtWebpage.value="";
}

I hope this makes sense
Thanks

JMRKER

I hope this makes sense

Nope ...
1 Dropdown
... controls 5 text boxes (???)
... fills 8 textboxes (assume txtName thru txtWebpage)

Clear and fill with different information, OK, but the above doesn't add up to me.

JPM

Sorry
Ignore the clear function
1 Drop down with 8 text boxes
When user selects a new store it must fill the text boxes with new array of that selected stores details. ie. Address1, Address2, Address3, Tel, Fax, Email, Webpage etc.
Hope this is more clear

JMRKER

Try this variation ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">

// Format of StoreDetails()
// Name,Addr1,Addr2,Addr3,Phone,FAX,Email,Webpage
var StoreDetails = [
  ['Please select an option','','','','','','','',''],
  ['Store 1','Name 1','Addr 1','Addr 1','Addr 1','Phone 1','FAX 1','Email 1','Webpage 1'],
  ['Store 2','Name 2','Addr 2','Addr 2','Addr 2','Phone 2','FAX 2','Email 2','Webpage 2'],
  ['Store 3','Name 3','Addr 3','Addr 3','Addr 3','Phone 3','FAX 3','Email 3','Webpage 3'],
  ['Store 4','Name 4','Addr 4','Addr 4','Addr 4','Phone 4','FAX 4','Email 4','Webpage 4'],
  ['Store 5','Name 5','Addr 5','Addr 5','Addr 5','Phone 5','FAX 5','Email 5','Webpage 5'] // Note: no comma
];
function Setup(TA) {
  var str = "<select id='Store' onchange='StoreInfo()'>";
  for (var i=0; i<StoreDetails.length; i++) {
    str += '<option value="'+StoreDetails[i].join('|')+'">'+StoreDetails[i][0]+'</option>';
  }
  str +='</select>';
  document.write(str);

}
function StoreInfo() {
  var sel = document.getElementById('Store').selectedIndex;
  var tmp = [];  tmp.push(sel);
  for (var i=1; i<9; i++) { tmp.push(StoreDetails[sel][i]); }
  document.getElementById('txtName').value = tmp[1];
  document.getElementById('txtAddr1').value = tmp[2];
  document.getElementById('txtAddr2').value = tmp[3];
  document.getElementById('txtAddr3').value = tmp[4];
  document.getElementById('txtPhone').value = tmp[5];
  document.getElementById('txtFAX').value = tmp[6];
  document.getElementById('txtEmail').value = tmp[7];
  document.getElementById('txtWebpage').value = tmp[8];
}
</script>
</head>
<body>
<form name="theform" onsubmit="CheckForm()">
<script type="text/javascript">Setup();</script>
<table border="0">
<tr><td>Name:</td><td><input type="text" id="txtName" size="30" value=""></td></tr>
<tr><td>Address 1:</td><td><input type="text" id="txtAddr1" size="30" value=""></td></tr>
<tr><td>Address 2:</td><td><input type="text" id="txtAddr2" size="30" value=""></td></tr>
<tr><td>Address 3:</td><td><input type="text" id="txtAddr3" size="30" value=""></td></tr>
<tr><td>Phone:</td><td><input type="text" id="txtPhone" size="30" value=""></td></tr>
<tr><td>FAX:</td><td><input type="text" id="txtFAX" size="30" value=""></td></tr>
<tr><td>Email:</td><td><input type="text" id="txtEmail" size="30" value=""></td></tr>
<tr><td>Webpage:</td><td><input type="text" id="txtWebpage" size="30" value=""></td></tr>
</table>
</form>
</body>
</html>

JPM

Fantastic JMKER
It is exactly what I was looking for, If I get stuck with anything I will let you know
Thank you so much.

JMRKER

You're most welcome.
Glad I was able to help after I could understand the problem.
Good Luck!

JPM

JMRKER Your code Rock
It is really easy to understand and straight forward
I like coding like yours
Thanks again

chuckcastle

This looks like something I'm currently working on. The twist on my issue is that I want to include PHP. Some information:
1. I have a database with a "customers" table
2. I'm using AJAX to "suggest" (a la Google) a name being entered in a textbox
3. If a match is found, and the name is clicked, the data should automatically be entered in the remaining textboxes (currently it's only working for the name field)

Here's what I have:

<table id="txtHint" cellpadding="0" cellspacing="0"></table>

<h1>Add new Work Order</h1>
<form name="addwo" action="<?php echo $SCRIPT_NAME ?>" method="post">

<table>
	<tr>
		<td>Name</td>
		<td><input type="text" name="txtClient" onkeyup="showHint(this.value)" onfocus="style.background='#99CCCC'" onblur="style.background='#FFFFFF'" /></td>
	</tr>
	<tr>
		<td>Address</td>
		<td><input type="text" name="address" onfocus="style.background='#99CCCC'" onblur="style.background='#FFFFFF'" /></td>
	</tr>

And the javascript:

var xmlHttp

function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 
var url="gethint.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} 

function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{ 
document.getElementById("txtHint").style.visibility="visible";
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}

function closeMe()
{
document.getElementById('txtHint').style.visibility='hidden';
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

And the PHP:

<?php

require("config.php");

$db = mysql_connect($dbhost, $dbuser, $dbpassword);
mysql_select_db($dbdatabase, $db);

header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

$q = $_GET["q"];
$sql = "SELECT * FROM customers WHERE name LIKE '".$q."%' ORDER BY name ASC LIMIT 10;";
$res = mysql_query($sql);
$row = mysql_num_rows($res);

if($row == 0) {
	echo "<tr><td>No matches</td></tr>";
} else {
	while($a = mysql_fetch_array($res)) {
		echo "<tr class='normal' onMouseOver=\"this.className='highlight'\" onMouseOut=\"this.className='normal'\" onClick='addwo.txtClient.value=\"".$a['name']."\";closeMe();'><td>".$a['name']."</td></tr>";
	}
}
	echo "<tr><td class='close'><span onClick='closeMe();'>close</span></td></tr>";
?>

The HTML above is obviously not the whole file but I hope it's enough to give you a good picture of what the rest of the form may look like. I'd like to be able to pass the $a['address'] string from the PHP into the HTML file and set it as the value of the "address" textbox but am quickly finding that it's not very easy to do.

Suggestions?

JMRKER

I, personally, don't know enough about PHP to help. :o
I don't have access to the language on my server.

Suggestion ... Might try postiing to PHP forum as a new thread
carrying over the JS that you believe you can use to solve your problem.
Come back if a JS problem rears its' ugly head...

chuckcastle

Thanks for the quick response. I've taken your advise and posted in the PHP forum (http://www.webdeveloper.com/forum/showthread.php?p=985732#post985732).

I just noticed that what I do have (make hidden table with suggested names visible onkeydown) works only in FF and not IE, any idea why?

-chuck

JPM

Hi JMRKER
Remeber that code you gave me for the diffirent stores Below is it but I've added the sum calculation of two text field you helped someone on another thread.
The problem is that whrn I select the dropdown boxes it does not actually calculate the values . I'm just thinking now that it probably needs a focus of some sort. Can you fix this for me please

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

////////////////////////////////////////////////////////////////////////////////////////
// Cities
////////////////////////////////////////////////////////////////////////////////////////
// Name,Line1,Line2,Line3,Line4,Line5,Dell,Tel,FAX,FaxEmail,Email,Webpage
var CityCourierCost = [
['Please select your City',''],
['Cape Town','200'],
['JHB','600']
//['Witbank','amount']
];
function SetupCity(TA) {
var str = "<select id='City' onchange='CityInfo()'>";
for (var i=0; i<CityCourierCost.length; i++) {
str += '<option value="'+CityCourierCost.join('|')+'">'+CityCourierCost[0]+'</option>';
}
str +='</select>';
document.write(str);
}

function CityInfo() {
var sel = document.getElementById('City').selectedIndex;
var tmp = []; tmp.push(sel);
for (var i=1; i<2; i++) { tmp.push(CityCourierCost[sel]); }
document.getElementById('CourierCost').value = tmp[1];

}

////////////////////////////////////////////////////////////////////////////////////////
// Products
////////////////////////////////////////////////////////////////////////////////////////

var ProductItemCost = [
['Please select your Product',''],
['Alpine','1200'],
['Surento','800']
//['Witbank','amount']
];
function SetupProduct(TA) {
var str = "<select id='Product' onchange='ProductInfo()'>";
for (var i=0; i<ProductItemCost.length; i++) {
str += '<option value="'+ProductItemCost.join('|')+'">'+ProductItemCost[0]+'</option>';
}
str +='</select>';
document.write(str);
}

function ProductInfo() {
var sel = document.getElementById('Product').selectedIndex;
var tmp = []; tmp.push(sel);
for (var i=1; i<2; i++) { tmp.push(ProductItemCost[sel]); }
document.getElementById('ProductCost').value = tmp[1];

}

////////////////////////////////////////////////////////////////////////////////////////
// Calculation
////////////////////////////////////////////////////////////////////////////////////////

function calc(A,B,SUM) {
var one = Number(A);
if (isNaN(one)) { alert('Invalid entry: '+A); one=0; }
var two = Number(document.getElementById(.value);
if (isNaN(two)) { alert('Invalid entry: '+; two=0; }
document.getElementById(SUM).value = one + two;
}

</script>

</head>

<body>
<form name="theform" action="" method=post>
<table width="651" height="105">
<tr>
<td width="101" height="24">City</td>
<td width="207"><script type="text/javascript">SetupCity();</script></td>
<td width="51">Amount</td>
<td width="272"><input type="text" name="City" id="CourierCost" size="40" value="" onChange="calc(this.value,'CourierCost','result')"></td>
</tr>
<tr>
<td height="21"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="24">Product</td>
<td><script type="text/javascript">SetupProduct();</script></td>
<td>Amount</td>
<td><input type="text" name="ProductCost" id="ProductCost" size="40" value="" onChange="calc(this.value,'ProductCost','result')"></td>
</tr>
<tr>
<td height="24"> </td>
<td><input name="sum" value="" id="result" readonly style="border:0px;"></td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>

JPM

Actually it is working unpredictable
Would appreciate a fix
When I input an amount into the field it starts a calculation but the value is incorrect
Would appreciate help

JMRKER

Try this revision:

In the future put you program between [ code] [ /code] (without spaces) tags
to make it easier for forum readers to read and not require reformatting of code.

Also would be a good idea to start your own NEW thread with new requests.
I'm sure you will get a quicker response.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DD Sums</title>

<script type="text/javascript">

////////////////////////////////////////////////////////////////////////////////////////
// Cities
////////////////////////////////////////////////////////////////////////////////////////
var CityCourierCost = [
 ['Please select your City',''],
 ['Cape Town','200'],
 ['JHB','600']
//['Witbank','amount']
];

function SetupCity() {
  var str = "<select id='City' onchange='CityInfo()'>";
  for (var i=0; i<CityCourierCost.length; i++) {
    str += '<option value="'+CityCourierCost[i].join('|')+'">'+CityCourierCost[i][0]+'</option>';
  }
  str +='</select>';
  document.write(str);
}
function CityInfo() {
  var sel = document.getElementById('City').selectedIndex; 
  var tmp = []; tmp.push(sel);
  for (var i=1; i<CityCourierCost.length; i++) { tmp.push(CityCourierCost[sel][i]); }
  document.getElementById('CourierCost').value = tmp[1];
}

////////////////////////////////////////////////////////////////////////////////////////
// Products
////////////////////////////////////////////////////////////////////////////////////////
var ProductItemCost = [
 ['Please select your Product',''],
 ['Alpine','1200'],
 ['Surento','800']
//['Witbank','amount']
];

function SetupProduct() {
  var str = "<select id='Product' onchange='ProductInfo()'>";
  for (var i=0; i<ProductItemCost.length; i++) {
    str += '<option value="'+ProductItemCost[i].join('|')+'">'+ProductItemCost[i][0]+'</option>';
  }
  str +='</select>';
  document.write(str);
}
function ProductInfo() {
  var sel = document.getElementById('Product').selectedIndex;
  var tmp = []; tmp.push(sel);
  for (var i=1; i<ProductItemCost.length; i++) { tmp.push(ProductItemCost[sel][i]); }
  document.getElementById('ProductCost').value = tmp[1];
}

////////////////////////////////////////////////////////////////////////////////////////
// Calculation
////////////////////////////////////////////////////////////////////////////////////////
function calc() {
  var one = Number(document.getElementById('CourierCost').value);
  if (isNaN(one)) { alert('Invalid entry: Courier Cost'); one=0; }
  var two = Number(document.getElementById('ProductCost').value);
  if (isNaN(two)) { alert('Invalid entry: Product Cost'); two=0; }
  document.getElementById('results').value = one + two;
}

</script>

</head>
<body>
<form name="theform" action="" method='post' onsubmit="return false">
<table width="651" height="105">

<tr>
<td width="101" height="24">City</td>
<td width="207">
<script type="text/javascript">SetupCity();</script>
</td>
<td width="51">Amount</td>
<td width="272">
<input type="text" name="City" id="CourierCost" size="10" value="">
</td>
</tr>

<tr>
<td height="21">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>

<tr>
<td height="24">Product</td>
<td>
<script type="text/javascript">SetupProduct()</script></td>
<td>Amount</td>
<td><input type="text" name="ProductCost" id="ProductCost" size="10" value="">
</td>
</tr>

<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td height="24">
<button onClick="calc()">Calculate</button>
</td>
<td><input type="text" name="sum" value="" id="results" style="border:1px;" readonly></td>
</tr>

</table>
</form>
</body>
</html>

JPM

Thanks and sorry for the code misunderstanding

I tried you version and it does calculate but it also starts posting the form when I click the calculate button.

Any Ideas

JPM

here is my latest version

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>


<script type="text/javascript">

////////////////////////////////////////////////////////////////////////////////////////
					//                  Cities
////////////////////////////////////////////////////////////////////////////////////////
// Name,Line1,Line2,Line3,Line4,Line5,Dell,Tel,FAX,FaxEmail,Email,Webpage
var CityCourierCost = [
 ['Please select your City','',''],
 ['Cape Town','200','Cape Town'],
  ['JHB','600','JHB']
 //['Witbank','amount']
];
function SetupCity(TA) {
 var str = "<select id='City' onchange='CityInfo()'>";
 for (var i=0; i<CityCourierCost.length; i++) {
   str += '<option value="'+CityCourierCost[i].join('|')+'">'+CityCourierCost[i][0]+'</option>';
 }
 str +='</select>';
 document.write(str);
}

function CityInfo() {
 var sel = document.getElementById('City').selectedIndex;
 var tmp = [];  tmp.push(sel);
 for (var i=1; i<3; i++) { tmp.push(CityCourierCost[sel][i]); }
 document.getElementById('CourierCost').value = tmp[1];
  document.getElementById('CityName').value = tmp[2];

}

////////////////////////////////////////////////////////////////////////////////////////
					//                  Products
////////////////////////////////////////////////////////////////////////////////////////

var ProductItemCost = [
 ['Please select your Product','',''],
 ['Alpine','1200','Alpine'],
 ['Surento','800','Surento']
 //['Witbank','amount']
];
function SetupProduct(TA) {
 var str = "<select id='Product' onchange='ProductInfo()'>";
 for (var i=0; i<ProductItemCost.length; i++) {
   str += '<option value="'+ProductItemCost[i].join('|')+'">'+ProductItemCost[i][0]+'</option>';
 }
 str +='</select>';
 document.write(str);
}

function ProductInfo() {
 var sel = document.getElementById('Product').selectedIndex;
 var tmp = [];  tmp.push(sel);
 for (var i=1; i<3; i++) { tmp.push(ProductItemCost[sel][i]); }
 document.getElementById('ProductCost').value = tmp[1];
 document.getElementById('ProductName').value = tmp[2];
}

////////////////////////////////////////////////////////////////////////////////////////
					//                  Calculation
////////////////////////////////////////////////////////////////////////////////////////


function calc() {
  var one = Number(document.getElementById('CourierCost').value);
  if (isNaN(one)) { alert('Invalid entry: Courier Cost'); one=0; }
  var two = Number(document.getElementById('ProductCost').value);
  if (isNaN(two)) { alert('Invalid entry: Product Cost'); two=0; }
  document.getElementById('results').value = one + two;
}

</script>


</head>

<body>
<form name="theform" action="http://www.hashemian.com/tools/form-grabber.php" method="post">
  <table width="863" height="131">
    <tr>
      <td width="90" height="24">City</td>
      <td width="193"><script type="text/javascript">SetupCity();</script></td>
      <td width="183">City Selected:</td>
      <td width="377"><input  type="text" name="CityName" id="CityName" size="40" value="" ></td>
    </tr>
    <tr>
      <td height="21">&nbsp;</td>
      <td>&nbsp;</td>
      <td>Courier Cost</td>
      <td><input  type="text" name="CityCourierCost" id="CourierCost" size="40" value="" onChange="calc(this.value,'CourierCost','result')"></td>
    </tr>
    <tr>
      <td height="24">Product</td>
      <td><script type="text/javascript">SetupProduct();</script></td>
      <td>Product Selected</td>
      <td><input type="text" name="ProductName" id="ProductName" size="40" value="" onChange="calc(this.value,'ProductCost','result')"></td>
    </tr>
    <tr>
      <td height="24">&nbsp;</td>
      <td>&nbsp;</td>
      <td>Product Cost</td>
      <td><input type="text" name="ProductCost" id="ProductCost" size="40" value="" onChange="calc(this.value,'ProductCost','result')"></td>
    </tr>
    <tr>
      <td height="24">&nbsp;</td>
      <td>&nbsp;</td>
      <td>Total Amount <button onClick="calc()">Calculate</button></td>
      <td><input type="text" name="sum" value="" id="results" style="border:1px;" readonly> 
        all inclusive</td>
    </tr>
  </table>
</form>
</body>
</html>

JPM

Another Question
How can I insert Optgroups in your code
Say for instance i have this list of cities

var CityCourierCost = [
 ['Please select your City','',''],
 ['Cape Town','200','Cape Town'],
  ['JHB','600','JHB']
 //['Witbank','amount']
];

and I want to group them with optgroup for various cities
I know how optgroup works, I just want to know how I would implement it into the javascripts

Thanks