Solved

Javascript onChange using ColdFusion on select boxes and input fields

Posted on 2013-01-08
11
1,016 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
  • 6
  • 5
11 Comments
 

Author Comment

by:pulse239
Comment Utility
<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_
Comment Utility
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
Comment Utility
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
 
LVL 52

Expert Comment

by:_agx_
Comment Utility
>  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
Comment Utility
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 52

Expert Comment

by:_agx_
Comment Utility
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
Comment Utility
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
Comment Utility
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_
Comment Utility
See my updated response.
0
 

Author Comment

by:pulse239
Comment Utility
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_
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now