Populating text fields from dropdown

I'm trying to accomplish the following:

I have 1 dropdown that selects all products. Then I have 2 text fields(Product Price, Product Name). When select a product from the dropdown, the price and name change according to the product I select in the dropdown?

Any hints going about using dynamic dropdown?

dynamic dropdowns wont be able to accomplish this, but it can be done with a little hand coding. By using an onchange event on the elect list, you can pass the product list lable and value to text fields.

here is an example of doing this using a static select list:

<form id="prodForm" name="prodForm" method="post"  action="">

  <select name="products" id="products" onchange="document.prodForm.prodName.value = document.prodForm.products[document.prodForm.products.selectedIndex].text;document.prodForm.prodPrice.value = document.prodForm.products[document.prodForm.products.selectedIndex].value">

    <option value="">--select a product--</option>

    <option value="14.99">B.B. King - Live at the Regal</option>

    <option value="22.99">The Band - The Last Waltz</option>

    <option value="19.99">Alvin Bishop - Let It Flow</option>

    <option value="17.99">Dr. John - Gris Gris Gumbo</option>

    <option value="15.99">The Paul Butterfield Blues Band</option>

  </select>

  <br />

  <label for="prodName">Product Name:</label>

  <input type="text" name="prodName" id="prodName" />

  <br />

  <label for="prodPrice">Product Price:</label>

  <input type="text" name="prodPrice" id="prodPrice" />

</form>

Thank you but problem is trying to do it dynamical:

See below for code, any suggestions is welcome:


<form action="orders_Insert.php" method="post" name="WADAInsertForm" id="WADAInsertForm">
<div class="WADAHeader">Add Material/Equipment for Service Request - <?php echo $row_WAREQ['reqid']; ?></div>
<table class="WADADataTable" cellpadding="0" cellspacing="3" border="0">
<tr>
<th nowrap bgcolor="#CCCCCC" class="WADADataTableHeader">* Material/Equipment:</th>
<td class="WADADataTableCell"><label for="ProductName"></label>
<select name="ProductName" id="ProductName"
onchange="document.WADAInsertForm.ProductPrice.value = document.WADAInsertForm.products[document.WADAInsertForm.products.selectedIndex].text;
document.WADAInsertForm.SKU.value = document.WADAInsertForm.products[document.WADAInsertForm.products.selectedIndex].value">
<option value="">Select a Material/Equipment</option>
<?php
do {
?>
<option value="<?php echo $row_WAProducts['ProductID']?>"><?php echo $row_WAProducts['ProductName']?></option>
<?php
} while ($row_WAProducts = mysql_fetch_assoc($WAProducts));
$rows = mysql_num_rows($WAProducts);
if($rows > 0) {
mysql_data_seek($WAProducts, 0);
$row_WAProducts = mysql_fetch_assoc($WAProducts);
}
?>
</select></td>
</tr>
<tr>
<th nowrap bgcolor="#CCCCCC" class="WADADataTableHeader">Price:</th>
<td class="WADADataTableCell"><input type="text" name="ProductPrice" id="ProductPrice" size="32" /></td>
</tr>
<tr>
<th nowrap bgcolor="#CCCCCC" class="WADADataTableHeader">SKU:</th>
<td class="WADADataTableCell"><input type="text" name="SKU" id="SKU" value="" size="32" /></td>
</tr>
</table>

<div class="WADAButtonRow">
<table class="WADADataNavButtons" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="WADADataNavButtonCell" nowrap="nowrap"><input type="image" name="Insert" id="Insert" value="Insert" alt="Insert" src="../../../WA_DataAssist/images/Pacifica/Refined_insert.gif" /></td>
</tr>
</table>
<input name="WADAInsertRecordID" type="hidden" id="WADAInsertRecordID" value="">
</div>
</form>

it's the same concept doing it dynamically as doing it statically.

set the value of the select list to use the price, and the label of the select to use the product name.

then use the onchange event to set the text field values.

Jason, I followed your instructions but still doesn't work.

Please see attachment.

the onChange code is not correct.

change:

onChange="document.WADAInsertForm.ProductSKU.value = document.WADAInsertForm.ProductName[document.WADAInsertForm.ProductSKU.selectedIndex].text;document.WADAInsertForm.ProductPrice.value = document.WADAInsertForm.ProductName[document.WADAInsertForm.ProductPrice.selectedIndex].value"

to:

onChange="document.WADAInsertForm.ProductSKU.value = document.WADAInsertForm.ProductName[document.WADAInsertForm.ProductName.selectedIndex].text;document.WADAInsertForm.ProductPrice.value = document.WADAInsertForm.ProductName[document.WADAInsertForm.ProductName.selectedIndex].value"

also, the select list value is still set to use the ProductID column, it needs to use the Product Price column for this to work.

Thank you Jason.

Sorry about the mix up but I got the value and the text to work. I must of sent you the wrong file whiles trying different senarios.

What I really want is, using the way you specified only display a value and a text. But want I want to display is at least 5 column values from the products table. e.g price,sku,weight,binNumber, and ProductStartDate. The values should change when I select the dropdown to correspond with the product.

Thanks

well, that's a horse of a completely different color, and requires a completely different approach.


going back to my previous static example, the option values would need to pass a comma seperated list of "price,sku,name,etc..", for example:
value="15.99,982,The Paul Butterfield Blues Band"

then the onchange event calls a javascript function to convert the comma separated list to an array, and set the form elements from the array pieces

<script type="text/javascript">

function setProdData(opts) {

    var optArray = new Array;

    optArray = opts.split(",");

    var theForm = document.prodForm;

    var prodNameField = theForm.prodName;

    var prodPriceField = theForm.prodPrice;

    var prodSKUField = theForm.prodSKU;

    prodPriceField.value = optArray[0];

    prodSKUField.value = optArray[1];

    prodNameField.value = optArray[2];

    



}

</script>

<form id="prodForm" name="prodForm" method="post"  action=""> 

  <select name="products" id="products" onchange="setProdData(document.prodForm.products[document.prodForm.products.selectedIndex].value)"> 

    <option value="">--select a product--</option> 

    <option value="14.99,123,B.B. King - Live at the Regal">B.B. King - Live at the Regal</option> 

    <option value="22.99,324,The Band - The Last Waltz">The Band - The Last Waltz</option> 

    <option value="19.99,423,Alvin Bishop - Let It Flow">Alvin Bishop - Let It Flow</option> 

    <option value="17.99,658,Dr. John - Gris Gris Gumbo">Dr. John - Gris Gris Gumbo</option> 

    <option value="15.99,982,The Paul Butterfield Blues Band">The Paul Butterfield Blues Band</option> 

  </select> 

  <br /> 

  <label for="prodName">Product Name:</label> 

  <input type="text" name="prodName" id="prodName" /> 

  <br /> 

  <label for="prodSKU">Product SKU:</label> 

  <input type="text" name="prodSKU" id="prodSKU" /> 

  <br /> 

  <label for="prodPrice">Product Price:</label> 

  <input type="text" name="prodPrice" id="prodPrice" /> 

</form>

Thank you Jason.

Best company to get support ever.

Glad to hear the example made sense.