I have a select list containing variables from a query

<tr>
  <td>County Name:</td>
    <td>
      <select name="countyName" onchange="countyID.value = countyName.value">
                <option>Select a County</option>
        <cfloop query = "getCounties">
        <option value="#countyName#" >#countyName#&nbsp;&nbsp;&nbsp;#countyID#</option>
        </cfloop>
    </select>
    </td>
</tr>

How can I populate the County ID field?

<tr>
  <td>County ID:</td>
    <td><input type="Text" name="countyID">
     </td>
</tr>

I've never used jQuery. Is there a way to use just JavaScript? As you can see I've attempted JavaScript, however I can only populate countyID with the countyName and I need it populated with countyID.

I have a select list containing variables from a query

<tr>
  <td>County Name:</td>
    <td>
      <select name="countyName" onchange="countyID.value = countyName.value">
                <option>Select a County</option>
        <cfloop query = "getCounties">
        <option value="#countyName#" >#countyName#&nbsp;&nbsp;&nbsp;#countyID#</option>
        </cfloop>
    </select>
    </td>
</tr>

How can I populate the County ID field?

<tr>
  <td>County ID:</td>
    <td><input type="Text" name="countyID">
     </td>
</tr>

I've never used jQuery. Is there a way to use just JavaScript? As you can see I've attempted JavaScript, however I can only populate countyID with the countyName and I need it populated with countyID.

• javascript
• coldfusion
• coldfusion-8

• Please indent your code by 4 spaces (e.g., by selecting it and pressing the code {} button); don't use backticks the way you did. BTW, how do you set countyID and countyName? – Marcel Korpel Commented Dec 20, 2010 at 21:59
• Thank you - as you can see - I'm also fairly new to posting in StackOverflow! – skeddy Commented Dec 21, 2010 at 16:36

2 Answers 2

Just out of curiousity, why are you using #countyName# as the values for your options? What if the county (erroneously or not) has a quotaton mark or something else that will screw with your HTML.

Why wouldn't you do:

<select name="countyName" onchange="countyID.value = this.value">
    <option value="#countyID#">#countyName#</option>
</select>

Breaking it out into a function this should work for you: Live Example

<table>
    <tbody>
        <tr> <td>County ID:</td> <td><input id="countyId" type="Text" name="countyID"> </td> </tr>
        <tr> <td>County Name:</td> 

            <td> 
                <select name="countyName" onchange="update(this)">
                    <option>Select a County</option> 
                    <option value="1234">asdf</option> 
                    <option value="4321">asdf2</option> 
                </select> 
            </td>
        </tr>
    </tbody>
</table>
<script>
    function update( elem ) {
    document.getElementById('countyID').value = elem.value;
    }
</script>

Or in short just change

this:

<select name="countyName" onchange="countyID.value = countyName.value">

to this, and it should work

<select name="countyName" onchange="document.getElementById('countyId').value = this.value">

You need to reference your DOM elements via document.getElementById() and not just their id alone

Another example here