Ajax form submission in IE(8)

Question

I customized the original form source code and created two forms:

They work in all browsers except IE(8). What's wrong?

First form:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>First form</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
  <form method="POST" id="ss-form">
    <br>
    <div class="errorbox-good">
      <div class="ss-item  ss-text">
        <div class="ss-form-entry">
          <label class="ss-q-title" for="entry_0">Name
          </label>
          <label class="ss-q-help" for="entry_0"></label>
          <input type="text" name="entry.0.single" class="ss-q-short" value="" id="entry_0">
        </div>
      </div>
    </div>
    <br>
    <input type="hidden" name="pageNumber" value="0">
    <input type="hidden" name="backupCache" value="">
    <div class="ss-item ss-navigate">
      <div class="ss-form-entry">
        <input type="submit" name="submit" value="Submit">
      </div>
    </div>
  </form>
  <script>
    $("#ss-form").submit(function (event) {
      event.preventDefault();
      $.ajax({
        type: 'POST',
        url: 'https://docs.google.com/spreadsheet/formResponse?formkey=dGd3WHdkOTFRMzMyd0J1ZGFLVW50WlE6MQ&amp;ifq',
        data: {
          'entry.0.single': $('#entry_0').val()
        },
        success: function () {
          alert('Thanks!');
        }
      });
    });
  </script>
</body>

</html>

Second form:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Second form</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
  <form method="POST" id="ss-form">
    <br>
    <div class="errorbox-good">
      <div class="ss-item  ss-text">
        <div class="ss-form-entry">
          <label class="ss-q-title" for="entry_0">Name
          </label>
          <label class="ss-q-help" for="entry_0"></label>
          <input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0">
        </div>
      </div>
    </div>
    <br>
    <input type="hidden" name="pageNumber" value="0">
    <input type="hidden" name="backupCache" value="">
    <div class="ss-item ss-navigate">
      <div class="ss-form-entry">
        <input type="submit" name="submit" value="Submit">
      </div>
    </div>
  </form>
  <script>
    $("#ss-form").submit(function (event) {
      event.preventDefault();
      $.post('https://docs.google.com/spreadsheet/formResponse?formkey=dGd3WHdkOTFRMzMyd0J1ZGFLVW50WlE6MQ&amp;ifq', $("#ss-form").serialize(),
        function () {
          alert('Thanks!');
        }
      );
    });
  </script>
</body>

</html>

We need to see some code to be able to tell you what is wrong with the code. — Asad Saeeduddin, Oct 18 '12 at 19:04
The above custom forms and their source codes are accessible. — Mori, Oct 18 '12 at 19:16
I thought a page source is too easy for a coder/developer to check and that's why I provided the pages links rather than pasting a bunch of codes here. Anyway I just updated my question. — Mori, Oct 18 '12 at 19:43
I don't know. It just doesn't work in IE8 and probably older versions. — Mori, Oct 18 '12 at 19:50
What does "doesn't work" mean? Are there errors in the console? — Andrew Whitaker, Oct 18 '12 at 23:54
Clicking on the submit button neither sends the input to the spreadsheet nor gives an error message. — Mori, Oct 19 '12 at 02:49

Rango · Answer 1 · 2012-10-18T20:38:34.647

2

Just wrap all your script into:

$(function(){ ... });

E.g.

$(function(){

    $.support.cors = true; // for cross-origin requests in IE

    $("#ss-form").submit(function(event) {   
        event.preventDefault();   
        $.post('https://docs.google.com/spreadsheet/formResponse?formkey=dGd3WHdkOTFRMzMyd0J1ZGFLVW50WlE6MQ&amp;ifq', $("#ss-form").serialize(),  
          function() {  
              alert('Thanks!');  
          }  
        );  
      });

});

Your event callbacks are being assigned when document is not loaded to the end and event targets do not exist in DOM yet. If you wrap your scripts into $(function(){ ... }); then it assures that code will be executed AFTER the pages were loaded.

edited Oct 18 '12 at 20:38

answered Oct 18 '12 at 20:01

Rango

3,877
2
22
32

Thanks for the answer, but it doesn't make any difference -- just tested:http://dl.dropbox.com/u/4017788/Labs/third-form.htm – Mori Oct 18 '12 at 20:21
It's turned out to be known bug of jQuery in IE: http://bugs.jquery.com/ticket/10660 Check updated answer for workaround. – Rango Oct 18 '12 at 20:39
I tried this script in IE9 in IE8 mode - it works. But it does not in pure IE8 (I've just tried on another PC). So look at this question and solution mentioned below: http://stackoverflow.com/questions/3362474/jquery-ajax-fails-in-ie-on-cross-domain-calls – Rango Oct 19 '12 at 05:47
I tried the solution on that page to no avail. – Mori Oct 19 '12 at 09:00

Ajax form submission in IE(8)

1 Answers1