Data population in Cold Fusion

Category DropdownHi,
  I have a CFM page where I list Category along with CategoryID in the drop down.
  I like to be able to populate Category ID (in parenthesis) in the Category ID field when user selects the category from the drop-down menu.
  For example, when the user selects "Picture Frames", then I want the page to populate 23 automatically into Category ID field as seen in the screenshot above.
  Here are the codes in my CFM page

<CFQUERY NAME="GetCategory" datasource="DNSName" cachedWithin="#CreateTimeSpan(0,1,0,0)#">
      SELECT      *
         FROM         Category
      ORDER BY Category
</CFQUERY>

    <TR bgcolor="B5D083">
        <TD>
           Category ID:
        </TD>
        <TD>
      <CFINPUT TYPE="text" NAME="CategoryID" SIZE=3 MAXLENGTH=3> Category Lookup:
                  <SELECT NAME="CategoryID">
                    <OPTION VALUE="0"></OPTION>
                  <CFOUTPUT query="GetCategory">
                  <OPTION VALUE="#ID#">#Category#/(#ID#)</OPTION>
                  </CFOUTPUT>
                  </SELECT>        </TD>
    </TR>
sgleeAsked:
Who is Participating?
 
erikTsomikConnect With a Mentor System Architect, CF programmer Commented:
I think the best approach will be using jquery to create on change event

$("#CategoryID).change(function(){
   $("#CategoryID").val($(this).val());
})

or something like this. Make sure that the id is spelled correctly. Because jquery is a case sensitive
0
 
sgleeAuthor Commented:
@erikTsomik
Where exactly I need to insert the code above?
0
 
_agx_Connect With a Mentor Commented:
It's JQuery code, so put it inside document.ready. But for Erik's example to work, both fields must have an "ID".  (Also fixed a small typo).  To avoid confusion, use different id's like in the <form> below:

<script type"text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
      $(document).ready(function() {
            $("#CategoryID").change(function() {
                  $("#SelectedCategoryID").val($(this).val());
            });
            
      });
</script>
<form>
      Selected Category <input type="text" id="SelectedCategoryID" name="SelectedCategoryID"><br>
      All Categories <select id="CategoryID" name="CategoryID">
      <cfoutput query="getCategory">
            <option value="#ID#">#Category# (#ID#)</option>
      </cfoutput>
      </select>
</form>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.