Using value from dropdown box?

[eluser]umbongo[/eluser]
I have a basket with a dropdown box allow selecting of different delivery options. I would like for this to update the delivery price on the client side, then add this to the subtotal/ add vat to give a total price. (The delivery type will be submitted upon checkout.).

How do I go about getting and using the value without submitting the form??

[eluser]CroNiX[/eluser]
Javascript is the only way without submitting.

[eluser]umbongo[/eluser]
Sure, i was expecting javascript to be involved. but all i can get it to do is either, print the value that is selected on load [using doc.write(document.getElementById('id').value)], or reload the entire page [with onclick=]

Any help would be appreciated.

[eluser]umbongo[/eluser]
anyone??

[eluser]CroNiX[/eluser]
I suggest using a cross browser framework such as jQuery. I wrote this in the post and didn't test it, but it should be close and get you in the right direction.

Code:

<skript type="text/javascript">
$(document).ready(function(){
  //when the select box changes...
  $('#myselect').change(function(e){
    //get the selected value
    var thevalue = $(this).val();

    //get the value of the "unit price" and treat it as a float
    var unitprice = parseFloat($('#unit-price').html());
    var shipprice = unitprice;
    //update the "shipping" price depending on the value selected
    if(thevalue != ''){
      switch(thevalue){
        case 'UPSGROUND':
          //increase by 10 for ups ground
          shipprice += 10;
          break;
        case 'UPSNEXTDAY':
          //increase by 25 for next day air
          shipprice += 25;
          break;
      }
    } else {
      //no value selected, set ship price to unit price
      $('#shipping-price').html(unitprice);
    }
    //display the shipping price
    $('#shipping-price').html(shipprice);
  });
});
</skript>

<select id="myselect" name="myselect">
  <option value="" selected="selected">Select Shipping Method</option>
  <option value="UPSGROUND">UPS Ground</option>
  <option value="UPSNEXTDAY">UPS Next Day Air</option>
<select>

<div>
  <p>Price: $<span id="unit-price">125.00</span></p>
  <p>Shipping: <span id="shipping-price">0</span></p>
</div>

[eluser]umbongo[/eluser]
Thank you! Figured out a solution from this. [Wish there was an option not to bump a thread on reply!]

[eluser]CroNiX[/eluser]
I believe you can just edit the title and put [solved] at the beginning. But I like the bump because it lets me know you got it working