首页 > 其他分享 >一个form表单有两个按钮,分别提交到不同的页面

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

时间:2023-05-24 23:38:42浏览次数:30  
标签:form pay upload value 表单 submit action document 页面


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

html页面:

<div>
    <h3>静态资源管理</h3>
</div>
<div>
    <div class="bjui-searchBar">
        <span style="font-size: 14px; padding: 3px;font-weight: 300"> 文件名称: </span>
        <input type="text" class="input-nm" value="${staticResourceFile.fileName!}" readonly size="50" data-rule="required;length(1~128)">
    </div>
    <div class="bjui-searchBar">
        <form action="" name="upload" enctype="multipart/form-data" method="post">
            <span style="font-size: 14px; padding: 3px;font-weight: 300"> 当前目录: </span>
            <input type="text" id="currentPath" name="currentPath" value="${staticResourceFile.parentPath!}" size="50" data-rule="required;length(1~128)">
            <input type="file" name="files" value="" id="file" multiple><span>当前支持格式为:jpg,png,css,js,mp4(50M以内)</span>
            <br>
            <input type="hidden" id="filePath" name="filePath" value="${staticResourceFile.filePath!}">
            <button type="button" class="btn-blue" value="确定" onclick="confirmSubmit()">确定</button>
            <button type="button" class="btn-red" value="删除" onclick="confirmDelete()">删除</button>
        </form>

    </div>
</div>

第一种方案:js写法:

<script src="/www/web/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

    function confirmSubmit() {
        var action = "${ctxPath}/staticResource/upload";
        var value = document.upload.currentPath.value.replace("\\", "/");
        $("#currentPath").val(value);
        document.upload.action = action;
        document.upload.submit();
    }

    function confirmDelete() {
        var action = "${ctxPath}/staticResource/delete";
        var value = document.upload.filePath.value.replace(/\\/g, "/");
        $("#filePath").val(value);
        document.upload.action = action;
        document.upload.submit();
    }
</script>

第二种方案:js写法

<script>
    function confirmSubmit(){
        document.pay.action="{:U('${ctxPath}/staticResource/upload')}";
        document.pay.submit();
    }
    function confirmDelete() {
        document.pay.action = "{:U('${ctxPath}/staticResource/delete')}";
        document.pay.submit();
    }
</script>

第三种方案:form自带属性

在form属性位置action填写默认的提交路由,在下面formaction里面填写另一个需要提交的地址。

<div>
    <h3>静态资源管理</h3>
</div>
<div>
    <div class="bjui-searchBar">
        <span style="font-size: 14px; padding: 3px;font-weight: 300"> 文件名称: </span>
        <input type="text" class="input-nm" value="${staticResourceFile.fileName!}" readonly size="50" data-rule="required;length(1~128)">
    </div>
    <div class="bjui-searchBar">
        <form action="{:url('${ctxPath}/staticResource/upload')}" name="upload" enctype="multipart/form-data" method="post">
            <span style="font-size: 14px; padding: 3px;font-weight: 300"> 当前目录: </span>
            <input type="text" id="currentPath" name="currentPath" value="${staticResourceFile.parentPath!}" size="50" data-rule="required;length(1~128)">
            <input type="file" name="files" value="" id="file" multiple><span>当前支持格式为:jpg,png,css,js,mp4(50M以内)</span>
            <br>
            <input type="hidden" id="filePath" name="filePath" value="${staticResourceFile.filePath!}">
            <input type="submit" class="btn-blue" value="确定" onclick="confirmSubmit()">确定</input>
            <input type="submit" class="btn-red" value="删除" formaction="{:url('${ctxPath}/staticResource/delete')}">删除</input>
        </form>
    </div>
</div>

 

标签:form,pay,upload,value,表单,submit,action,document,页面
From: https://blog.51cto.com/u_16128050/6343378

相关文章

  • APP中RN页面渲染流程-ReactNative源码分析
    在APP启动后,RN框架开始启动。等RN框架启动后,就开始进行RN页面渲染了。RN页面原生侧页面渲染的主要逻辑实现是在RCTUIManager和RCTShadowView完成的。通过看UIMananger的源码可以看到,UIMananger导出给JS端的API接口在对UI的操作上,基本都会同时对View和ShadowView进行操作。......
  • WinForm中给弹窗添加遮罩层
    1.新建三个窗体:  2.MainForm主窗体代码如下: privateMaskForm_shadowForm;///<summary>///显示遮罩层///</summary>privatevoidShowMask(){_shadowForm=newShadowForm......
  • CF280E - Sequence Transformation
    给定一个不降整数序列\(1\lex_1\lex_2\le\cdots\lex_n\leq\),请构造一个实数序列\(y\)满足\(y_i\in[1,q]\),\(y_i-y_{i-1}\in[a,b]\),且最小化\(\sum(y_i-x_i)^2\),保证有解。利用凸函数性质维护导数我们设\(dp_i(u)\)表示对于所有的合法的\(u\),\(y_i=u\)时\(\sum_......
  • 【前端异常】html页面中的button按钮会自动提交form表单的问题以及解决方案
    情景描述有时候我们可能需要在表单中放置多个按钮,比如表单页面常见的按钮有创建和取消。点击创建按钮会触发单击响应事件,在单击响应事件中进行提交表单,这没有任何问题。点击取消按钮的时候,触发对应的单击响应事件,这个单击响应事件中主要处理关闭表单页面逻辑,所以会关闭页面,这也正常......
  • 页面中调用swf 时allowScriptAccess 参数
    <paramname="allowScriptAccess"value="always"/>使用allowScriptAccess使Flash应用程序可与其所在的HTML页通信。此参数是必需的,因为fscommand()和getURL()操作可能导致JavaScript使用HTML页的权限,而该权限可能与Flash应用程序的权限不同。这与跨域安全性有......
  • form标签multipart/form-data 文件上传表单中 传递参数无法获取的原因!
    JAVA后台获取不到form表单提交值的情况可能的原因:1、提交元素的name与获取的name不符--request.getParameter(name)2、传递的值为空3、form没有嵌套input4、form加了enctype="multipart/form-data"属性其中第4种可能的情况主要是是因为在使用multipart/form-data属性之后请求体发生......
  • HTML标签:表单标签(form标签)
    表单:*概念:用于采集用户输入的数据的。用于和服务器进行交互。*form:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围*属性:*action:指定提交数据的URL(统一资源定位符)*method:指定提交方式*分类:一共7种,2种比较常用(面试也经......
  • CSS:页面美化和布局控制和选择器
    CSS:页面美化和布局控制和选择器概念:CascadingStyleSheets层叠样式表层叠:多个样式可以作用在同一个html的元素上,同时生效好处:功能强大将内容展示和样式控制分离降低耦合度。解耦让分工协作更容易提高开发效率CSS的使用:CSS与html结合方式内联样式在标签内使用style属......
  • 梦x西游H5页面搭建架设教程
    梦x西游H5页面搭建教程Centos大家好,我是艾西,今天给大家分享一款H5页面的游戏搭建教程。版本分为三种族、四种族、五种族,大家可以自己喜欢哪个版本自己尝试开服架设等,今天我们以三种族的为演示。那么让我们直接进入正题开始操作:架设准备:服务器一台centos7.2以上版本、服务端和客户端......
  • 流程表单JavaScript代码
    ----订单流程-----------//表单加载初始化时functionpreinit(){}//表单加载完成,isrun代表流程是否流转中1-是,0-否functionLoaded(isrun){$("#om_order_status").attr("disabled","disabled");......