使用Javascript更新价格总计

Question

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.

Background: There are two ticket tiers, Premium(£10) and Regular(£5). A user can also add additional "valuations" at £3 each.

At the moment, the user can select their ticket with a radio button, one for Premium, one for Regular.

They specify additional valuations with a text box.

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).

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)

Javascript Function (UpdateTotal)

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;
}

What would be the best way to call this code using JS events?

Much appreciated!

EDIT : Here is the relevant HTML

For the radio buttons:

<input id="tick_choice" type=RADIO VALUE="10"> Premium
<input id="tick_choice" type=RADIO VALUE="5"> Regular

For the text box:

<input type="text" id="regular_tickets">

Answer 1

Your current html is invalid: you're not supposed to give more than one element the same id, and so when you use document.getElementById("tick_choice") it will find only one of them. For radio buttons to function as a group they need to have the same name attribute, but they can have different ids if you want to access them with document.getElementById() . You can make it like this:

<input id="tick_choice_premium" name="tick_choice" type=RADIO VALUE="10"> Premium
<input id="tick_choice_regular" name="tick_choice" type=RADIO VALUE="5"> Regular

<script>
   var choicePremium = document.getElementById("tick_choice_premium"),
       choiceRegular = document.getElementById("tick_choice_regular"),
       additionals = document.getElementById("additional_valuations");

   choicePremium.onclick = UpdateTotal;
   choiceRegular.onclick = UpdateTotal;
   additionals.onchange = UpdateTotal;

   function UpdateTotal() {
      /* Get prices and calculate total */
      var ticketPrice = choicePremium.checked ? choicePremium.value
                                              : choiceRegular.value;
      var additionals = parseInt(additionals.value, 10);
      var total = ticketPrice + additionals;

      /* Attempt to update the value (Inside a TD tag) */
  document.getElementById('totalPayable').innerHTML="£"+total;
   }
</script>

Put the script block at the bottom of the body, or after the elements anyway, so that the elements will have already been parsed when the code runs to assign the event handlers.

What the above is doing is starting out by keeping references to the DOM elements in variables so that they can be accessed both to set the event handlers and within your function without repeating document.getElementById() everywhere.

Then it sets it so when the radio buttons are changed your function will be called (for radio or check buttons the click event occurs even when they're changed via the keyboard), and also when the text box is changed your function will be called. Note that .onclick = UpdateTotal does not put parentheses after UpdateTotal because it is not calling the function, it is getting a reference to it so it will be called later when the event occurs.

Then in your function it checks whether the first radio is checked and if so uses its value otherwise uses the other radio's value - obviously this works only while there are only two of them, but I'm sure you can see how this could be extended to allow for more.

Answer 2

Against each radio element that affects the total you can just handle "onclick":

<input id="tick_choice" type="radio" value="10" onclick="UpdateTotal();" />

For a textbox you don't want to do this (it would if you clicked to enter) so instead you can look at either onchange or onkeyup

<input type="text" onchange="UpdateTotal();" />

Then your function can do the calculations as required