Avatar of pulse239
pulse239
 asked on

Javascript onChange using ColdFusion on select boxes and input fields

I am trying to get the select box and input boxes to change based on the first select box choice. Any ideas?
JavaScriptColdFusion LanguageJScript

Avatar of undefined
Last Comment
_agx_

8/22/2022 - Mon
pulse239

ASKER
<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>
_agx_

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>
pulse239

ASKER
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?
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
_agx_

>  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>.
pulse239

ASKER
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">
_agx_

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>

Open in new window

⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
pulse239

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

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
_agx_

See my updated response.
pulse239

ASKER
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.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
_agx_

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.