Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Auto fill text field additional help

Status
Not open for further replies.
Killborg

Killborg

Technical User
Jul 16, 2007
46
US
Hello, I have a form that enters information into a text field when an item is selected form a dropdown field. My question is I want to enter the price into different text field based what is selected from the drop down field. Below is what I have completed. I just cannot figure out the rest. I would appreciate any help. I am still new to this.

<html> <head> <script type="text/javascript"> function populate(item){ for(var i=0;i<item.form.elements.length;i++){ if(item==item.form.elements){ item.form.elements[i+1].value= item.options[item.selectedIndex].value; } } } ></script> </head> <body> <form> <select onchange="populate(this)"> <option value="">Select Product</option> <option value="(Shirt) (Long Sleve) (Linen Green) (WCB) (1x) (General) (500)">1A1</option> <option value="(Shirt)(Long Sleve)(Basket Green)(WCB)(1x)(General)(300)">1A2</option> <option value="(Shirt)(Long Sleve)(White)(WCB)(1x)(General)(200)(Enter Option)">1A3</option> <option value="(Shirt)(Long Sleve)(Linen Blue)(WCB)(1x)(General)(500)">1B1</option> <option value="(Shirt)(Long Sleve)(White)(WCB)(1x)(General)(500)">1B2</option> <option value="1(Shirt)(Short Sleve)(White)(WCB)(1x)(General)(500)">1C1</option> <option value="(Shirt)(Short Sleve)(White)(WCB)(1x)(General)(1000)">1C1A</option> <option value="(Shirt)(Short Sleve)(White) (WCB)(1x)(General)(2000)">1C1B</option> </select>
<table width="550" height="40" border="1"> <tr> <td width="534" height="35" align="center" valign="middle">
<input name="Product Ordering" type="text" id="Product Ordering" size="85">

<input name="Price" type="text" id="Price">

</td> </tr> </table>

</form> </body> </html>
 
Sort by date Sort by votes
code in a better view

<html>
<head>
<script type="text/javascript">
function populate(item){
for(var i=0;i<item.form.elements.length;i++){
if(item==item.form.elements){
item.form.elements[i+1].value=
item.options[item.selectedIndex].value;
}
}
}
</script>
</head>
<body>
<form>

<select onchange="populate(this)">
<option value="">Select Product</option>
<option value="(Shirt) (Long Sleve) (Linen Green) (WCB) (1x) (General) (500)">1A1</option>
<option value="(Shirt)(Long Sleve)(Basket Green)(WCB)(1x)(General)(300)">1A2</option>
<option value="(Shirt)(Long Sleve)(White)(WCB)(1x)(General)(200)(Enter Option)">1A3</option>
<option value="(Shirt)(Long Sleve)(Linen Blue)(WCB)(1x)(General)(500)">1B1</option>
<option value="(Shirt)(Long Sleve)(White)(WCB)(1x)(General)(500)">1B2</option>
<option value="1(Shirt)(Short Sleve)(White)(WCB)(1x)(General)(500)">1C1</option>
<option value="(Shirt)(Short Sleve)(White)(WCB)(1x)(General)(1000)">1C1A</option>
<option value="(Shirt)(Short Sleve)(White) (WCB)(1x)(General)(2000)">1C1B</option>
</select>
<br>
<table width="550" height="40" border="1">
<tr>
<td width="534" height="35" align="center" valign="middle"><p>
<input name="Product Ordering" type="text" id="Product Ordering" size="85">
</p>
<p>
<input name="Price" type="text" id="Price">
</p></td>
</tr>
</table>
<br>
<br>

</form>
</body>
</html>
 
Upvote 0 Downvote
first of all I think you have the text and the value of the select mixed up the user sees values like 1B2 but the value (used for processing by script) is what the user should see because it is a lot more descriptive.
Anyway here is the code that will put the price in the textbox and I've changed the value and text of the select:
Code: 
<html>
<head>
<script type="text/javascript">
function populate(item){
var whatTheUserSees = item.options[item.selectedIndex].text;
var whatTheVaueIs = item.options[item.selectedIndex].value;
	if(item.selectedIndex==0){
		// nothing is selected so set the text fields to empty
		document.getElementById("Price").value = "";
		return;
	}
	document.getElementById("Price").value
		= item.options[item.selectedIndex].attributes.getNamedItem("price").value;
	// for Mozilla do NOT use mixed case attributes, getNamedItem returns null
	// if you were to use Price instead of price
}
</script>
</head>
<body>
<form>

<select onchange="populate(this)">
<option value="">Select Product</option>
<option price="7" value="1A1">(Shirt) (Long Sleve) (Linen Green) (WCB) (1x) (General) (500)</option>
<option price="4" value="1A2">(Shirt)(Long Sleve)(Basket Green)(WCB)(1x)(General)(300)</option>
<option price="5" value="1A3">(Shirt)(Long Sleve)(White)(WCB)(1x)(General)(200)(Enter Option)</option>
<option price="6" value="1B1">(Shirt)(Long Sleve)(Linen Blue)(WCB)(1x)(General)(500)</option>
<option price="8" value="1B2">(Shirt)(Long Sleve)(White)(WCB)(1x)(General)(500)</option>
<option price="9" value="1C1">1(Shirt)(Short Sleve)(White)(WCB)(1x)(General)(500)</option>
<option price="72" value="1C1A">(Shirt)(Short Sleve)(White)(WCB)(1x)(General)(1000)</option>
<option price="2" value="1C1B">(Shirt)(Short Sleve)(White) (WCB)(1x)(General)(2000)</option>
</select>
<br>
<table width="550" height="40" border="1">
  <tr>
    <td width="534" height="35" align="center" valign="middle"><p>
      <input name="Product Ordering" type="text" id="Product Ordering" size="85">
    </p>
      <p>
        <input name="Price" id="Price" type="text" id="Price">
</p></td>
  </tr>
</table>
<br>
<br>

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


Greetings, Harm Meijer
 
Upvote 0 Downvote
Thank you for your help.
I tried the code and it list the price.(Great) But I noticed the Product Code 1A1,1A2 and so on are not longer listed in the dorp down. The prouduct details are listed now in the dropdown. The product details should appear in the Product Ordering text box. When the product code is selected.
 
Upvote 0 Downvote
Hello, I am revising my original request.
Because I forgot a text field.
This is what I am trying to do.
If you select "1A1" from the dropdown field named Code Listing it will display the product description "(Shirt) (Long Sleve) (Linen Green) (WCB) (1x) (General) (500)" in the Product Description text field. And the Product code 1A1 will be displayed in the Product Code text field. Also need to display the price in the price field.

Thanks in advanced for anyone who can help me with this.
I have been stuck on this for about a week.




Here is what I am working with.

<html>
<html>
<head>
<script type="text/javascript">
function populate(item){
for(var i=0;i<item.form.elements.length;i++){
if(item==item.form.elements){
item.form.elements[i+1].value=
item.options[item.selectedIndex].value;
}
}
}
</script>
</head>
<body>
<form>
<br>
<table width="550" height="115" border="1">
<tr>
<td width="189" height="35" align="center" valign="middle"><select name="Product Code Listing" id="Product Code Listing" onChange="populate(this)">
<option value="">Select Product</option>
<option value="(Shirt) (Long Sleve) (Linen Green) (WCB) (1x) (General) (500)">1A1</option>
<option value="(Shirt)(Long Sleve)(Basket Green)(WCB)(1x)(General)(300)">1A2</option>
<option value="(Shirt)(Long Sleve)(White)(WCB)(1x)(General)(200)(Enter Option)">1A3</option>
<option value="(Shirt)(Long Sleve)(Linen Blue)(WCB)(1x)(General)(500)">1B1</option>
<option value="(Shirt)(Long Sleve)(White)(WCB)(1x)(General)(500)">1B2</option>
<option value="1(Shirt)(Short Sleve)(White)(WCB)(1x)(General)(500)">1C1</option>
<option value="(Shirt)(Short Sleve)(White)(WCB)(1x)(General)(1000)">1C1A</option>
<option value="(Shirt)(Short Sleve)(White) (WCB)(1x)(General)(2000)">1C1B</option>
</select></td>
<td width="345" align="center" valign="middle"><div align="center">Product Description
<input name="Product Description" type="text" id="Product Description" size="85">
</div></td>
</tr>
<tr>
<td height="35" align="center" valign="middle">Procuct Code
<input name="Product Code" type="text" id="Product Code" size="15"></td>
<td height="35" align="center" valign="middle">Price
<input name="Price" type="text" id="Price" size="15"></td>
</tr>
<tr>
<td height="35" colspan="2" align="center" valign="middle"><p>&nbsp;</p></td>
</tr>
</table>
<br>

</form>
</body>
</html>
 
Upvote 0 Downvote
I also have been trying to use this one but it repeats the dropdown field information in all the fields. Just cannt get the information into the other fields correctly.


<html>
<head>
<script type="text/javascript">
function func()
{
var ipt=document.getElementById("ipt")
var ipu=document.getElementById("ipu")
var ipv=document.getElementById("ipv")
var sel=document.getElementById("s")

ipt.value=sel.options[sel.selectedIndex].text
ipu.value=sel.options[sel.selectedIndex].text
ipv.value=sel.options[sel.selectedIndex].text
}
</script>
</head>
<body>
<form>
<table width="500" border="0" cellpadding="12">
<tr>
<th width="172" scope="row"><select name="Product Listing" id="s" onChange="func()">
<option>Select Product</option>
<option value="(Shirt) (Long Sleve) (Linen Green) (WCB) (1x) (General) (500)">1A1</option>
<option>1A2</option>
<option>1A3</option>
</select></th>
<th width="274" scope="row">Product Code
<input name="Product Code" type="text" id="ipt" size="20" /></th>
</tr>
<tr>
<th colspan="2" scope="row">Product Description
<input name="Product Description" type="text" id="ipu" size="70" /></th>
</tr>
<tr>
<th colspan="2" scope="row">Price
<input name="Optional" type="text" id="ipv" maxlength="20" /></th>
</tr>
<tr>
<th colspan="2" scope="row">&nbsp;</th>
</tr>
</table>
</form>
</body>
</html>
 
Upvote 0 Downvote
OK I am getting closer to getting this completed.

I got the Product code and the product description displaying correctly in the textfilds. But still stuck on how to get the price to display. Any help will be appreciated.

Updated code:

<html>
<head>
<script type="text/javascript">
function populate(item){
for(var i=0;i<item.form.elements.length;i++){
if(item==item.form.elements){
item.form.elements[i+1].value=
item.options[item.selectedIndex].value;

var ipt=document.getElementById("ipt")
var sel=document.getElementById("s")

ipt.value=sel.options[sel.selectedIndex].text
}
}
}
</script>
</head>
<body>
<form>
<br>
<table width="550" height="115" border="1">
<tr>
<td width="189" height="35" align="center" valign="middle"><select name="Product Code Listing" id="s" onChange="populate(this)">
<option value="">Select Product</option>
<option value="(Shirt) (Long Sleve) (Linen Green) (WCB) (1x) (General) (500)">1A1</option>
<option value="(Shirt)(Long Sleve)(Basket Green)(WCB)(1x)(General)(300)">1A2</option>
<option value="(Shirt)(Long Sleve)(White)(WCB)(1x)(General)(200)(Enter Option)">1A3</option>
<option value="(Shirt)(Long Sleve)(Linen Blue)(WCB)(1x)(General)(500)">1B1</option>
<option value="(Shirt)(Long Sleve)(White)(WCB)(1x)(General)(500)">1B2</option>
<option value="1(Shirt)(Short Sleve)(White)(WCB)(1x)(General)(500)">1C1</option>
<option value="(Shirt)(Short Sleve)(White)(WCB)(1x)(General)(1000)">1C1A</option>
<option value="(Shirt)(Short Sleve)(White) (WCB)(1x)(General)(2000)">1C1B</option>
</select></td>
<td width="345" align="center" valign="middle"><div align="center">Product Description
<input name="Product Description" type="text" id="Product Description" size="85">
</div></td>
</tr>
<tr>
<td height="35" align="center" valign="middle">Procuct Code
<input name="Product Code" type="text" id="ipt" size="15"></td>
<td height="35" align="center" valign="middle">Price
<input name="Price" type="text" id="Price" size="15"></td>
</tr>
<tr>
<td height="35" colspan="2" align="center" valign="middle"><p>&nbsp;</p></td>
</tr>
</table>
<br>

</form>
</body>
</html>
 
Upvote 0 Downvote
I've added a lot of comments to my code. Hope you understand what the code does now.

Code: 
<html>
<head>
<script type="text/javascript">
function populate(item){
	// the item vatiable is the entire select element:
	// <select name="Product Code Listing" ...
	// lets see which of the option is selected
	var selectedOption = item.options[item.selectedIndex];
	// selectedOption has some properties like value and text
	var optionText = selectedOption.text;
	var optionValue = selectedOption.value;
	// now lets check if the item that is selected is not "Select Product"
	// if the user first select a product (script fills the text inputs)
	// and then de select we should empty the text boxes since currently
	// no value is selected
    if(item.selectedIndex==0){
        // nothing is selected so set the text fields to empty
        document.getElementById("Price").value = "";
        document.getElementById("ipt").value = "";
        document.getElementById("Product Description").value = "";
        // the return on the next line means that the function
        // will exit here (this line will only get executed
        // if the user changed the select to "Select Product"
        return;
    }
    // you might have noticed that Ive added a price attribute to
    // the options: <option price='77' value=...
    // this is not a default property and not all browsers allow me
    // to get this property like I get .value and .text (selectedOption.price)
    // it is an attribute of the option so I use selectedOption.attributes
    // selectedOption.attributes returns all attributes of the option, I only need price
    // price is a named item so I use selectedOption.attributes.getNamedItem('price')
    // now I have an object named attribute with the name of price, i need its value
    // see the next line how I get the price value
    document.getElementById("Price").value
        = selectedOption.attributes.getNamedItem("price").value;
    // for Mozilla do NOT use mixed case attributes, getNamedItem returns null
    // if you were to use Price instead of price
    // so if the option was: <option Price='22'
    // and I use .getNamedItem('Price') mozilla will return null

	// now use the text of the selected option to fill the textbox with product code
    document.getElementById("ipt").value
        = selectedOption.text;

	// now use the text of the selected option to fill the textbox with product description
    document.getElementById("Product Description").value
        = selectedOption.value;
}
</script>
</head>
<body>
<form>
<br>
<table width="550" height="115" border="1">
  <tr>
    <td width="189" height="35" align="center" valign="middle">
    <select name="Product Code Listing" id="s" onChange="populate(this)">
      <option price="123" value="">Select Product</option>
      <option price="23"  value="(Shirt) (Long Sleve) (Linen Green) (WCB) (1x) (General) (500)">1A1</option>
      <option price="32"  value="(Shirt)(Long Sleve)(Basket Green)(WCB)(1x)(General)(300)">1A2</option>
      <option price="42"  value="(Shirt)(Long Sleve)(White)(WCB)(1x)(General)(200)(Enter Option)">1A3</option>
      <option price="532"  value="(Shirt)(Long Sleve)(Linen Blue)(WCB)(1x)(General)(500)">1B1</option>
      <option price="623"  value="(Shirt)(Long Sleve)(White)(WCB)(1x)(General)(500)">1B2</option>
      <option price="723"  value="1(Shirt)(Short Sleve)(White)(WCB)(1x)(General)(500)">1C1</option>
      <option price="1900"  value="(Shirt)(Short Sleve)(White)(WCB)(1x)(General)(1000)">1C1A</option>
      <option price="133"  value="(Shirt)(Short Sleve)(White) (WCB)(1x)(General)(2000)">1C1B</option>
    </select></td>
    <td width="345" align="center" valign="middle"><div align="center">Product Description
      <input name="Product Description" type="text" id="Product Description" size="85">
    </div></td>
  </tr>
  <tr>
    <td height="35" align="center" valign="middle">Procuct Code
      <input name="Product Code" type="text" id="ipt" size="15"></td>
    <td height="35" align="center" valign="middle">Price
      <input name="Price" type="text" id="Price" size="15"></td>
  </tr>
  <tr>
    <td height="35" colspan="2" align="center" valign="middle"><p>&nbsp;</p></td>
  </tr>
</table>
<br>

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


Greetings, Harm Meijer
 
Upvote 0 Downvote
Thanks this works great.
I am still trying to understand the comments. I just have to read a few times and play with the code. But I will get it.


I have a question: Would it be better to seperate the information "product description" and "price" on a different java page and reference that page.
 
Upvote 0 Downvote
Not sure what you mean with different java page but if you have an item with the following properties:
description
itemID
price
discount

It is better to have them as separate properties of the <option in html.
For example:

Code: 
<select id="mySelect">
<option discount="12" price="price" vale="itemID">description</opion>
</mySelect>

to get the properties of the currently selected item:
var sel = document.getElementById("mySelect");
var selectedOption = sel.options[sel.selectedIndex];
var itemID = selectedOption.value;
var description = selectedOption.text;
var price = selectedOption.attributes.getNamedItem("price").value;
var discount = selectedOption.attributes.getNamedItem("discount").value;

The reason I use .text for description and .value for itemID is because these are native properties of an <option element.
Because my item has more properties than description and id I have added some in the html code (namely price and discount). These are not native properties of an <option element so I get them using the following syntax:
attributes.getNamedItem("property").value;
Make sure you do not use Mixed Case when naming the properties. Something like:
<option Price="22"
does not work in some browsers (Price is with upper case P).

Greetings, Harm Meijer
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
305
lexer
lexer
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
103
ggriffit
ggriffit
emmals
  • Locked
  • Question
Auto Click Button and pass through all data
Replies
0
Views
73
emmals
emmals
keisha1
  • Locked
  • Question
How can I append/insert multiple text files into one .dbf file using java script /html command
Replies
1
Views
107
Samthyr
Samthyr
tyutghf
  • Locked
  • Question
Konami code help 3
Replies
10
Views
179
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top