表单正在提交但未提交答案

【问题标题】：Form is submitting without submit表单正在提交但未提交
【发布时间】：2013-12-20 08:04:28
【问题描述】：

我有一个没有输入 type='submit' 的表单元素。我使用一个带有 onclick 的按钮来调用函数，如下所示：

<form method='post' action='build_meet.html' id='meet_builder_form'>
....
<button onclick='submit_this_form()' >Submit</button>
</form>

函数定义为：

function submit_this_form() {
    var my_teams = [];
    for ( var i = 0 ; i < window.my_meet.teams.length; i++ ) {
        my_teams.push( window.my_meet.teams[i].team_id );
    }
    var my_teams_str = my_teams.join('|');
    document.getElementById('team_ids_list').value = my_teams_str;
    alert ( my_teams_str );
    //document.getElementById('meet_builder_form').submit();
}

请注意，实际提交表单的行已被注释掉。当我单击按钮时，不会生成警报，并且无论如何都会提交表单。

想法？

【问题讨论】：

未定义类型的按钮也会在某些浏览器上提交表单。所以 type="button" 会解决这个问题。

标签： javascript html forms

【解决方案1】：

Kinjal 是正确的。按钮的默认类型（未声明时）是“提交”。您必须声明type="button" 以避免按钮提交表单。

【讨论】：

【解决方案2】：

试试这个，

<form method='post' action='build_meet.html' id='meet_builder_form'>
....
<button type="button" onclick='submit_this_form()' >Submit</button>
</form>

【讨论】：

【解决方案3】：

阻止submit表单的默认操作。

function submit_this_form(e) {
    e.preventDefault();
    var my_teams = [];
    for ( var i = 0 ; i < window.my_meet.teams.length; i++ ) {
        my_teams.push( window.my_meet.teams[i].team_id );
    }
    var my_teams_str = my_teams.join('|');
    document.getElementById('team_ids_list').value = my_teams_str;
    alert ( my_teams_str );
    //document.getElementById('meet_builder_form').submit();
}

HTML

<form method='post' action='build_meet.html' id='meet_builder_form'>
....
<button onclick='submit_this_meet(event)' >Submit</button>
</form>

【讨论】：