Button with name submit stop triggering form's submit event?

Question

I just had a issue with jQuery form submit. I was trying to validate a duplicate form field using jQuery ajax on button click.

If user is duplicate show message else trigger form submit function.

Here is my code:

 <form method="post" action="mysite/action" id="signinform" name="signinform">
    <input type="text" tabindex="7" name="user_name" style="width: 100%" maxlength="255"    id="user_name" class="required" value="<?php echo $user_name ?>" />
    <em></em>
    <button type="button" onclick="is_duplicate_user()" class="button-big" name="submit">Continue</button>
  </form>
<script type="text/javascript">
function is_duplicate_user() {
    $('em').html('');
    $.ajax({
        type: 'POST',
        url: 'signin/is_user_exist',
        async: false,
        data: {'user_name': $('#user_name').val()},
        success: function(data) {
            if (data !== 'FALSE') {
                $('em').html(data);
                return false;
            } else {
                console.log('trigger submit event');
                $('#signinform').trigger('submit');
            }
        }
    });
}
</script>

if data!=='FALSE' is true it set em with ajax returned data else it shows console message but submit function not triggered.

Then I changed my buttons name name="submit" to name="continue_button". And it starts working.

Will you please tell me why was it not worked with name="submit".

please try $('#signinform')[0].submit(); – Usual Suspect Jun 21 '13 at 13:59 — Usual Suspect, Jun 21 '13 at 13:59

score 2 · Accepted Answer · answered Jun 21 '13 at 14:02

Look at the jQuery documentation in additional notes : http://api.jquery.com/submit/

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. For a complete list of rules and to check your markup for these problems, see DOMLint.

The button with name="submit" actually override the default jQuery submit() method.

score 1 · Answer 2 · answered Jun 21 '13 at 14:02

From JQuery documentation :

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. For a complete list of rules and to check your markup for these problems, see DOMLint.

Check this out :

http://forum.jquery.com/topic/submiting-a-form-programmatically-not-working

Button with name submit stop triggering form's submit event?

2 Answers2