Solved

Javascript onChange using ColdFusion on select boxes and input fields

Posted on 2013-01-08
11
1,138 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
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
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 
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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Create an automated page index 9 51
function parameter and using that as array 15 23
removing a class in javascript 4 49
Only allow one check box 17 27
CFGRID Custom Functionality Series -  Part 1 Hi Guys, I was once asked how it is possible to to add a hyperlink in the cfgrid and open the window to show the data. Now this is quite simple, I have to use the EXT JS library for this and I achiev…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

829 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