Post form in JQuery and populate DIV - broken in IE

Question

I am trying to create a form that posts data via jQuery and populates the return into the same DIV. This way the page does not refresh on post action.

Answer 1

I would say that you don't have to use the form tag at all in this scenario.

Edit As Paolo Bergantino said I would also avoid using the inline javascript. So instead use:

Javascript

$(document).ready(function() {
  $('.formSubmitButton').click(function() {
      $.post('/add_value', {'test':'test'}, function(data) {
          $("#add_value_form").empty().append($(data));
      }, "text");
  });
});

Update Since this is still causing a problem, I would perform some testing with the $.ajax method. Also, I don't believe that POST calls would ever get cached, but just in case try setting the cached to false. Another test, to make sure your not having a serialization issue, is to pass your data in already encoded. And if your still having issues you can try to set your dataType to text

$.ajax({
  url: '/add_value',
  type: 'POST',
  cache: false,
  data: 'test=testValue',
  dataType: 'text',
  complete: function(xhr, textStatus) {
    alert('completed');
  },
  success: function(data) {
    alert(data);
  },
  error: function(xhr, textStatus, errorThrown) {
    alert('woops');
  }
});