zoukankan      html  css  js  c++  java
  • 一个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>
  • 相关阅读:
    AJAX 应用 透过 JavaScript 调用 C# 函数
    快速搞懂 SQL Server 的锁定和阻塞
    国际财务报告准则 IFRS 与信息系统
    我的android阅读软件“微读”做最简单的手机阅读软件
    我的android阅读软件“微读”v2.0发布,加入新浪微博的支持
    iphone开发我的新浪微博客户端用户登录等待篇(1.4)
    iphone开发我的新浪微博客户端用户登录自定义弹出窗口篇(1.2)
    自定义实现类似android主界面的滑屏换屏控件
    我的android阅读软件“微读”v2.2又发布,加入微美图、微漫画、微美女阅读
    iphone开发我的新浪微博客户端用户登录OAuth授权认证篇(1.3)
  • 原文地址:https://www.cnblogs.com/no8g/p/13415590.html
Copyright © 2011-2022 走看看