title: jQuery prepopulate form fields from select box and calculate results
body: <p>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:</p>
  
  <pre><code>&lt;form action = "&lt;?php echo $_SERVER['PHP_SELF']; ?&gt;" method = "POST"&gt;
  &lt;label&gt;Appliance&lt;/label&gt;
  &lt;select id="list" &gt;
  &lt;option value="select"&gt;Select&lt;/option&gt;
  &lt;option value="dishwasher"&gt;Dishwasher&lt;/option&gt;
  &lt;option value="iron"&gt;Iron&lt;/option&gt;
  &lt;/select&gt;
  &lt;label&gt;Watts&lt;/label&gt; &lt;input name="watts" /&gt;&lt;br&gt;
  &lt;label&gt;Hours&lt;/label&gt; &lt;input name="hours" /&gt; &lt;br&gt;
  &lt;label&gt;Price&lt;/label&gt; &lt;input name="price" /&gt; &lt;br&gt;
  &lt;label&gt;Number&lt;/label&gt; &lt;input name="number" /&gt; &lt;br&gt;
  &lt;label&gt;Total&lt;/label&gt; &lt;input name="total" value="" id="total"&gt;&lt;/input&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>When a user selects an appliance I want the input fields to be filled something like this:</p>
  
  <pre><code>  case 'dishwasher':
    $('input[name="watts"]').val('1200');
    $('input[name="hours"]').val('20');
    $('input[name="price"]').val('10');
    $('input[name="number"]').val('1');
  </code></pre>
  
  <p>Then do some calculation on the figures:</p>
  
  <pre><code>kilowatts = watts / 1000;
  kwhours = kilowatts * hours;
  costpounds = kwhours * price / 100;
  total = costpounds * number
  </code></pre>
  
  <p>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!</p>