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>
  • 相关阅读:
    Security headers quick reference Learn more about headers that can keep your site safe and quickly look up the most important details.
    Missing dollar riddle
    Where Did the Other Dollar Go, Jeff?
    proteus 与 keil 联调
    cisco router nat
    router dhcp and dns listen
    配置802.1x在交换机的端口验证设置
    ASAv931安装&初始化及ASDM管理
    S5700与Cisco ACS做802.1x认证
    playwright
  • 原文地址:https://www.cnblogs.com/no8g/p/13415590.html
Copyright © 2011-2022 走看看