在同一个form表单内，需要两个button按钮时，怎么实现分别提交？

悠悠 2023-06-05 12:48 26阅读 0赞

在很多时候，一个form表单中，不仅仅只有一个button按钮，有的甚至出现两个、三个都是有可能，这时候form的url就不能是平常那样的写法了：

先来一个普通的form表单的url：

<form accept-charset="UTF-8" action="$\{pageContext.request.contextPath\}/admin/counter/fundState"  
                                    class="form-horizontal" method="get" style="margin-bottom: 0;">

</form>

这是一个简单的form表单，form中有一个button按钮时，就很适用，但是有两个button按钮时，就不适用了。

下来举一个两个button按钮的例子：

<form class="form-horizontal" id="addForm" action="" loading="false" method="get" style='margin-bottom: 0;'>  
                        <input name="backUrl" id="backUrl" value="$\{PARAMS\_LINK\}" type='hidden'/>  
                        <input type="hidden" name="listIsEmty" id="listIsEmty" value="$\{listIsEmty\}"/>  
                        <div class='box-body'>  
                              
                            <div class="row">  
                                  
                                  <div class="col-md-4">  
                                    <div class="form-group">  
                                        <label class='col-sm-4 control-label'>证件类型</label>  
                                        <div class='col-sm-8'>  
                                            <select class='form-control' id='certType' name='certType'>  
                                                <fund:dictOptions dictId="100016" value="$\{map\['certType'\]\}"/>  
                                            </select>  
                                        </div>  
                                    </div>  
                                </div>  
                            </div>  
                            <div class="row">  
                                <div class="col-md-4">  
                                    <div class="form-group">  
                                        <label class='col-sm-4 control-label'>证件号码</label>  
                                        <div class='col-sm-8'>  
                                            <input autocomplete="off" class='form-control' id="certCode" name="certCode" type='text'                                                                value="$\{map\['certCode'\]\}" validate="maxlength:18"/>  
                                        </div>  
                                    </div>  
                                  </div>  
                                <div class="col-sm-4">  
                                    <div class="form-group">  
                                        <label class="col-sm-4 control-label">资金卡号</label>  
                                        <div class="col-sm-8">  
                                            <input autocomplete="off" class='form-control' id="accNo" name="accNo" type='text'                                                                             value="$\{map\['accNo'\]\}" />  
                                        </div>  
                                    </div>  
                                </div>  
                                  <div class="col-md-4">  
                                   <div class="form-group">  
                                       <div class="col-sm-4 control-label ptfix">  
                                           <button id="bnt1" class="btn btn-primary" type="submit" οnclick="return changeForm1();">查询                                                     </button>  
                                           <button id= "bnt2" class='btn btn-primary' type="submit" οnclick="changeForm2();">导出</button>  
                                       </div>  
                                       <div class="col-sm-8"></div>  
                                   </div>  
                               </div>  
                            </div>  
                           </div>  
                    </form>

在上面这一段代码中，有两个button按钮，它们都需要提交form表单，这时候，我们可以借助js来动态的给form赋action的url地址：

<script type="text/javascript">

function changeForm1()\{

$("\#addForm").attr("action","$\{pageContext.request.contextPath\}/admin/report/stockBalanceDetailed/browse\_queryList");

\}

function changeForm2()\{  
                                                                                               $("\#addForm").attr("action","$\{pageContext.request.contextPath\}/admin/report/stockBalanceDetailed/browse\_queryReport");  
        \}

</script>

这只是两个button按钮时的操作，同理，当一个form表单中需要多个button按钮时，就可以通过js 的方式去解决。

发表评论取消回复

表情：

评论列表（有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

相关一个form表单有两个按钮,分别提交到不同的页面

一个form表单有两个按钮，分别提交到不同的页面 html页面： <div> <h3>静态资源管理</h3> </div> ...

一时失言乱红尘/ 2024年04月18日 12:05/ 0 赞/ 77 阅读

相关在同一个form表单内，需要两个button按钮时，怎么实现分别提交？

在很多时候，一个form表单中，不仅仅只有一个button按钮，有的甚至出现两个、三个都是有可能，这时候form的url就不能是平常那样的写法了：先来一个普通的form表单

悠悠/ 2023年06月05日 12:48/ 0 赞/ 27 阅读

相关爬虫时怎么查看需要提交哪些表单数据？

首先进入到成绩查询界面： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly

快来打我*/ 2022年12月02日 04:22/ 0 赞/ 181 阅读

相关同一个页面内实现html+js表单提交输出功能

<html> <head> <title>同一个页面内实现html+js表单提交输出功能</title> <meta http-equiv="C

以你之姓@/ 2022年08月12日 15:29/ 0 赞/ 191 阅读

相关 Form表单提交

1. JS源码提交： var form = document.getElementById('AddZookeeperForm'); form

谁借莪１个温暖的怀抱￠/ 2022年07月15日 01:42/ 0 赞/ 432 阅读

相关 form表单下的button按钮会自动提交表单的问题

form表单下的按钮在没有指定type类型的时候，如果我们同时给其添加了点击事件的话。会发现我们在点击的时候回默认的把表单也给提交了。如： <script type

男娘i/ 2022年07月13日 10:36/ 0 赞/ 273 阅读

相关只有一个form表单，实现多个提交按钮

[![Center][]][Center 1] 转载自：[IT摆渡网][Center 1] \-- 一个IT实时在线问答平台,解决任何IT技术难题，无需等待，立马解决！--[

￡神魔★判官ぃ/ 2022年06月14日 10:13/ 0 赞/ 220 阅读

相关 jquery实现同时提交两个form表单

<script type="text/javascript" src="jquery-1.5.1.js"></script> <script type="

曾经终败给现在/ 2022年06月14日 08:18/ 0 赞/ 214 阅读

相关 form表单提交时，action怎么传一个或多个参数

<form action="RollBackFormData_updateLook_success_supervision?id=${listy.teacherid }

朱雀/ 2022年05月08日 15:03/ 0 赞/ 513 阅读

相关前端问题：button按钮在form表单的时候会当成submit提交

button按钮在form表单的时候会当成submit提交 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_1

偏执的太偏执、/ 2021年11月01日 15:56/ 0 赞/ 372 阅读