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

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

一个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>
相关文章
|
12月前
|
JSON JavaScript 前端开发
form表单提交方式
form表单提交方式
102 0
|
4月前
|
前端开发 JavaScript API
网页自动提交Form表单的方法
在数字化时代,自动化任务如网页自动提交Form表单,能大幅提升效率。这涉及自动填写注册信息等场景。本文概述了多种实现方式:JavaScript可直接在前端自动填充并提交;Python结合Selenium模拟真实用户操作;AOKSend作为API工具发送表单数据;第三方工具如iMacros、AutoHotkey和Zapier提供非编程自动化选项。根据需求选择合适方法,可显著提升工作效能,减少重复性劳动。
|
6月前
获取form表单提交的内容
获取form表单提交的内容
|
12月前
|
小程序 前端开发 JavaScript
小程序提交form表单
微信小程序提交form表单内容
87 0
|
JavaScript
form表单提交后,页面弹出成功或者失败的信息
form表单提交后,页面弹出成功或者失败的信息
166 0
|
前端开发
【前端异常】html页面中的button按钮会自动提交form表单的问题以及解决方案
有时候我们可能需要在表单中放置多个按钮,比如表单页面常见的按钮有创建和取消。点击创建按钮会触发单击响应事件,在单击响应事件中进行提交表单,这没有任何问题。点击取消按钮的时候,触发对应的单击响应事件,这个单击响应事件中主要处理关闭表单页面逻辑,所以会关闭页面,这也正常。但是!打开控制台监听请求会发现,它也会提交表单。
623 0
【前端异常】html页面中的button按钮会自动提交form表单的问题以及解决方案
|
前端开发 数据安全/隐私保护 开发者
提交按钮 | 学习笔记
快速学习提交按钮
220 0
提交按钮 | 学习笔记
HTML_表单的介绍&提交按钮
HTML_表单的介绍&提交按钮
160 0
|
JavaScript
jQuery 禁用表单提交按钮,防止用户请求重复提交
jQuery 禁用表单提交按钮,防止用户请求重复提交
200 0
jQuery 禁用表单提交按钮,防止用户请求重复提交