Form won't submit properly in IE

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

What is your version of jQuery? You can use .change() in IE safely with jQuery 1.4+ (see http://api.jquery.com/change/) — Chubas, Jun 10 '10 at 02:33
i originally was using But just changed it to ... but still is not working. — VUELA, Jun 10 '10 at 03:07
Problems: 1) when using Internet Explorer the price does not always update when changed from the dropdown menu. 2) Sometimes the custom input box does not become visible when 'other' is selected. 3) when a custom price is typed into the input text box it does not always update the price when submitted. — VUELA, Jun 10 '10 at 03:09
the main problem that keeps coming up is when trying to use the 'other' option and type in your own donation amount. it doesnt properly update the price the fist attempt when using IE, but if you try it again it will work (something to do with the change function, or focus / blur is what im getting form other forum threads). — VUELA, Jun 10 '10 at 03:14
from jquery api: "The change event is sent to an element when its value changes. This event is limited to elements, boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus." -- how do ideal with the focus bit?</select> — VUELA, Jun 10 '10 at 03:23
well that's good to hear! It does not work for me using IE8 the first time I select 'other' and then type in a custom amount, then click the submit button. the price in the cart does not update to what i typed in. if i close the cart and then try again it will usually work then if the focus gets changed around. — VUELA, Jun 10 '10 at 04:08
it shows the custom amount in the left-most column as Price Select, but the price column to the right still says zero. — VUELA, Jun 10 '10 at 04:48

score 0 · Accepted Answer · edited May 23 '17 at 10:30

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

Form won't submit properly in IE

1 Answers1