Update form field based on outcome of a seperate select dropdown

Javascript function that calculates a value based on option selection

[jomoweb]

The function would update a second hidden field based on the selection of an option. The "shipping" field shows the cost to ship one item, and the "shipping2" field is the cost to ship an additional item. For instance, if a customer selects to buy one book and have it shipped to the US, it would be $6.00 to ship. But 2 books would be $8.00 since the shipping2 charge is $2.00. 3 books would be $10.00.

The form looks like this:
<select name="shipping" id="shipping" onChange="update()">
<option value="6.00">United States</option>
<option value="17.00">Canada</option>
<option value="24.00">Republic of Ireland</option>

<input type="hidden" name="shipping2" value="(Value to Update)">

[MichaelBluejay]

It's not clear how your script is supposed to determine how many books the customer has, nor where any of this data goes. My solution would be something like this:

<option value="6,2">United States</option>

Assuming you're handing off the data to a Perl script, that script can calculate the total shipping based on the two-tiered numbers that you pass to it.

[jomoweb]

Michael,

Thanks for reading, it looks like I need to be more specific. I am passing the form to a payment gateway (paypal in this case), so I can't modify the pass script, instead I have to hack the standard form to pass the right variables.

Here is what I have so far. What I need to accomplish is getting the "shipping2" field to update onchange when a user selects from the "shipping" field drop-down. "Shipping" signals how much 1 book will cost, and "shipping2" signals how much each additional book will cost.

The JavaScript:

<script type="text/javascript">
<!--
function Dollar (val) { // force to valid dollar amount
var str,pos,rnd=0;
 if (val < .995) rnd = 1; // for old Netscape browsers
 str = escape (val*1.0 + 0.005001 + rnd); // float, round, escape
 pos = str.indexOf (".");
 if (pos > 0) str = str.substring (rnd, pos + 3);
 return str;
}

function SetShip (obj1) { // record selected shipping option
var j,obj,pos,tok,val,txt;
var ary = new Array ();
 obj = obj1.shp; // refer to shipping select
 pos = obj.selectedIndex; // get selection
 if (pos == 0) { // force a selection
 alert ("Make a shipping selection!");
 return false;
 }
 obj1.handling.value = "0";
 obj1.handling_cart.value = "0";
 obj1.shipping.value = "0";
 obj1.shipping2.value = "0";
 val = obj.options[pos].value; // selected value
 txt = obj.options[pos].text; // the text value
 ary = val.split (" "); // break apart
 for (j=0; j<ary.length; j++) { // look at all items
// do 3-character tokens...
 if (ary[j].length < 4) continue;
 tok = ary[j].substring (0,3); // first 3 chars
 val = ary[j].substring (3); // get data
 if (tok == "hn=") // value for item handling
 obj1.handling.value = val;
 if (tok == "hc=") // value for handling cart
 obj1.handling_cart.value = val;
 if (tok == "s1=") // value for shipping
 obj1.shipping.value = val;
 if (tok == "s2=") // value for shipping2
 obj1.shipping2.value = val;
 }
 obj1.os0.value = txt; // stuff the text into options field
}
//-->
</script>

The form:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" onsubmit="this.target = 'paypal'; ReadForm (this);">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<input type="hidden" name="business" value="[e-mail]">
<input type="hidden" name="item_name" value="Book @ 49.95">
<input type="hidden" name="amount" value="49.95">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="handling" value="">
<input type="hidden" name="handling_cart" value="">
<input type="hidden" name="shipping" value="">
<input type="hidden" name="shipping2" value="0">
<input type="hidden" name="on0" value="Shipping">
<input type="hidden" name="os0" value="USPS">
<select name="shp">
 <option>Select Shipping</option>
 <option value="s1=6.00">United States $6.00</option>
 <option value="s1=17.00">Canada $17.00</option>
 <option value="s1=24.00">Ireland $24.00</option>
 <option value="s1=29.00">International $30.00</option>
</select>
<select name="quantity">
 <option>Select Quantity</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
</select>

<input type="image" src="images/button.gif" name="submit" alt="Add to Cart">
</form>

[MichaelBluejay]

It's not true that just because you're passing to PayPal you have no control over the script. You can have a Perl script that prints out the <FORM> and all the fields (with the proper values filled in), and *then* the Submit button takes the user to PayPal. I do this all the time. I hate PayPal's cart so I write my own and then just hand the user off to PayPal when they're done.

If you're using PayPal's cart then you might not have any way to determine the number of items in the cart, and thus no way to tell the user the actual shipping cost before they go to PayPal. Obviously this does a disservice to the user. In fact, it looks like you're requiring the user to *tell* you how many books they ordered. That's kind of crazy. Doesn't PayPal have some kind of way to automatically calculate shipping costs based on the number of items? It should. If not, then this is even more reason for running your own cart instead of PayPal's.

But if you're determined to do this the kludgy way, then what you need is:

[2]<SCRIPT type="text/javascript">
 function setSecondShipping(country) {
 countryValue = ship1.options[ship1.selectedIndex].value;
 if (countryValue=="us") { document.form.shipping2.value="2.00"; }
 if (countryValue=="canada") { document.form.shipping2.value="5.00"; }
 if (countryValue=="ireland") { document.form.shipping2.value="10.00"; }
 if (countryValue=="other") { document.form.shipping2.value="15.00"; }
</SCRIPT>
 
<FORM name=form>
 
<SELECT name=shipcountry onchange="setSecondShipping(this)">
<option value="us">U.S.
<option value="canada">Canada
<option value="ireland">Ireland
<option value="other">Other
</SELECT>
 
<INPUT type=hidden name=shipping2 value="2.00">
</FORM>[/2]