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

Question

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.

Can you give the response Code, which you have commented out (// handle response) ? — Dion
– Dion, Commented Apr 10, 2012 at 11:55
I don´t sure about your bug. I think you need any ext on you action. you use html, php, jsp or .do? action="localhost/home/newuser.php" I hope it help you — Víctor Dueñas Robles
– Víctor Dueñas Robles, Commented Apr 10, 2012 at 12:01
Sounds like either the live isn't successfully wiring up to the event, or maybe the selector has an issue? I know it sounds obvious, but are the popup and newuser classed tags surrounding the form? Is it possible that popup and newuser are sibling classes (i.e. <div class="popup newuser">)? If that's the case, then the selector should be $('.popup.newuser ...') without the space. — ataddeini
– ataddeini, Commented Apr 10, 2012 at 12:04
@ataddeini: I just put a breakpoint into the jQuery live() function, and it was hit, and on the correct DOM element. — Michael Borgwardt
– Michael Borgwardt, Commented Apr 10, 2012 at 12:24

Michael Borgwardt · Accepted Answer · 2012-04-12 08:02:25Z

1

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.

answered Apr 12, 2012 at 8:02

Michael Borgwardt

347k81 gold badges491 silver badges726 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CosminO · Accepted Answer · 2012-04-10 11:56:57Z

0

<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

answered Apr 10, 2012 at 11:56

CosminO

5,2566 gold badges30 silver badges52 bronze badges

1 Comment

Michael Borgwardt Over a year ago

It's actually there in the HTML, what I have in the question is the normalized HTML shown by firebug

Dion · Accepted Answer · 2012-04-10 12:09:18Z

0

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

answered Apr 10, 2012 at 12:09

Dion

3,34525 silver badges40 bronze badges

1 Comment

Michael Borgwardt Over a year ago

Because the whole app is based on unobtrusively attached jQuery event handlers.

billyonecan · Accepted Answer · 2012-04-10 12:39:37Z

0

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

edited Apr 10, 2012 at 12:39

answered Apr 10, 2012 at 12:27

billyonecan

20.3k9 gold badges44 silver badges66 bronze badges

3 Comments

Michael Borgwardt Over a year ago

Interesting - but looking at the jQuery code, I see that live() just forwards to on() anyway. And no, the callback is not triggered - it seems like no submit is actually happening.

billyonecan Over a year ago

I'm pretty sure it must have something to do with the selectors. I just set up pretty much identically and tested, didn't see anything in Firebug console, I changed the selector to just $('form') and I can see the POST requests straight away.

Michael Borgwardt Over a year ago

The selector works. The problems seems to be afterwards, events getting lost.

tusar · Accepted Answer · 2012-04-10 12:41:27Z

0

.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;
});

edited Apr 10, 2012 at 12:41

answered Apr 10, 2012 at 12:29

tusar

3,4306 gold badges41 silver badges62 bronze badges

4 Comments

Michael Borgwardt Over a year ago

Using on() makes no difference, and the callback is never executed.

tusar Over a year ago

Is the .on() not invoking or .ajaxSubmit() not invoking ?

tusar Over a year ago

is the action url http://localhost/home/newuser is of same domain or different ? This could happen if you are doing cross-domain AJAX request.

tusar Over a year ago

have a look at developer.mozilla.org/en/Same_origin_policy_for_JavaScript then you will be sure whether it is a cross-domain request.

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

1 Comment

1 Comment

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

1 Comment

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related