Question

I’m struggling to get what i think should be a simple bit of jquery/javascript to work. I’ve got a textbox and 2 radio’s like so that i want to automatically update the ‘total’ textbox when a user changes their values:

<tr>
  <td>Value:</td>
  <td>
    <input name="value" type="text" id="value" />
  </td>
</tr>

<tr>
  <td>Postage:</td>
  <td>
    <input id="express" type="radio"    name="postageradio" value="PostageExpressRadio" />
    Express post ($3.50)

    <input id="registered" type="radio" name="postageradio" value="PostageRegisteredRadio" />
    Registered post ($5.00)
  </td>
</tr>

<tr>
  <td>Total:</td>
  <td colspan="2">
    <input name="total" type="text" readonly="readonly" id="total" />
  </td>
</tr>

Here’s the bit of jquery i’ve come up with, which doesn’t work very well in Chrome (it is slow to update), and doesn’t work with the radios at all in IE. I’m sure there’s a better way to do it, so any suggestions are welcomed.

function calctotal() {
  var value = $('#value').val();
  var amount = parseInt(value.replace(' ', '').replace('$', ''));
  if (isNaN(amount)) amount = 0;
  var post = 0;
  if ($('#express').is(':checked')) post = 3.5;
  if ($('#registered').is(':checked')) post = 5.0;
  $('#total').val('$' + (amount + post).toFixed(2));
}

// The timeout is used because otherwise the 'change' events get the previous value (???)
function calctotalsoon() {
  setTimeout(function() {
    calctotal();
  }, 100);
}

$(document).ready(function() {
  $('#value').keyup(function(event) {
    calctotalsoon();
  } );

  $('#express').change(function(event) {
    calctotalsoon();
  } );

  $('#registered').change(function(event) {
    calctotalsoon();
  } );
} );

Thanks so much

Answer 1

Here is how I chose to streamline it, somebody else may have a better suggestion. Conceptually pretty much everything you did was good.

First of all, the radio button’s “value” attribute now reflects the appropriate amount of postage that should be added.

<input id="express" type="radio"    name="postageradio" value="3.50" />
<input id="registered" type="radio" name="postageradio" value="5.00" />

Then I streamlined the javascript like so:

function calctotal() {
  var value = $('#value').val();
  var amount = parseFloat(value) || 0;
  var post = parseFloat($("input[name=postageradio]:checked").val()) || 0;

  $('#total').val('$' + (amount + post).toFixed(2));
}

$(document).ready(function() {
  $('#value').keyup(function(event) {
    calctotal();
  } );

  $('#express, #registered').bind('click change', function(event) {
    calctotal();
  } );
} );

I tested it in IE8, FF, and Chrome. You don’t need to use the setTimeout. The postage value is now calculated based on the selected radio button’s value instead of hardcoding the value. The radios are bound to both click and change for IE’s sake

Fiddle here: http://www.jsfiddle.net/NzrBj/