pulse239
asked on
Why is my JavaScript code not changing the values using the onChange method?
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>
leakim971
do a right click on the page in your web browser, choose view source and post it here.
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&
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&
Your PopulateMe() function does not have an argument, so if you call it with "this" or whatelse as argument it may not work properly.
ASKER
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/vendo
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:
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/vendo
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>
do a right click on the page in your web browser, choose view source and post it here.
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>ASKER
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.
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&
Cd&
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
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.
<cfselect name="fsid" id="fsid" onchange="this.form.action
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.
ASKER
This was the most helpful. Thank you very much. :)