jQuery prepopulate form fields from select box and calculate results

I am building a calculator form to allow people to calculate the cost of running electrical appliances. They can select an appliance, as an example, from a dropdown list and this should prepopulate the text fields with the figures necessary for the calculation. Here is the form:

<form action = "<?php echo $_SERVER['PHP_SELF']; ?>" method = "POST">
<label>Appliance</label>
<select id="list" >
<option value="select">Select</option>
<option value="dishwasher">Dishwasher</option>
<option value="iron">Iron</option>
</select>
<label>Wa开发者_如何学运维tts</label> <input name="watts" /><br>
<label>Hours</label> <input name="hours" /> <br>
<label>Price</label> <input name="price" /> <br>
<label>Number</label> <input name="number" /> <br>
<label>Total</label> <input name="total" value="" id="total"></input>
</form>

When a user selects an appliance I want the input fields to be filled something like this:

  case 'dishwasher':
  $('input[name="watts"]').val('1200');
  $('input[name="hours"]').val('20');
  $('input[name="price"]').val('10');
  $('input[name="number"]').val('1');

Then do some calculation on the figures:

kilowatts = watts / 1000;
kwhours = kilowatts * hours;
costpounds = kwhours * price / 100;
total = costpounds * number

and put the total into the total field in the form, the idea is to also allow the user to change the figures, or even just add their own, in the form and the total updates accordingly. I can get all the individual bits to work, but don't know jquery well enough to put it all together. Help would be greatly appreciated. Thanks!

Here is some javascript / jquery to get you started. There are more efficient ways, but those are very confusing for someone just learning.

    //when the document is finished being rendered, this fires 
    $(document).ready(function(){
    //if the user changes the value in the select dd, this fires.
         $('#list').change(function(e){
           changeInputValues(this.val());
          });
// standard JS function to set the input values with defaults for a given drop down.  your idea ;)
         function changeInputValues(ddValue){
            //put your Case 'dishwasher' code here, one case for each Drop down value
            //$('input[name="watts"]').val('1200');
          //$('input[name="hours"]').val('20');
          //$('input[name="price"]').val('10');
          //$('input[name="number"]').val('1');

            //recalculate the figures
            recalculate();
         };
        // when someone changes an input, but not the Drop Down, we have that on already.
         $('input').not('select').change(function(e){
             recalculate();
          });
          function recalculate(){
        // get the current values, then do your math
            //var currentWatts = $('input[name="watts"]').val();
            //var currentHours = $('input[name="hours"]').val();
        //....
        //var total = 0;

        // do more math... whatever you want

        //set the 'visible' value
           $('input[name="total"]').val(total)
        };
        });

So basic structure is 2 functions.

1. Called when the "appliance" select is changed. Takes all the values of the item selected by grabbing the id like $(this)find('selected').attr('id')*. Once you have the id of the select appliance you can use it to pull the correct values from your appliance arrays and then it's easy to $(this).find('name_of_filed').text("value from the array") with a little for each loop.

2. called when any other field is onChanged (or you can make an update button in case it's annoying to have it constantly updating while you are making multiple changes). Also called at the end of function 1. Takes all the values from the fields, does calculation, inserts into "total" field.

you can certainly break this down much further to smaller pieces if you want it to be more easily edited in the future and to reuse any of this code but if it's going to be a one of then I wouldn't bother splitting it much more than this.

I can get a lot more specific if need be but I figure it's better for you to try and figure specifics out to learn as you go and we here at SO can answer specific questions as you go.

*may not be actuall correct code. I'm lazy and you will learn more this way! ;)