473,573 Members | 2,870 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

using dropdown / dynamic display change

Hello, I am working on a shopping cart where the viewer sees a dropdown
with shipping options, each with a price.

Elsewhere on the page is a display of the total.

I am working on having the dropdown update the total when a different
option is selected.

So far I have it worked out doing it this way:

<form name="form2"
<input type="text" name="total_pri ce" value="56.54" readonly>
</form>

That is the display of the current total

<select name="ShippingM ethod" onChange="
this.form.price 2.value=this.op tions[this.selectedIn dex].id;ship
();this.form.pr ice1.value=this .options[this.selectedIn dex].id;total();">
name="total_pri ce"<option value="">Select One</option>
<option value="Standard " id="5.49">Stand ard Shipping($5.49) </option>
<option value="Expedite d" id="9.99">Exped ited Shipping ($9.99)</option>
<option value="Rush" id="14.99">Rus h Shipping ($14.99)</option>
</select>

The above is the dropdown.

FOr the sake of brevity I have left out all the javascript functions,
but you can see the basics of what is going on. Changing the dropdown
will take whatever value is in the option id="x.xx" and add it to the
"total_pric e" field in "form2"

That works just fine.

But I have a problem now.

I have to figure out a way to do the same in a case where I *do not*
have the ability to modify the dropdown. In that case it is going to end
up on the page very plainly like this:

<select name="ShippingM ethod">
<option value="">Select One</option>
<option value="Standard ">Standard Shipping($5.49) </option>
<option value="Expedite d">Expedited Shipping ($9.99)</option>
<option value="Rush">Ru sh Shipping ($14.99)</option>
</select>

I cannot get in there to add the onchange event handler, nor get the
id="x.xx" to the options for the amount to add. The dropdown is
generated by a closed source 3rd party application and I have no ability
to modify its output.

Is it going to be possible to replicate the functionality? I guess
somehow I need to take the string presented inside each option such as:

Standard Shipping($5.49)

and discard everything except what is between the parenthesis, discard
the dollar sign and hold the result in a variable, do that for every
option and go from there.

If anyone could chime in and give me some thoughts on how to accomplish
this, I would appreciate it as right now it is beyond my understanding.
Jun 8 '07 #1
4 5245
On Jun 8, 4:27 pm, J MCallister <J...@nospam.co mwrote:
>
I have to figure out a way to do the same in a case where I *do not*
have the ability to modify the dropdown. In that case it is going to end
up on the page very plainly like this:

<select name="ShippingM ethod">
<option value="">Select One</option>
<option value="Standard ">Standard Shipping($5.49) </option>
<option value="Expedite d">Expedited Shipping ($9.99)</option>
<option value="Rush">Ru sh Shipping ($14.99)</option>
</select>

I cannot get in there to add the onchange event handler, nor get the
id="x.xx" to the options for the amount to add. The dropdown is
generated by a closed source 3rd party application and I have no ability
to modify its output.
I don't understand, why can't you just assign a function
to the onchange handler to the select after the fact?

document.getEle mentById('Shipp ingMethod').onc hange=function( ){...}

Is it going to be possible to replicate the functionality? I guess
somehow I need to take the string presented inside each option such as:

Standard Shipping($5.49)

and discard everything except what is between the parenthesis, discard
the dollar sign and hold the result in a variable, do that for every
option and go from there.
A regular expression would do this easily.

---
Geoff

Jun 8 '07 #2

>
I don't understand, why can't you just assign a function
to the onchange handler to the select after the fact?

document.getEle mentById('Shipp ingMethod').onc hange=function( ){...}
So that would be in its own function and then is called how?

>
>Is it going to be possible to replicate the functionality? I guess
somehow I need to take the string presented inside each option such as:

Standard Shipping($5.49)

and discard everything except what is between the parenthesis, discard
the dollar sign and hold the result in a variable, do that for every
option and go from there.

A regular expression would do this easily.
Er.. this I don't get at all, yet. Or how the above handler will change
once I do get it.

I'm goggling now, but any further hints at how on both of these would be
greatly appreciated.
Jun 8 '07 #3
I'm sort of getting it but I am stuck
The way I figured out how to make this function when I was able to put
an onchange event handler like this:

<select name="ShippingM ethod"
onChange="this. form.price1.val ue=this.options
[this.selectedIn dex].id;tota
l();">

What this does is change the value of a hidden field in the form called
price1 to whatever value is assigned to the option id. That worked
fine.

But when I try to do it this way:

<script type="text/javascript">
document.getEle mentById
('ShippingMetho d').onChange=th is.form.price1. value
=this.options[this.selectedIn dex].id;total(); </script>

It doesn't work. Something is not right with the syntax I think when
doing it this way.

The function total(); triggers fine. But the rest of it doesn't work.

DO I need to move this:

this.form.price 1.value=this.op tions[this.selectedIn dex].id

out of the above block, put it in is own function and then call that?

Help, silt vouz plait!
>
>>
I don't understand, why can't you just assign a function
to the onchange handler to the select after the fact?

document.getEl ementById('Ship pingMethod').on change=function (){...}

So that would be in its own function and then is called how?

>>
>>Is it going to be possible to replicate the functionality? I guess
somehow I need to take the string presented inside each option such
as:

Standard Shipping($5.49)

and discard everything except what is between the parenthesis,
discard the dollar sign and hold the result in a variable, do that
for every option and go from there.

A regular expression would do this easily.

Er.. this I don't get at all, yet. Or how the above handler will
change once I do get it.

I'm goggling now, but any further hints at how on both of these would
be greatly appreciated.


Jun 9 '07 #4
On Jun 8, 10:02 pm, J MCallister <J...@nospam.co mwrote:
I'm sort of getting it but I am stuck

The way I figured out how to make this function when I was able to put
an onchange event handler like this:

<select name="ShippingM ethod"
onChange="this. form.price1.val ue=this.options
[this.selectedIn dex].id;tota
l();">

What this does is change the value of a hidden field in the form called
price1 to whatever value is assigned to the option id. That worked
fine.

But when I try to do it this way:

<script type="text/javascript">
document.getEle mentById
('ShippingMetho d').onChange=th is.form.price1. value
=this.options[this.selectedIn dex].id;total(); </script>

It doesn't work. Something is not right with the syntax I think when
doing it this way.

The function total(); triggers fine. But the rest of it doesn't work.

DO I need to move this:

this.form.price 1.value=this.op tions[this.selectedIn dex].id

out of the above block, put it in is own function and then call that?
Try this...

var select=document .getElementById ('ShippingMetho d');
select.onchange =
function(elem)
{
return function()
{
var option=elem.opt ions[elem.selectedIn dex];
var str=/\(\$(.*)\)/.exec(option.in nerHTML);
if(str)
{
var id=str[1];
window.alert(id );
}
}
}(select);

----
Geoff

Jun 9 '07 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

13
9601
by: Stumped and Confused | last post by:
Hello, I really, really, need some help here - I've spent hours trying to find a solution. In a nutshell, I'm trying to have a user input a value in form's textfield. The value should then be assigned to a variable and output using document.write. (Note, there is no submit button or other form elements. Basically
3
10740
by: Robert Mark Bram | last post by:
Hi All! Has anyone seen an example of the following javascript powered control: - a dropdown select menu - the width of the control is set. Assume by "control" I mean the visible part of the drop down before a mouse click occurs. - the width of the list when selected is dynamic - the width of the list can grow beyond the width of the...
7
8496
by: Nicolae Fieraru | last post by:
Hi All, I am trying to change the rowsource of a combobox when I click on it. I played with many events, associated with the form and the combobox, but still haven't figured out what is the way of doing it. I have a table with products, tblProducts, some of them are Active while others are Inactive. The form shows all the products...
1
1336
by: sk | last post by:
I have a situation where the list of tables(database) and the columns for each table must be displayed for selection. for each member(displayed in each row) i have to select a table and a column from that table. since the number of rows are dynamic i am creating as below... Dim tRow As New TableRow() Dim tCell1 As New TableCell(), tCell2 As...
3
3020
by: sewerized | last post by:
Hello all, I'm having a problem with a user preferences form I'm creating. I want to use dynamic dropdown SELECT boxes for this so my page doesn't get cluttered with 100000 links. Since I have 10000 Options embedded in the SELECT tags, I'm using an External JS file to display them. I'm using these same Options for different SELECT tags,...
0
2902
by: cindy | last post by:
I have a dynamic datagrid. I have custom classes for the controls public class CreateEditItemTemplateDDL : ITemplate { DataTable dtBind; string strddlName; string strSelectedID; string strDataValueField; string strDataTextField; public CreateEditItemTemplateDDL(string DDLName,string DataValueField,string
4
2616
by: Greg Scharlemann | last post by:
I'm trying to setup a dyamic dropdown list that displays a number of text fields based on the selected number in the dropdown. The problem I am running into is capturing the data already entered before the list is repopulated. For example, suppose the user selects 3 in the drop down list and 3 text fields are shown. If the user populates the...
1
2655
by: luispunchy | last post by:
I have an accordion style dropdown list/sublist menu (functions similar to the "today on WebMD video" widget found on http://www.webmd.com/) - it will allow users to click on a headline (from the main list) to open up the full listing (sublist) below that headline. My JavaScript is almost but not quite working as needed. It also serves up an...
1
2693
by: SunshineInTheRain | last post by:
The following code is dynamic create dropdownmenu which data within pulled from database However, the code work well on IE but not on Firefox. On Firefox, the whole mouseover and mouseout function din't work. what is not supported on Firefox? the javascript syntax? please help as i am not familiar with javascript. thanks in advanced. this is...
0
7771
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7686
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8009
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
8060
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6406
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
0
3730
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3731
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1296
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1036
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.