title: Updating price total with Javascript
body: <p>I am helping out with a booking form at the moment for a local antiquing event, but I am having trouble updating the total on the page whenever a user makes a change.</p>
  
  <p>Background: There are two ticket tiers, Premium(£10) and Regular(£5). A user can also add additional "valuations" at £3 each.</p>
  
  <p>At the moment, the user can select their ticket with a radio button, one for Premium, one for Regular.</p>
  
  <p>They specify additional valuations with a text box.</p>
  
  <p>I'd like to be able to update the total whenever the user makes a change (Selects a radio button, updates the total in the textbox).</p>
  
  <p>Unfortunately Javascript isn't my forté, so I don't know the ins and outs of the events and whether or not this is even possible.
  Here is my javascript so far (There is no validation yet, purely working on function at the moment)</p>
  
  <p>Javascript Function (UpdateTotal)</p>
  
  <pre><code>function UpdateTotal() {
  /* Get prices and calculate total */
  var ticketPrice = document.getElementById('tick_choice').value;
  var additionals = parseInt(document.getElementById('additional_valuations').text, 10);
  var total = ticketPrice + additionals;
  
  /* Attempt to update the value (Inside a TD tag) */
  document.getElementById('totalPayable').innerHTML="£"+total;
  }
  </code></pre>
  
  <p>What would be the best way to call this code using JS events?</p>
  
  <p>Much appreciated!</p>
  
  <p><strong>EDIT</strong>: Here is the relevant HTML</p>
  
  <p>For the radio buttons:</p>
  
  <pre><code>&lt;input id="tick_choice" type=RADIO VALUE="10"&gt; Premium
  &lt;input id="tick_choice" type=RADIO VALUE="5"&gt; Regular
  </code></pre>
  
  <p>For the text box:</p>
  
  <pre><code>&lt;input type="text" id="regular_tickets"&gt;
  </code></pre>