名称为提交的按钮停止触发表单的提交事件？ [复制]

Posted 2023-02-21

【中文标题】名称为提交的按钮停止触发表单的提交事件？ [复制]

【英文标题】：Button with name submit stop triggering form's submit event? [duplicate]

【发布时间】：2013-06-18 16:45:09

【问题描述】：

我刚刚遇到了关于 jQuery 表单提交的问题。 我试图在单击按钮时使用 jQuery ajax 验证重复的表单字段。

如果用户重复显示消息，否则触发表单提交功能。

这是我的代码：

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

如果data!=='FALSE' 为真，则使用ajax 返回的数据设置em，否则显示控制台消息但未触发提交功能。

然后我将按钮名称 name="submit" 更改为 name="continue_button"。 它开始工作了。

请告诉我为什么它不能与name="submit" 一起使用。

【问题讨论】：

请尝试 $('#signinform')[0].submit();

【参考方案1】：

查看附加说明中的 jQuery 文档：http://api.jquery.com/submit/

表单及其子元素不应使用与表单属性（例如提交、长度或方法）冲突的输入名称或 ID。名称冲突可能会导致令人困惑的失败。如需完整的规则列表并检查这些问题的标记，请参阅 DOMLint。

带有name="submit" 的按钮实际上覆盖了默认的jQuery submit() 方法。

【参考方案2】：

来自 JQuery 文档：

表单及其子元素不应使用与表单属性（例如提交、长度或方法）冲突的输入名称或 ID。名称冲突可能会导致令人困惑的失败。如需完整的规则列表并检查这些问题的标记，请参阅 DOMLint。

看看这个：

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