Javascript onChange using ColdFusion on select boxes and input fields

<cfquery name="getFlyerInfo" datasource="#datasource#">
      select * from flyer_cost where product_category = '#product_category#'
</cfquery>
<cfquery name="getFlyerCat" datasource="#datasource#">
      select DISTINCT(product_category) from flyer_cost
</cfquery>
<cfoutput>
<script language="JavaScript">
function PopulateMe()
{

document.flyer.product_category.value = GetElementByID('#getFlyerInfo.product_category#');
document.flyer.page_size.value = GetElementByID('#getFlyerInfo.page_size#');
document.flyer.max_products.value = GetElementByID('#getFlyerInfo.max_products#');
document.flyer.max_images.value = GetElementByID('#getFlyerInfo.max_images#');
document.flyer.price.value = GetElementByID('#getFlyerInfo.price#');

}

</script>

<cfform method="post" action="flyer_step3.cfm" name="flyer">
<table width="60%" border="0" align="center" cellpadding="2" cellspacing="5">
              <tr>
                <td>Product Category</td>
                <td><cfselect name="product_category" id="product_category" onchange="javascript:PopulateMe(this)">
                  <option value="">-- Select Product Category --</option>
                  <cfloop query="getFlyerCat">
                  <option value="#getFlyerCat.product_category#"<cfif len(getFlyerInfo.product_category) gt 0 and getFlyerInfo.product_category is "#getFlyerInfo.product_category#"> selected</cfif>>#getFlyerCat.product_category#</option>
                  </cfloop>
                </cfselect></td>
              </tr><tr>
                <td>Ad Size</td>
                <td><cfselect name="page_size" id="page_size" onchange="javascript:PopulateMe(this)">
                  <option value="">-- Select Ad Size --</option>
                  <cfloop query="getFlyerInfo">
                  <option value="#getFlyerInfo.page_size#"<cfif len(getFlyerInfo.page_size) gt 0 and getFlyerInfo.page_size is "#getFlyerInfo.product_category#"> selected</cfif>>#getFlyerInfo.page_size#</option>
                  </cfloop>
                </cfselect></td>
              </tr>
              <tr>
                              <td>Max Products</td>
                              <td><input type="text" name="max_products" value="#getFlyerInfo.max_products#" size="30" readonly class="readonly"></td>
                        </tr>
                        <tr>
                              <td>Max Graphics</td>
                              <td><input type="text" name="max_images" value="#getFlyerInfo.max_images#" size="30" readonly class="readonly"></td>
                        </tr>
                        <tr>
                              <td>Price</td>
                              <td><input type="text" name="price" value="#getFlyerInfo.price#" size="30" readonly class="readonly"></td>
                        </tr>
              <tr>
                <td colspan="2" align="center"><cfinput type="submit" name="submit" value="Next ->>" /></td>
              </tr>
            </table>
</cfform>

There are two main options
1) Use Ajax. Create a CFC that returns the size, price, etc... for a single category. Then "bind" the text fields to the CFC

2) Old style: Embed the properties in the select list <option>'s. Then update the text box onChange. Something like

EDIT: Fix copy paste error

<script type="text/javascript">
      function categorySelected(list) {
             var maxProducts = list.options[list.selectedIndex].getAttribute("max_products");
             var maxImages = list.options[list.selectedIndex].getAttribute("max_images");
             var price = list.options[list.selectedIndex].getAttribute("price");
             document.getElementById('max_products').value = maxProducts;
             document.getElementById('max_images').value = maxImages;
             document.getElementById('price').value = price;
      }
</script>

.... etc...


<cfselect name="page_size" id="page_size" onchange="javascript:categorySelected(this)">
    <option value=""
        page_size=""
        max_products=""
        max_images=""
        price=""
    >-- Select Ad Size --</option>

    <cfloop query="getFlyerInfo">
        <option value="#getFlyerCat.product_category#"
            page_size="#getFlyerInfo.page_size#"
            max_products="#getFlyerInfo.max_products#"
            max_images="#getFlyerInfo.max_images#"
            price="#getFlyerInfo.price#"
              ... >
            #getFlyerCat.product_category#
        </option>
    </cfloop>
</cfselect>

I have to query the other fields based on the product_category selection. The fields are page_size, max_products, max_images and price. Will this do that?

>  document.flyer.product_category.value = GetElementByID('#getFlyerInfo.product_category#');

Aren't those fields already in your "getFlyerInfo" query?  (They're in your original code).  If so, the new code is fine. It just reads a few more values from the query and stores them in the list <option>.

I plugged it in, but it doesn't seem to work.Can you look at the full page? Maybe I have something off.


<cfinclude template="v_header.cfm">
<cfparam name="product_category" default="Heavy Equipment">
<cfquery name="getFlyerInfo" datasource="#datasource#">
      select * from flyer_cost where product_category = '#product_category#'
</cfquery>
<cfquery name="getFlyerCat" datasource="#datasource#">
      select DISTINCT(product_category) from flyer_cost
</cfquery>
<cfoutput>
<script type="text/javascript">
      function categorySelected(list) {
             var maxProducts = list.options[list.selectedIndex].getAttribute("max_products");
             var maxImages = list.options[list.selectedIndex].getAttribute("max_images");
             var price = list.options[list.selectedIndex].getAttribute("price");
             document.getElementById('max_products').value = maxProducts;
             document.getElementById('max_images').value = maxImages;
             document.getElementById('price').value = price;
      }
</script>
</cfoutput>

<p><strong>Submission period closes 10/31/2012.</strong></p>
Net Prices offered during this promotion will be effective:
01/01/2013 -       03/31/2013
<br />
You may return this form and make changes during the submission period.
<cfquery name="getVendorInfo" datasource="#datasource#">
      select * from vendors where vcode = 9056
</cfquery>
<cfoutput>
<cfform method="post" action="flyer_step3.cfm" name="flyer">
<cfinput type="hidden" name="session.username" value="ACS">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50%">
            <span class="selAdTypeTxtCopy">The printed flyer publication is a full color, glossy, tabloid style magazine of 16 pages. Each page of the flyer measures 17&quot; tall by 11&quot; wide.<br />
        <br />
Selecting your Ad Size and Product Category below will generate a Max Products and Max Graphics quantity. These are suggested numbers based on typical layout, you may enter as many products as you like.<br />
<br />
Our publisher Summit Catalog will request approval on your ad layout before going to press.<br />
        <br />
        </span></td>
    <table width="100%" height="133" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td width="50%" align="left" valign="top" class="selAdTypeTxtCopy">
            <table width="100%" border="0" align="left" cellpadding="3" cellspacing="1" class="page2Table">
              <tr>
                <td width="11%">Company</td>
                <td width="89%">#campaign_contact#</td>
              </tr>
              <tr>
                <td>Name</td>
                <td>#campaign_profile_fullname#</td>
              </tr>
              <tr>
                <td>Email</td>
                <td>#campaign_profile_email#</td>
              </tr>
              <tr>
                <td>Title</td>
                <td>#campaign_profile_title#</td>
              </tr>
              <tr>
                <td>Phone</td>
                <td>#campaign_profile_phone#</td>
              </tr>
              <tr>
                <td>Fax</td>
                <td>#campaign_profile_fax#</td>
              </tr>
              <tr>
                <td>Freight Terms</td>
                <td>#campaign_profile_freight_policy#</td>
              </tr>
              <tr>
                <td>Comments</td>
                <td>#campaign_profile_comments#</td>
              </tr>
            </table></td>
            <td width="50%" align="left" valign="middle"><table width="60%" border="0" align="center" cellpadding="2" cellspacing="5">
              <tr>
                <td>Product Category</td>
                <td><cfselect name="page_size" id="page_size" onchange="javascript:categorySelected(this)">
                    <option value="" page_size=""
                        max_products=""
                        max_images=""
                        price="">-- Select Ad Size --</option>

                    <cfloop query="getFlyerInfo">
                        <option value="#getFlyerCat.product_category#"
                            page_size="#getFlyerInfo.page_size#"
                            max_products="#getFlyerInfo.max_products#"
                            max_images="#getFlyerInfo.max_images#"
                            price="#getFlyerInfo.price#">
                            #getFlyerCat.product_category#
                        </option>
                    </cfloop>
                </cfselect></td>
              </tr>
              <tr>
                              <td>Max Products</td>
                              <td><input type="text" name="max_products" value="#getFlyerInfo.max_products#" size="30" readonly class="readonly"></td>
                        </tr>
                        <tr>
                              <td>Max Graphics</td>
                              <td><input type="text" name="max_images" value="#getFlyerInfo.max_images#" size="30" readonly class="readonly"></td>
                        </tr>
                        <tr>
                              <td>Price</td>
                              <td><input type="text" name="price" value="#getFlyerInfo.price#" size="30" readonly class="readonly"></td>
                        </tr>
              <tr>
                <td colspan="2" align="center"><cfinput type="submit" name="submit" value="Next ->>" /></td>
              </tr>
            </table></td>
          </tr>
      </table>
  </cfform>
 </cfoutput>
<cfinclude template="v_footer.cfm">

Looks like you're mixing some of the query values.  See this working stand alone example:

<!--- sample query ONLY for testing  ---->
<cfset getFlyerInfo = queryNew("")>
<cfset queryAddColumn(getFlyerInfo, "product_category", listToArray("CatA,CatB,CatC"))>
<cfset queryAddColumn(getFlyerInfo, "page_size", listToArray("Size10,Size20,Size30"))>
<cfset queryAddColumn(getFlyerInfo, "max_products", listToArray("Prod18,Prod22,Prod62"))>
<cfset queryAddColumn(getFlyerInfo, "max_images", listToArray("Img3,Img5,Img9"))>
<cfset queryAddColumn(getFlyerInfo, "price", listToArray("Price50,Price80,Price72"))>

<script type="text/javascript">
      function categorySelected(list) {
             var maxProducts = list.options[list.selectedIndex].getAttribute("max_products");
             var maxImages = list.options[list.selectedIndex].getAttribute("max_images");
             var price = list.options[list.selectedIndex].getAttribute("price");
             document.getElementById('max_products').value = maxProducts;
             document.getElementById('max_images').value = maxImages;
             document.getElementById('price').value = price;
      }
</script>

<cfoutput>
<cfform method="post" action="flyer_step3.cfm" name="flyer">
	<cfselect name="page_size" id="page_size" onchange="javascript:categorySelected(this)">
    	<option value="" page_size=""
        		max_products=""
                max_images=""
                price="">-- Select Ad Size --</option>
		<cfloop query="getFlyerInfo">
        	<option value="#getFlyerInfo.product_category#"
            	page_size="#getFlyerInfo.page_size#"
                max_products="#getFlyerInfo.max_products#"
                max_images="#getFlyerInfo.max_images#"
                price="#getFlyerInfo.price#">
                #getFlyerInfo.product_category#
			</option>
		</cfloop>
	</cfselect>

	<input type="text" name="max_products" size="30" readonly class="readonly">
	<input type="text" name="max_images" size="30" readonly class="readonly">
	<input type="text" name="price" size="30" readonly class="readonly">
</cfform>
</cfoutput>

Select all Open in new window

This didn't work either. It isn't changing the fields based on the product_category selection.

See my updated response.

It's not an error actually, it just isn't dynamically updating the fields the way it is supposed to.

I have attached the spreadsheet for more detail.

I don't see any attachment.  

> It's not an error actually, it just isn't dynamically updating the fields the way it is supposed to.

Likely there is a javascript error. If you're using FF, check the error console. Did you try the updated version I posted? It's a stand alone example, you can run by itself.