Solved

Why is my JavaScript code not changing the values using the onChange method?

Posted on 2013-11-09
11
240 Views
Last Modified: 2013-11-14
My code is below. For some reason, the code is not changing the fields when the category and ad size like it should. Their are corresponding numbers for the categories, as sizes, etc. Any ideas as to why this isn't working?

<cfparam name="product_category" default="1">

<cfquery name="getFlyerInfo" datasource="mydatasource">
	select * from flyer_cost where fcid = #product_category#
</cfquery>

<cfquery name="getFlyerCat" datasource="mydatasource">
	select * from flyer_category
</cfquery>

<cfquery name="getFlyerSize" datasource="mydatasource">
	select * from flyer_size
</cfquery>

<cfoutput>
<script language="JavaScript">
function PopulateMe()
{

document.flyer.product_category.value = GetElementByID('#getFlyerInfo.fcid#');
document.flyer.page_size.value = GetElementByID('#getFlyerInfo.fsid#');
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>
</cfoutput>
<cfquery name="getFlyerDate" datasource="mydatasource">
	select * from flyer_campaign
</cfquery>
<cfoutput>

<p><strong>FLYER SUBMISSION PERIOD CLOSES #DateFormat(getFlyerDate.penddate, 'mm/dd/yyyy')#</strong>
You may return to this form and make changes anytime during the submission period.</p>

<p><strong>FLYER PUBLICATION DATES</strong>
Net Prices offered during this promotion will be effective <em>#DateFormat(getFlyerDate.startdate, 'mm/dd/yyyy')# - #DateFormat(getFlyerDate.enddate, 'mm/dd/yyyy')#</em>
<br />
	You may return to this form and make changes anytime during the submission period.</p>
</cfoutput>
<cfquery name="getVendorInfo" datasource="mydatasource">
	select * from flyer_vendor_campaigns where vcode = '#vcode#'
</cfquery>

<cfoutput>
<cfform method="post" action="flyer_step3.cfm" name="flyer">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50%"></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%">#getVendorInfo.contact#</td>
              </tr>
              <tr>
                <td>Name</td>
                <td>#getVendorInfo.fullname#</td>
              </tr>
              <tr>
                <td>Email</td>
                <td>#getVendorInfo.email#</td>
              </tr>
              <tr>
                <td>Title</td>
                <td>#getVendorInfo.title#</td>
              </tr>
              <tr>
                <td>Phone</td>
                <td>#INSERT("-", INSERT("-", getVendorInfo.phone, 3), 7)#</td>
              </tr>
              <tr>
                <td>Fax</td>
                <td>#INSERT("-", INSERT("-", getVendorInfo.fax, 3), 7)#</td>
              </tr>
              <tr>
                <td>Freight Terms</td>
                <td>#getVendorInfo.freight_policy#</td>
              </tr>
              <tr>
                <td>Comments</td>
                <td>#getVendorInfo.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="product_category" id="product_category" onchange="javascript:PopulateMe(this)">
                  <option value="">-- Select Product Category --</option>
                  <cfloop query="getFlyerCat">
                  <option value="#getFlyerCat.fcid#"<cfif len(getFlyerInfo.fcid) gt 0 and getFlyerInfo.fcid is "#getFlyerInfo.fcid#"> selected</cfif>>#getFlyerCat.flyer_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="getFlyerSize">
                  <option value="#getFlyerSize.fsid#"<cfif len(getFlyerInfo.fsid) gt 0 and getFlyerInfo.fsid is "#getFlyerSize.fsid#"> selected</cfif>>#getFlyerSize.ad_size#</option>
                  </cfloop>
                </cfselect></td>
              </tr>
              <tr>
					<td>Max Products</td>
					<td><input type="text" name="max_products" value="#getFlyerInfo.max_products#" size="30"></td>
				</tr>
				<tr>
					<td>Max Graphics</td>
					<td><input type="text" name="max_images" value="#getFlyerInfo.max_images#" size="30"></td>
				</tr>
				<tr>
					<td>Price</td>
					<td><input type="text" name="price" value="#getFlyerInfo.price#" size="30"></td>
				</tr>
              <tr>
                <td colspan="2" align="center"><cfinput type="submit" name="submit" value="Next ->>" /></td>
              </tr>
            </table></td>
          </tr>
	</table>
  </cfform>
 </cfoutput>

Open in new window

0
Comment
Question by:pulse239
  • 4
  • 3
  • 2
  • +2
11 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39636806
do a right click on the page in your web browser, choose view source and post it here.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39637108
GetElementByID is a spelling error the correct name of the methods is
getElementById

In javascript the DOM methods and properties are case sensitive.

Also you are calling the function with the parameter this but the function does not use a parameter.

Cd&
0
 
LVL 9

Expert Comment

by:Sar1973
ID: 39637210
Your PopulateMe() function does not have an argument, so if you call it with "this" or whatelse as argument it may not work properly.
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

Author Comment

by:pulse239
ID: 39637725
I changed the code and get s different error, which I guess is a good sign, however it is odd.
The error says, but the variable fsid is in the table as an int type field

 Variable FSID is undefined.
 
The error occurred in D:/Inetpub/url/admin/vendors/flyer_step2.cfm: line 6

4 :
5 : <cfquery name="getFlyerInfo" datasource="mydatasource">
6 :       select * from flyer_cost where fsid = #fsid#
7 : </cfquery>
8 : <cfquery name="getFlyerCat" datasource="mydatasource">



MY NEW CODE:

   
<cfparam name="fcid" default="1">
    <cfparam name="fsid" default="1">
    
    <cfquery name="getFlyerInfo" datasource="mydatasource">
        select * from flyer_cost where fsid = #fsid#
    </cfquery>
    <cfquery name="getFlyerCat" datasource="mydatasource">
        select * from flyer_category
    </cfquery>
    <cfquery name="getFlyerSize" datasource="mydatasource">
        select * from flyer_size
    </cfquery>
    <cfoutput>
    <script language="JavaScript">
    function PopulateMe()
    {
    
    document.flyer.flyer_category.value = getElementById('#getFlyerInfo.fcid#');
    document.flyer.page_size.value = getElementById('#getFlyerInfo.fsid#');
    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>
    </cfoutput>
    <cfquery name="getFlyerDate" datasource="mydatasource">
        select * from flyer_campaign
    </cfquery>
    
    <cfquery name="getVendorInfo" datasource="mydatasource">
        select * from flyer_vendor_campaigns where vcode = '#vcode#'
    </cfquery>
    
    <cfoutput>
    <cfform method="post" action="flyer_step3.cfm" name="flyer">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="50%">{text}</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%">#getVendorInfo.contact#</td>
                  </tr>
                  <tr>
                    <td>Name</td>
                    <td>#getVendorInfo.fullname#</td>
                  </tr>
                  <tr>
                    <td>Email</td>
                    <td>#getVendorInfo.email#</td>
                  </tr>
                  <tr>
                    <td>Title</td>
                    <td>#getVendorInfo.title#</td>
                  </tr>
                  <tr>
                    <td>Phone</td>
                    <td>#INSERT("-", INSERT("-", getVendorInfo.phone, 3), 7)#</td>
                  </tr>
                  <tr>
                    <td>Fax</td>
                    <td>#INSERT("-", INSERT("-", getVendorInfo.fax, 3), 7)#</td>
                  </tr>
                  <tr>
                    <td>Freight Terms</td>
                    <td>#getVendorInfo.freight_policy#</td>
                  </tr>
                  <tr>
                    <td>Comments</td>
                    <td>#getVendorInfo.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="fcid" id="fcid">
                      <option value="">-- Select Product Category --</option>
                      <cfloop query="getFlyerCat">
                      <option value="#getFlyerCat.fcid#"<cfif len(getFlyerInfo.fcid) gt 0 and getFlyerInfo.fcid is "#getFlyerInfo.fcid#"> selected</cfif>>#getFlyerCat.flyer_category#</option>
                      </cfloop>
                    </cfselect></td>
                  </tr><tr>
                    <td>Ad Size</td>
                    <td><cfselect name="fsid" id="fsid" onchange="javascript:PopulateMe(fsid);">
                      <option value="">-- Select Ad Size --</option>
                      <cfloop query="getFlyerSize">
                      <option value="#getFlyerSize.fsid#"<cfif len(getFlyerInfo.fsid) gt 0 and getFlyerInfo.fsid is "#getFlyerSize.fsid#"> selected</cfif>>#getFlyerSize.ad_size#</option>
                      </cfloop>
                    </cfselect></td>
                  </tr>
                  <tr>
                        <td>Max Products</td>
                        <td><input type="text" name="max_products" value="#getFlyerInfo.max_products#" size="30"></td>
                    </tr>
                    <tr>
                        <td>Max Graphics</td>
                        <td><input type="text" name="max_images" value="#getFlyerInfo.max_images#" size="30"></td>
                    </tr>
                    <tr>
                        <td>Price</td>
                        <td><input type="text" name="price" value="#getFlyerInfo.price#" size="30"></td>
                    </tr>
                  <tr>
                    <td colspan="2" align="center"><cfinput type="submit" name="submit" value="Next ->>" /></td>
                  </tr>
                </table></td>
              </tr>
        </table>
      </cfform>
     </cfoutput>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 39637733
do a right click on the page in your web browser, choose view source and post it here.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39637742
Try this :
<cfparam name="fcid" default="1">
    <cfparam name="fsid" default="1">
    
    <cfquery name="getFlyerInfo" datasource="mydatasource">
        select * from flyer_cost where fsid = #fsid#
    </cfquery>
    <cfquery name="getFlyerCat" datasource="mydatasource">
        select * from flyer_category
    </cfquery>
    <cfquery name="getFlyerSize" datasource="mydatasource">
        select * from flyer_size
    </cfquery>
    <cfoutput>
    <script language="JavaScript">
    function PopulateMe()
    {
    
    document.flyer.flyer_category.value = document.getElementById('#getFlyerInfo.fcid#');
    document.flyer.page_size.value = document.getElementById('#getFlyerInfo.fsid#');
    document.flyer.max_products.value = document.getElementById('#getFlyerInfo.max_products#');
    document.flyer.max_images.value = document.getElementById('#getFlyerInfo.max_images#');
    document.flyer.price.value = document.getElementById('#getFlyerInfo.price#');
    
    }
    
    </script>
    </cfoutput>
    <cfquery name="getFlyerDate" datasource="mydatasource">
        select * from flyer_campaign
    </cfquery>
    
    <cfquery name="getVendorInfo" datasource="mydatasource">
        select * from flyer_vendor_campaigns where vcode = '#vcode#'
    </cfquery>
    
    <cfoutput>
    <cfform method="post" action="flyer_step3.cfm" name="flyer">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="50%">{text}</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%">#getVendorInfo.contact#</td>
                  </tr>
                  <tr>
                    <td>Name</td>
                    <td>#getVendorInfo.fullname#</td>
                  </tr>
                  <tr>
                    <td>Email</td>
                    <td>#getVendorInfo.email#</td>
                  </tr>
                  <tr>
                    <td>Title</td>
                    <td>#getVendorInfo.title#</td>
                  </tr>
                  <tr>
                    <td>Phone</td>
                    <td>#INSERT("-", INSERT("-", getVendorInfo.phone, 3), 7)#</td>
                  </tr>
                  <tr>
                    <td>Fax</td>
                    <td>#INSERT("-", INSERT("-", getVendorInfo.fax, 3), 7)#</td>
                  </tr>
                  <tr>
                    <td>Freight Terms</td>
                    <td>#getVendorInfo.freight_policy#</td>
                  </tr>
                  <tr>
                    <td>Comments</td>
                    <td>#getVendorInfo.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="fcid" id="fcid">
                      <option value="">-- Select Product Category --</option>
                      <cfloop query="getFlyerCat">
                      <option value="#getFlyerCat.fcid#"<cfif len(getFlyerInfo.fcid) gt 0 and getFlyerInfo.fcid is "#getFlyerInfo.fcid#"> selected</cfif>>#getFlyerCat.flyer_category#</option>
                      </cfloop>
                    </cfselect></td>
                  </tr><tr>
                    <td>Ad Size</td>
                    <td><cfselect name="fsid" id="fsid" onchange="javascript:PopulateMe();">
                      <option value="">-- Select Ad Size --</option>
                      <cfloop query="getFlyerSize">
                      <option value="#getFlyerSize.fsid#"<cfif len(getFlyerInfo.fsid) gt 0 and getFlyerInfo.fsid is "#getFlyerSize.fsid#"> selected</cfif>>#getFlyerSize.ad_size#</option>
                      </cfloop>
                    </cfselect></td>
                  </tr>
                  <tr>
                        <td>Max Products</td>
                        <td><input type="text" name="max_products" value="#getFlyerInfo.max_products#" size="30"></td>
                    </tr>
                    <tr>
                        <td>Max Graphics</td>
                        <td><input type="text" name="max_images" value="#getFlyerInfo.max_images#" size="30"></td>
                    </tr>
                    <tr>
                        <td>Price</td>
                        <td><input type="text" name="price" value="#getFlyerInfo.price#" size="30"></td>
                    </tr>
                  <tr>
                    <td colspan="2" align="center"><cfinput type="submit" name="mySubmit" value="Next ->>" /></td>
                  </tr>
                </table></td>
              </tr>
        </table>
      </cfform>
     </cfoutput>

Open in new window

0
 

Author Comment

by:pulse239
ID: 39637755
I tried your code, but t doesn't change the price and number of images and products on the ad size change (fsid value). This is so odd. I don't see anything wrong with the code at all.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39638951
Either post a link or the rendered code.  As long as we only have cf code to look at we don't know what the scripting is working with and it becomes a time wasting guessing game.

Cd&
0
 
LVL 52

Accepted Solution

by:
_agx_ earned 500 total points
ID: 39639627
Even if you resolve the syntax errors - that code isn't going to work the way you're thinking. Javascript can't run CF code, so the above WON'T re-run the cfquery's and return data for the new "fsid" and "fcid" values you selected.  That can't be done w/client side code alone. You need to either resubmit the form OR if you don't want to leave the page - use ajax.

I'd suggest starting over from scratch. Explain what you're trying to do in plain english, and the Javascript experts can advise you on how to achieve that with ajax.
0
 

Author Comment

by:pulse239
ID: 39649884
I FINALLY got it! Yay! I just submitted itself to the same page and changed the value based on the ad size.

<cfselect name="fsid" id="fsid" onchange="this.form.action='flyer_step2.cfm?fid=#fid#&vcode=#vcode#'; this.form.submit()">

Why is it the easiest are sometimes the most difficult to see? lol

Thanks for all the help! It pointed me in the right direction.
0
 

Author Closing Comment

by:pulse239
ID: 39649885
This was the most helpful. Thank you very much. :)
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
SQL Server - Find Parent/Child relationship tree between numeric range. 7 39
jqury 17 28
asp.net mvc5 6 11
Call a function within the ASP code 4 5
Sometimes databases have MILLIONS of records and we need a way to quickly query that table to return the results me need. Sure you could use CFQUERY but it takes too long when there are millions of records. That is why SOLR was invented. Please …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

816 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

7 Experts available now in Live!

Get 1:1 Help Now