一个Form表单中提交两个不同的action

小小渔夫

于 2020-10-22 10:47:56 发布

阅读量4k

点赞数 5

分类专栏： Web前端

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/cx243698/article/details/109217204

版权

Web前端专栏收录该内容

8 篇文章 2 订阅

订阅专栏

本文介绍了如何通过HTML和JavaScript在一个表单中实现两个不同的提交动作，从而避免创建多个表单导致的页面不美观问题。示例代码展示了一个包含产品编号、开始时间和结束时间输入的表单，通过按钮点击分别触发查询和导出操作。

摘要由CSDN通过智能技术生成

前言

假如我们不使用一个form表单中提交两个不同的action,那么我们一般情况下会使用两个form。这样所导致的结果就是页面的不美观。比如下图:

实现

<form role="form" style="margin: 5px 0 5px 0; float: left;" action="" name="form1" method="get">
          <label class="form-inline">
                  <input type="text" class="form-control" name="partNum" autofocus="autofocus" placeholder="请输入产品编号">
          </label>
          <label class="form-inline"><input type="text" name="startDate" id="startDate"
                                                      placeholder="开始时间" autocomplete="off" class="form-control">
          </label>

          <label class="form-inline">
                   <input type="text" name="endDate" id="endDate" placeholder="结束时间"
                               autocomplete="off" class="form-control">
                    </label>
          <button class="btn btn-info" type="submit" onclick="form1.action='<%=basePath%>inStock/search';form1.submit();">查询</button>
           <button class="btn btn-info" type="submit" onclick="form1.action='<%=basePath%>inStock/export';form1.submit();">导出</button>
</form>