why doesn't this jQuery code work in IE?

Question

The following code is used so when clicking 'enter' when focused in an input field within a form, it disables the standard submit button functionality. Rather the javascript builds a new form and sends a post request to another page. I am using this so that I can achieve a "form within a form" functionality. The input field has its own submit button for which I have similar code to perform the post.

In firefox, this works perfectly; in IE hitting enter does nothing at all. Here is the code:

//event handler for input field within standard form
$('#inputfield').bind('keypress', function(e) {
    var code = e.keyCode || e.which;
    if(code==13){
     //suppress default submit functionality
     $('form').submit(function () {
         return false;
     });

     //...assemble some data here...

        var url_string = "...";

        var $form = $("<form method='POST'>").attr("action", url_string);
        $("<input type='hidden' name='body'>").attr("value",body).appendTo($form);

        $("<input type='hidden' name='title'>").attr("value",title).appendTo($form);

        //...create more form elements here...

        $form.appendTo("body");
        $form.submit();
    }
});

Any ideas why this isn't working in IE (I tried in IE 6,7 and 8)?

Update: just to elaborate on the problem: in firefox, the $form.submit(); line at the end causes the jquery generated form to submit and the page to redirect. In IE nothing happens at all. The keypress does fire in IE, its just that the form doesnt seem to get submitted.

Answer 1

What happens if you try using the normal DOM submit method instead of jQuery's?

// instead of:
// $form.submit();
// try this:
$form[0].submit();

ie gives me a javascript error: 0 is null or not an object..

Ok, that would suggest that your jQuery object is empty. It might be the appendTo which is doing strange things... try this:

$form = $form.appendTo("body");
$form.submit();

and if that doesn't work, put in these debugging lines:

alert($form.length);
$form.appendTo("body");
alert($form.length);
$form.submit();

---

Ok, I've got it now:

It's the line where you generate the form which is causing the problem. Change it to this:

var $form = $("<form></form>").attr({"action" : url_string, "method" : "POST"});

What you had should have worked, so that might be a bug in jQuery, I'm not sure.

Answer 2

The IE DOM is different and capturing the event is different than FF or Chrome.

var key;      
 if(window.event)
      key = window.event.keyCode; //IE
 else
      key = e.which; //firefox

if(key == 13)
      do a thing

Answer 3

Try returning false at the end of the keypress event handler function. That signals the browser not to allow the "normal" result to occur after your custom function.