Question

My simple donation form submits properly except for Internet Explorer. I’m sure it has to do with issues with change() and focus() or blur(), but all my hundreds of attempts so far have failed me. I tried using .click() instead of change() as mentioned in this post:Getting jQuery to recognise .change() in IE (and elsewhere), but I could not get it to work! … so I am overlooking something simple perhaps.

Here is the link to the page: http://www.wsda.org/donate

HTML FORM:

<form id="donationForm" method="post" action="https://wsda.foxycart.com/cart.php" class="foxycart">
<input type="hidden" id="name" name="name" value="Donation" />
<input type="hidden" id="price" name="price" value="10" />
<div class="row">
 <label for="price_select">How much would you like to donate?</label>
 <select id="price_select" name="price_select">  
                <option value="10">$10</option>
  <option value="20">$20</option>
  <option value="50">$50</option>
  <option value="100">$100</option>
  <option value="300">$300</option>
  <option value="0">Other</option>
 </select>
</div>
<div class="row" id="custom_amount">
 <label for="price_input">Please enter an amount: $</label>
 <input type="text" id="price_input" name="price_select" value="" />
</div>
<input type="submit" id="DonateBtn" value="Submit Donation »" />
</form>

JQUERY:

// donation form
$("#custom_amount").hide();
$("#price_select").change(function(){
   if ($("#price_select").val() == "0") {
      $("#custom_amount").show();
   } else {
      $("#custom_amount").hide();
   }
   $("#price").val($("#price_select").val());
});

$("#price_input").change(function(){
   $("#price").val($("#price_input").val());
});

Answer 1

Using one of the answers given from this post: Getting jQuery to recognise .change() in IE – I revised my script to the following, and now it works great!!

New Script that WORKS!:

// donation form
$("#custom_amount").hide();
$("#price_select").change(function(){
   if ($("#price_select").val() == "0") {
      $("#custom_amount").show();
   } else {
      $("#custom_amount").hide();
   }
   $("#price").val($("#price_select").val());
});

if ($.browser.msie) {
  $("#price_input").click(function() {
    this.blur();
    this.focus();
  });
};

$("#price_input").change(function(){
   $("#price").val($("#price_input").val());
});