Click to See Complete Forum and Search --> : update text field based on select box


IndyB
09-11-2003, 10:32 AM
I'm trying to update a text field based on the selection made in a select list. Both the data from the select list and the resulting text field are stored in a db.

The select list is dynamically populated with the 'fullCat' values from the db. When the user makes their selection from the list, I need the text field to be automatically populated with the value that corresponds to the 'fullCat' value in the db. Basically, 'fullCat' is a long category name, and 'Category' is the abbreviated category name.

I need to do this without submitting the form b/c there is already info filled out on the form.

Any ideas?

This is what I'm trying so far, but I'm getting an "Object Expected" error:

<cfquery name="get_categories" datasource="#request.app.dsn#">
SELECT urlCat, fullCat
FROM tblCatPics
</cfquery>
<tr>
<td>Category Name:</td>
<td><select name="fullCat" required="yes" onChange="getValue(this)">
<option>Select</option>
<cfoutput query="get_categories">
<option value="#fullCat#">#fullCat#</option>
</cfoutput>
</select>
</td>
</tr>
<tr>
<td>Category Abreviated:</td>
<td><input type="text" readonly="yes" name="Category" value="" size="15"></td>
</tr>

<script language="JavaScript">
function getValue(otherElement) {

var fullCat = otherElement.form.fullCat.value;
alert = ('fullCat')
<cfoutput query="get_categories">
if( #fullCat# == fullCat){
alert = ('#urlCat#')
otherElement.form.Category.value = "#urlCat#";
}
</cfoutput>
}
</script>

Khalid Ali
09-11-2003, 10:52 AM
Try this link..

http://www.webapplikations.com/pages/html_js/forms/DropDownShowSelectionInTextField.html

IndyB
09-11-2003, 03:07 PM
Thanks for the link.

I tried to take that example and modify the code to work for my needs.

Unfortunately I'm still getting an "Object expected" error.

Anyone see anything wrong with this script?

Select box:
<select name="fullCat" required="yes" onChange="Process(this.options[this.selectedIndex].value)">
<option>Select</option>
<cfoutput query="get_categories">
<option value="#fullCat#">#fullCat#</option>
</cfoutput>
</select>

Text field:
<input type="text" readonly="yes" name="Category" value="" size="15">

JavaScript:
<script language="JavaScript">
function Process(selection){
var frm = document.getElementById("frmAdd");
<cfquery name="get_urlCat" datasource="#request.app.dsn#">
SELECT urlCat, fullCat
FROM tblCatPics
</cfquery>
<cfoutput query="get_urlCat">
if( #fullCat# == selection){
frm.Category.value = '#urlCat#';
}
</cfoutput>
}
</script>