pulse239
asked on
Javascript onChange using ColdFusion on select boxes and input fields
I am trying to get the select box and input boxes to change based on the first select box choice. Any ideas?
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.selected Index].get Attribute( "max_produ cts");
var maxImages = list.options[list.selected Index].get Attribute( "max_image s");
var price = list.options[list.selected Index].get Attribute( "price");
document.getElementById('m ax_product s').value = maxProducts;
document.getElementById('m ax_images' ).value = maxImages;
document.getElementById('p rice').val ue = price;
}
</script>
.... etc...
<cfselect name="page_size" id="page_size" onchange="javascript:categ orySelecte d(this)">
<option value=""
page_size=""
max_products=""
max_images=""
price=""
>-- Select Ad Size --</option>
<cfloop query="getFlyerInfo">
<option value="#getFlyerCat.produc t_category #"
page_size="#getFlyerInfo.p age_size#"
max_products="#getFlyerInf o.max_prod ucts#"
max_images="#getFlyerInfo. max_images #"
price="#getFlyerInfo.price #"
... >
#getFlyerCat.product_categ ory#
</option>
</cfloop>
</cfselect>
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.selected
var maxImages = list.options[list.selected
var price = list.options[list.selected
document.getElementById('m
document.getElementById('m
document.getElementById('p
}
</script>
.... etc...
<cfselect name="page_size" id="page_size" onchange="javascript:categ
<option value=""
page_size=""
max_products=""
max_images=""
price=""
>-- Select Ad Size --</option>
<cfloop query="getFlyerInfo">
<option value="#getFlyerCat.produc
page_size="#getFlyerInfo.p
max_products="#getFlyerInf
max_images="#getFlyerInfo.
price="#getFlyerInfo.price
... >
#getFlyerCat.product_categ
</option>
</cfloop>
</cfselect>
ASKER
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?
> document.flyer.product_cat egory.valu e = GetElementByID('#getFlyerI nfo.produc t_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>.
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>.
ASKER
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.selected Index].get Attribute( "max_produ cts");
var maxImages = list.options[list.selected Index].get Attribute( "max_image s");
var price = list.options[list.selected Index].get Attribute( "price");
document.getElementById('m ax_product s').value = maxProducts;
document.getElementById('m ax_images' ).value = maxImages;
document.getElementById('p rice').val ue = 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">T he printed flyer publication is a full color, glossy, tabloid style magazine of 16 pages. Each page of the flyer measures 17" tall by 11" 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_cont act#</td>
</tr>
<tr>
<td>Name</td>
<td>#campaign_profile_full name#</td>
</tr>
<tr>
<td>Email</td>
<td>#campaign_profile_emai l#</td>
</tr>
<tr>
<td>Title</td>
<td>#campaign_profile_titl e#</td>
</tr>
<tr>
<td>Phone</td>
<td>#campaign_profile_phon e#</td>
</tr>
<tr>
<td>Fax</td>
<td>#campaign_profile_fax# </td>
</tr>
<tr>
<td>Freight Terms</td>
<td>#campaign_profile_frei ght_policy #</td>
</tr>
<tr>
<td>Comments</td>
<td>#campaign_profile_comm ents#</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:categ orySelecte d(this)">
<option value="" page_size=""
max_products=""
max_images=""
price="">-- Select Ad Size --</option>
<cfloop query="getFlyerInfo">
<option value="#getFlyerCat.produc t_category #"
page_size="#getFlyerInfo.p age_size#"
max_products="#getFlyerInf o.max_prod ucts#"
max_images="#getFlyerInfo. max_images #"
price="#getFlyerInfo.price #">
#getFlyerCat.product_categ ory#
</option>
</cfloop>
</cfselect></td>
</tr>
<tr>
<td>Max Products</td>
<td><input type="text" name="max_products" value="#getFlyerInfo.max_p roducts#" size="30" readonly class="readonly"></td>
</tr>
<tr>
<td>Max Graphics</td>
<td><input type="text" name="max_images" value="#getFlyerInfo.max_i mages#" 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">
<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)
</cfquery>
<cfoutput>
<script type="text/javascript">
function categorySelected(list) {
var maxProducts = list.options[list.selected
var maxImages = list.options[list.selected
var price = list.options[list.selected
document.getElementById('m
document.getElementById('m
document.getElementById('p
}
</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">T
<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_cont
</tr>
<tr>
<td>Name</td>
<td>#campaign_profile_full
</tr>
<tr>
<td>Email</td>
<td>#campaign_profile_emai
</tr>
<tr>
<td>Title</td>
<td>#campaign_profile_titl
</tr>
<tr>
<td>Phone</td>
<td>#campaign_profile_phon
</tr>
<tr>
<td>Fax</td>
<td>#campaign_profile_fax#
</tr>
<tr>
<td>Freight Terms</td>
<td>#campaign_profile_frei
</tr>
<tr>
<td>Comments</td>
<td>#campaign_profile_comm
</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:categ
<option value="" page_size=""
max_products=""
max_images=""
price="">-- Select Ad Size --</option>
<cfloop query="getFlyerInfo">
<option value="#getFlyerCat.produc
page_size="#getFlyerInfo.p
max_products="#getFlyerInf
max_images="#getFlyerInfo.
price="#getFlyerInfo.price
#getFlyerCat.product_categ
</option>
</cfloop>
</cfselect></td>
</tr>
<tr>
<td>Max Products</td>
<td><input type="text" name="max_products" value="#getFlyerInfo.max_p
</tr>
<tr>
<td>Max Graphics</td>
<td><input type="text" name="max_images" value="#getFlyerInfo.max_i
</tr>
<tr>
<td>Price</td>
<td><input type="text" name="price" value="#getFlyerInfo.price
</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">
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>
ASKER
This didn't work either. It isn't changing the fields based on the product_category selection.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
See my updated response.
ASKER
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.
I have attached the spreadsheet for more detail.
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.
> 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.
ASKER
select * from flyer_cost where product_category = '#product_category#'
</cfquery>
<cfquery name="getFlyerCat" datasource="#datasource#">
select DISTINCT(product_category)
</cfquery>
<cfoutput>
<script language="JavaScript">
function PopulateMe()
{
document.flyer.product_cat
document.flyer.page_size.v
document.flyer.max_product
document.flyer.max_images.
document.flyer.price.value
}
</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:Popul
<option value="">-- Select Product Category --</option>
<cfloop query="getFlyerCat">
<option value="#getFlyerCat.produc
</cfloop>
</cfselect></td>
</tr><tr>
<td>Ad Size</td>
<td><cfselect name="page_size" id="page_size" onchange="javascript:Popul
<option value="">-- Select Ad Size --</option>
<cfloop query="getFlyerInfo">
<option value="#getFlyerInfo.page_
</cfloop>
</cfselect></td>
</tr>
<tr>
<td>Max Products</td>
<td><input type="text" name="max_products" value="#getFlyerInfo.max_p
</tr>
<tr>
<td>Max Graphics</td>
<td><input type="text" name="max_images" value="#getFlyerInfo.max_i
</tr>
<tr>
<td>Price</td>
<td><input type="text" name="price" value="#getFlyerInfo.price
</tr>
<tr>
<td colspan="2" align="center"><cfinput type="submit" name="submit" value="Next ->>" /></td>
</tr>
</table>
</cfform>