Solved

Javascript onChange using ColdFusion on select boxes and input fields

Posted on 2013-01-08
11
1,167 Views
Last Modified: 2013-01-25
I am trying to get the select box and input boxes to change based on the first select box choice. Any ideas?
0
Comment
Question by:pulse239
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
11 Comments
 

Author Comment

by:pulse239
ID: 38754853
<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>
0
 
LVL 52

Expert Comment

by:_agx_
ID: 38755141
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>
0
 

Author Comment

by:pulse239
ID: 38755481
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?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 52

Expert Comment

by:_agx_
ID: 38755540
>  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>.
0
 

Author Comment

by:pulse239
ID: 38756212
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">
0
 
LVL 52

Expert Comment

by:_agx_
ID: 38756276
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

0
 

Author Comment

by:pulse239
ID: 38756726
This didn't work either. It isn't changing the fields based on the product_category selection.
0
 
LVL 52

Accepted Solution

by:
_agx_ earned 500 total points
ID: 38756798
Edit:  Ack ... sorry copy and paste error.  

<!--- 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" id="max_products" name="max_products" size="30" readonly class="readonly">
	<input type="text" id="max_images" name="max_images" size="30" readonly class="readonly">
	<input type="text" id="price" name="price" size="30" readonly class="readonly">
</cfform>
</cfoutput>
                                            

Open in new window

0
 
LVL 52

Expert Comment

by:_agx_
ID: 38756915
See my updated response.
0
 

Author Comment

by:pulse239
ID: 38762724
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.
0
 
LVL 52

Expert Comment

by:_agx_
ID: 38763045
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.
0

Featured Post

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Hi, Even though I have created this Tutorial on My personal Blog, Some people might not able to find my website, So here i am posting it again Today, from the topic it is very clear that i will be showing you here the very basic usage of how we …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question