JQuery .trigger('submit') breaking

Question

Im finding that because all the forms that Im working on have a submit button which inlcudes a 'name="submit"' attribute, that the trigger submit is breaking when I click on the link that is supposed to trigger the form submit.

Does anyone know how I can get round this.

The JQuery code below is what Im using:

$('#login_form :submit').each(
       function()
       {
          var $this = $(this);
          var f = this.form;
          var link = $('<a class="swap_link" href="#">' + $this.val() + '</a>')
             link.click(function()

                {
                   $(f).trigger('submit');
                   return false;
                }
             )
            $this.after(link).css({position:'absolute', top:'-2000px'});
            }
        )

Appreciate any help with this. Thanks

Hi. check out the link below:

http://www.mr-scraggy.com/test.html

on this page you can see the form in action. The top form which does not have a name="submit" in the submit button works. The bottom form which includes the name="submit" does not. (when I say work, the form is not hooked up to any scripts, but you can see that the submit link in the top form does 'something').

see also below the form html:

<form id="swaplink" name="login" action="/action/login.php" method="post" accept-charset="utf-8" class="clearfix">
<input type="hidden" name="redirecturl" id="redirecturl" value="{$redirecturl}" />
<h2>My Account Login</h2>
<ul id="login_form">
    <li>
        <label for="username">Username:</label>
        <input type="text" name="username" id="username" class="input-text" maxlength="32" />
        </li>
    <li>
    <label for="password">Password:</label>
    <input type="password" name="password" id="password" class="input-text" maxlength="32" />
        </li>
    <li>
    <input type="submit" name="submit" value="Login" />
    </li>
</ul>
    {$failed_message}
</form>

Answer 1

It's because you've given your submit button a name of "submit". Because this is already a property of the form object, it messes with the binding of the submit event.

See this note from the jQuery docs:

Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures.

Change the name of your submit button to anything else ("form_submit", for example) and it'll work.

Answer 2

You'll have to use a different name for your button. "submit" is a reserved word, and using an element with the name "submit" will actually prevent jQuery from being able to submit your form at all.

You can find a workaround at http://manicode.blogspot.com/2009/04/form-input-names-with-reserved-words.html

Answer 3

$('#yourelementhere').trigger('click');

this worked for me... not submit but click.

Answer 4

if you can't change your html (for example because zend form are such smartasses...)

it's as easy as this(change the name with the javascript before trying to submit):

$('#submit').attr('name', 'stupid_javascript');

Answer 5

You should build the link like this:

var link = $("<a />").addClass('swapLink')
           .atrr('href', '#')
           .text( $this.val() )
           .onclick( function() {
             $(f).trigger('submit');
             return false;
            });

Also make sure you insert the link into the DOM and that f really is a refrence to the form.

You could also try:

$(f).submit();

It would help if you posted the HTML used for your form.