Question

Using jQuery 1.4 to do this.

Adding a form to the body tag, nothing special about the form itself:

$(function() {
$('body').prepend('<form name="frmSample" id="frmSample"><input class="btn" type="submit" value="SIGN UP" /></form>');
});

I’m using the following to submit the form:

$('#frmSample').live('submit', function() {
  var formdata = $(this).serialize();

   $.ajax({
       type: 'POST',
       url: 'http://www.example.com/Values.jsp',
       data: formdata,
       success:function() {
       submit_success();
       }
       });
  return false
  });

On the newest browsers (Firefox 3.5, Safari 4) this works fine. Once I go down to FF 3.0 and below or IE 7 and below this stops.

I’m a bit stuck right now. I’ve been searching for a good bit and have only been able to find anything mentioning something other than return false or event.preventDefault().

So looking to see if I am missing something small here, or am going in the totally wrong direction.

Answer 1

I would go a step further than stopPopagation:

$('#frmSample').live('submit', function(e) {  
    stopEvent(e);  
    ....etc...etc

And the code for stopEvent:

function stopEvent(event) {
    event.preventDefault();
    event.stopPropagation();
    if ($.browser.msie) {
        event.originalEvent.keyCode = 0;
        event.originalEvent.cancelBubble = true;
        event.originalEvent.returnValue = false;
    }
}

From here: http://www.openjs.com/articles/prevent_default_action/

returnValue and preventDefault() methods

That does what we need – but we cannot rely on the return false method for preventing the default action. Giving this code will exit the function – so if there is more to do in the function, this code cannot be used. In most of the situations I encounter, return false is enough, but in some areas, we need something more drastic.

Type the following into google for more info:

preventDefault stopPropagation
cancelBubble