using dropdown / dynamic display change

[J MCallister]

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_price" value="56.54" readonly>
</form>

That is the display of the current total

<select name="ShippingMethod" onChange="
this.form.price2.value=this.options[this.selectedIndex].id;ship
();this.form.price1.value=this.options[this.selectedIndex].id;total();">
name="total_price"<option value="">Select One</option>
<option value="Standard" id="5.49">Standard Shipping($5.49)</option>
<option value="Expedited" id="9.99">Expedited Shipping ($9.99)</option>
<option value="Rush" id="14.99">Rush 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_price" 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="ShippingMethod">
<option value="">Select One</option>
<option value="Standard">Standard Shipping($5.49)</option>
<option value="Expedited">Expedited Shipping ($9.99)</option>
<option value="Rush">Rush 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.

 

[Geoffrey Summerhayes]

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="ShippingMethod">
<option value="">Select One</option>
<option value="Standard">Standard Shipping($5.49)</option>
<option value="Expedited">Expedited Shipping ($9.99)</option>
<option value="Rush">Rush 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.getElementById('ShippingMethod').onchange=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.

 

[J MCallister]

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

document.getElementById('ShippingMethod').onchange=function(){...}

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

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.

 

[J MCallister]

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="ShippingMethod"
onChange="this.form.price1.value=this.options
[this.selectedIndex].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.getElementById
('ShippingMethod').onChange=this.form.price1.value
=this.options[this.selectedIndex].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.price1.value=this.options[this.selectedIndex].id

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

Help, silt vouz plait!

 

[Geoffrey Summerhayes]

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="ShippingMethod"
onChange="this.form.price1.value=this.options
[this.selectedIndex].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.getElementById
('ShippingMethod').onChange=this.form.price1.value
=this.options[this.selectedIndex].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.price1.value=this.options[this.selectedIndex].id

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

Try this...

var select=document.getElementById('ShippingMethod');
select.onchange=
function(elem)
{
return function()
{
var option=elem.options[elem.selectedIndex];
var str=/\(\$(.*)\)/.exec(option.innerHTML);
if(str)
{
var id=str[1];
window.alert(id);
}
}
}(select);