CODEWITHSUNDEEP
jqueryhtmlajaxjquery-ui
Michael Borgwardt
Michael Borgwardt

Reputation: 346260

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.

Upvotes: 2

Views: 1302

Answers (5)

Michael Borgwardt
Michael Borgwardt

Reputation: 346260

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.

Upvotes: 1

tusar
tusar

Reputation: 3424

.live() is deprecated now. For cross-browser support, use .on() when you are using jQuery 1.7+ or .delegate() in lower versions.

.on() example :

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

.delegate() example :

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

Upvotes: 0

billyonecan
billyonecan

Reputation: 20250

I would have put this in a comment but it seems I don't yet have the privilege of doing so.

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

EDIT

Separate your selectors with commas rather than spaces:

$('form, .popup, .newuser')

Hope that helps

Upvotes: 0

Dion
Dion

Reputation: 3335

Why don't you use <form ... OnSubmit="yourfunction()"></form> ?

Upvotes: 0

CosminO
CosminO

Reputation: 5226

<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>

Put / at the end of the input element

Upvotes: 0

Related Questions