1

In my HTML form I have a read-only field that contains the fee based on a variety of selections and radio boxes.

<input name="AdultFee_1" type="text" class="tabfont_right" id="AdultFee_1" value="0" size="10"  readonly="readonly" />

The following javascript (shortened for brevity) is used to assign a fee and display it in AdultFee_1.

function GetField (FieldID)
{
  return document.getElementById(FieldID);   
} //endfunction GetField (FieldID)

function CalcAdultFee (EntryID)
{
var fee=0.00;

// Retrieve data values from the form.
var AdultRegType = GetField ("AdultRegType_" + EntryID);
var AdultTSCredit = GetField ("AdultTSCredit_" + EntryID);
var AdultPrayerRetreat = GetField ("AdultPrayerRetreat_" + EntryID);
var AdultFee = GetField ("AdultFee_" + EntryID);

// Check that the current date is before the early-bird cutoff.
if (new Date() < new Date(2012, 8, 29)) {

  // Determine the fee based on the registration type selected. Add costs for Temple School 
  // Credit and Adult Prayer Retreat if selected. If the user is only going to the Friday
  // Friday prayer retreat, do not add the additional option if selected.
  switch (AdultRegType.value) {
      case "Adult Registration": 
        fee = 85.00 + parseFloat((AdultTSCredit.checked) ? 10 : 0) + parseFloat((AdultPrayerRetreat.checked) ? 35: 0);
        break;
      case "College Student": 
        fee = 25.00 + parseFloat((AdultTSCredit.checked) ? 10 : 0) + parseFloat((AdultPrayerRetreat.checked) ? 35: 0); 
        break;
      case "IHQ/Field Staff": 
        fee = 42.50 + parseFloat((AdultTSCredit.checked) ? 10 : 0) + parseFloat((AdultPrayerRetreat.checked) ? 35: 0); 
        break;
      case "ONLY Friday Prayer Retreat": 
        fee = 35.00 + parseFloat((AdultTSCredit.checked) ? 10 : 0); 
        break;
      default:
        fee = 0.00;
  } //endswitch (RegType)

// elseif (new Date() < new Date(2012, 8, 29))
}//endif (new Date() < new Date(2012, 8, 29))

AdultFee.value = fee;
CalcGrandTotal();

} //endfunction CalcAdultFee (RegType)

The issue in IE8 is that the new value does not appear on the form until a user clicks on a field. This seems to work well in IE9, FF12, and Safari. I must be missing something. What do I do?

6
  • What triggers the CalcAdultFee call? Jun 2, 2012 at 2:47
  • CalcAdultFee is called within ValidateAdultRegType(EntryID) which is called by the form in one of three onchange events.<input name="AdultPrayerRetreat_1" type="checkbox" id="AdultPrayerRetreat_1" value="Yes" onchange="CalcAdultFee(1)"
    – JPink
    Jun 2, 2012 at 3:22
  • Sounds like you should call it when the page is loaded... perhaps the other browsers do validation when the page is loaded, but IE8 does not?
    – Rob I
    Jun 2, 2012 at 3:47
  • Change events aren't triggered until the <input> loses focus: stackoverflow.com/a/7055771/479863 Jun 2, 2012 at 4:05
  • @MU, do you think I could make the focus go on the fee field to force it to change and then set focus on the next field?
    – JPink
    Jun 2, 2012 at 5:15

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.