黄兵的个人博客

同一个页面多个form表单提交方法

最近有一个页面是用的Tab选项卡，每个选项卡是一个form表单，需要往服务器提交数据，效果如下所示：

实现方法：

首先看一下页面结构：

<div class="panel-body">
    <div class="tab-content">
        <div id="userInfo" class="active tab-pane">
            @using (Html.BeginForm("EditUser", "Account", FormMethod.Post, new { data_bind = "submit:editUser" }))
            {
            <div class="form-actions note-color text-right" data-bind="visible:!sending()">
                <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">取消</button>
                <input type="submit" value="保存" class="btn btn-success"/>
            </div>
            }<!--One Form End-->
        </div>
        <div class="tab-pane" id="CreateRole">
            @using (Html.BeginForm("EditRoles", "Account", FormMethod.Post, new { data_bind = "submit:editUser" }))
            {
            <div class="form-actions note-color text-right" data-bind="visible:!sending()">
                <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">取消</button>
                <input type="submit" value="保存" class="btn btn-success"/>
            </div>
            }<!--Two Form End-->
        </div>
    </div>
</div>

截图如下：

办法1：同一个页面中建立两个表单 各自提交：

<form action="?" name="form1" id="form1">
 <!-- 表单内容 -->
<input type="submit" />
</form>
<form action="?" name="form1" id="form1">
 <!-- 表单内容 -->
<input type="submit"  />
</form>

办法2：如果非要只有一个表单的话，通过js提交：

<script type="text/javascript" language="javascript">
function submitYouFrom(path){
 $('form1').action=path;
 $('form1').submit();
}
</script>
<form action="?" name="form1" id="form1">

 <!-- 表单内容 -->
<input type="button" value="提交1" onclick="submitYouFrom('地址一')"/>
<input type="button" value="提交2" onclick="submitYouFrom('地址二')"/>
</form>

function submitYouFrom(mets,path){
       $("#form1").attr("action",path); 
       $("#form1").attr("method",mets); 
       $('#form1').submit();
}
submitYouFrom('方式',‘路径');

有的时候用了Tab之后，很多不可避免的产生两个表单，这个时候就要具体问题具体分析，一般一个页面两个表单比较少，如果同时存在两个表单，一个表单更新之后，http无状态性，导致第二个表单也被刷新，或者直接跳转到其他页面，只处理一个表单。如果用Ajax的话，需要提示操作结果。

参考资料：同一个页面提交多个form表单方法（详细）

黄兵个人博客原创。

转载请注明出处：黄兵个人博客 - 同一个页面多个form表单提交方法