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

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.

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.