Why is my HTML form inside a jQuery-UI dialog not submitting?

This is the code of an HTML form as shown by Firebug:

<form action="http://localhost/home/newuser" method="post">
    <input type="hidden" value="48" name="user_id">
    <input type="text" name="username">
    <input type="submit" value="Next">
</form>

And here's some jQuery code bound to it:

$('.popup .newuser form').live('submit', function()
{
    $(this).ajaxSubmit(function(data)
    {
     // handle response
    });
    return false;
});

However, when I click on the "Next" button, what happens is that the text field shows a combobox of previously entered values (a Firefox feature). There is no HTML request showing up on Firebug's Network tab, and breakpoints in the jQuery listener are not hit.

It feels like I'm missing something really obvious...

Update: I've realized that something even stranger is going on: I cannot enter anything in the text field either via keyboard. I can only select the previous values from the Firefox combobox. And after doing that, I can't even select the text in the box.

Answers


It turns out the problem had nothing to do with jQuery or Javascript; instead it lay in the CSS, where a DIV containing the form had a z-index of 1, and was itself contained in a jQuery-UI dialog, which the framework gave a z-index of 1001. Apparently this caused the inner DIV (and thus the form) to not receive any keyboard or mouse events at all.


Need Your Help

How Can I insert System.out.println() in Eclipse with ctrl + space

java eclipse

When i was watching a video about java, a man has inserted System.out.println() immediately to screen. How can i do it. He only Write "S" character...