JS实现form表单的跳转

最新推荐文章于 2025-06-30 22:35:14 发布

原创最新推荐文章于 2025-06-30 22:35:14 发布 · 1.8w 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#java #JavaScript

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用JavaScript动态改变表单提交的目标页面，实现从单一表单跳转至多个不同页面的功能。同时，深入探讨了带有验证功能的表单如何通过AJAX实现异步提交，避免页面刷新，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

form表单提交时需要从一个页面跳转至不同的页面，使用js动态提交

例如：1.jsp跳转至2.jsp和3.jsp

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>跳转</title>
<script type="text/javascript">
   //把表单的action改为2.jsp
   function Two() {
       document.form.action = "2.jsp";
       document.form.submit();
   }
   //把表单的action改为3.jsp
   function Three() {
       document.form.action = "3.jsp";
       document.form.submit();
   }
</script>
</head>
<body>

<form action="" method="post" name="form">
   <table width="300" border="1" align="center" bgcolor="#9AD3A4" bordercolor="red">
       <tr><td align="center" colspan="2" >button跳转</td></tr>
       <tr>
           <td><input type="button" value="跳转到2.jsp" onclick="Two()"      class="botton"/></td>
           <td><input type="button" value="跳转到3.jsp" onclick="Three()"    class="botton"/></td>
       </tr>
   </table>
</form>
</body>
</html>

JavaScript解决一个带验证的Form两个Submit事件（一个使用【AJAX实现】，一个页面提交并跳转）

<form class="form-horizontal" action="xxx" method="post" enctype="multipart/form-data" data-   toggle="validator" role="form" novalidate="true" id="patentEditForm"> 
       <button class="btn btn-primary" type="button" id="but_sub">保存</button>
       <button class="btn btn-primary" type="button">保存返回列表</button>
       <button class="btn btn-warning" type="button" onclick="window.location='/biz/project/list';">
           返回
       </button>
</form>

$(document).ready(function(){
    var buttonId;

    $('#patentEditForm').validator().on('submit', function (e) {
            if(buttonId == "but_sub"){
                var formData = new FormData($("#patentEditForm")[0]);
                $.ajax({
                    type:"POST",
                    url:"/biz/",
                    data: formData,
                    dataType:"JSON",
                    nsync:false,
                    cache: false,
                    contentType: false, 
                    processData: false,
                    success:function(date){
                        switch(date.status){
                        case 1:
                            $success("保存成功！");
                            break;
                        case 1009:
                            $error("保存失败！");
                            break;
                        default :
                            $error("没有提交信息");
                        }
                    },
                    error:function(){
                        $error("没有提交信息");
                    }
                });
        }
    });

    $(".btn-primary").click(function(){
        buttonId = $(this).attr("id");
        $('#patentEditForm').trigger('submit');
    });