如何使用form表单提交数据成功后可以跳转指定url

最新推荐文章于 2024-05-02 13:25:01 发布
最新推荐文章于 2024-05-02 13:25:01 发布
阅读量1.4w 收藏 6
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40817130/article/details/91377519
版权

一般来说用form表单提交参数后是无法跳转对应的url的，但是我们可以借助一些插件来实现，其中推荐指数最高的就是jq的form.js

我实用了一下，真的很好用，下面我就把form.js的具体实用方法进行归纳汇总，希望大家用的上，最后别忘了给我个赞哦

顺便多说一句我后端用的是php

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>用户系统</title>
        <link rel="stylesheet" type="text/css" href="css/order1.css"/>
        <script type="text/javascript" src="js/jquery.min.js" ></script>    
        <script type="text/javascript" src="js/form.js" ></script>    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.1/jquery.form.min.js" integrity="sha384-tIwI8+qJdZBtYYCKwRkjxBGQVZS3gGozr3CtI+5JF/oL1JmPEHzCEnIKbDbLTCer" crossorigin="anonymous"></script>        
    </head>
    <body>
        <div class="outers">
            <div class="form_bj">
                <div class="form_outer">
                    <form action="bbb.php" method="post"  id="formid" name="myform"  οnsubmit="return submitForm();" >
                        <div class="uname"><img src="img/people.png" alt="" /><input autocomplete="off" placeholder="请输入您的姓名" type="text" name="name"  id="uname" value="" /></div>
                        <div class="phone"><img src="img/phone.png" alt="" /><input autocomplete="off"  placeholder="请输入您的电话" type="text" name="phone"  id="phonenum" value="" /></div>
                        <div class="adress"><img src="img/adress.png" alt="" />
                        <textarea  id="adress" placeholder="请输入您的地址"  name="adress"></textarea>                       
                        </div>
                        <div class="choose">选择你的需求数量</div>
                        <div class="chose_one">
                            <label class="chosed_one">
                                <label><input type="radio" name="box" value="1盒 " />1盒 </label>
                                <div class="original">原价：495元<img src="img/delate.png" alt="" /></div>
                                <div class="now">现价：465元</div>
                            </label>    
                            <label class="chosed_two after_click">
                                <label><input type="radio" name="box"  value="2盒" checked/>2盒 </label>
                                <div class="original">原价：990元<img src="img/delate.png" alt="" /></div>
                                <div class="now">现价：930元</div>
                            </label>
                            <label class="chosed_three">
                                <label><input  type="radio" name="box" value="3盒" />3盒 </label>
                                <div class="original">原价：1485元<img src="img/delate.png" alt="" /></div>
                                <div class="now">现价：1385元</div>                                
                            </label>
                        </div>
                        <button class="submit_btn"  type="submit" >提交需求</button>
                    </form>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            
            $(".chosed_one").click(function(){
               $(this).addClass('after_click');
               $(".chosed_two,.chosed_three").removeClass('after_click');               
            });    
            
            $(".chosed_two").click(function(){
               $(this).addClass('after_click');
               $(".chosed_one,.chosed_three").removeClass('after_click');               
            });
            $(".chosed_three").click(function(){
               $(this).addClass('after_click');
               $(".chosed_two,.chosed_one").removeClass('after_click');               
            });
            function isPhone(phone) {
                var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
                if (phoneReg.test(phone)) {                        
                    return true;
                }
                else {        
                    return false;
                }
            }
            
            function isName(uname) {
                    var checkname = /^[\u4E00-\u9FA5]{2,6}$/;
                    if (checkname.test(uname)) {                        
                        return true;
                    }
                    else {        
                        return false;
                    }
            }

    
    function submitForm(){
    
    
        var phonenum = $("#phonenum").val();
        var uname = $("#uname").val();
        var adress=$("#adress").val();
        
           if(isPhone(phonenum)==false||phonenum == ""){
                alert("手机号不正确或为空");
                return false;
           }else if(isName(uname)==false||uname == ""){
                alert("请输入您的名字");
                return false;
           }else if(adress == ""){
           alert("您的地址不能为空");
                return false;
           }
           else{
            
             $("#formid").ajaxSubmit(function (date) {
             var mes = JSON.parse(date);
              alert(mes.tip);
              window.location.href="./aaa.html";    
              
            });
            return false;
            
           }
           
    }    
            
            
            
        </script>
    </body>
</html>

 

不吃鸡爪ing
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html表单提交服务器不跳转,vue 解决form表单提交但不跳转页面的问题
weixin_39810196的博客
06-10 1663
vue 解决form表单提交但不跳转页面的问题vue使用@submit.prevent=""来设置提交时执行的函数，并阻止页面跳转：sub函数写在methods内：methods:{$.post('http://api.test.ai/visitorinfo/', $('#msgForm').serialize(), function(data){console.log(data);})}以上这篇...
html 表单提交跳转新的页面,jquery模拟form表单提交并新打开页面
weixin_35958479的博客
06-09 1396
/*** form表单提交本页面打开* @param url* @param params*/functionpostCurrent(url,params){varform = $("");varinput;form.attr({"action":url});$.each(params,function(key,value){input = $("");input.attr({"name":key...
html form表单提交action和url跳转到actiond的区别介绍
09-28
form表单的action 与url跳转是不一样的：form表单可以给后台传递数据，url跳转到action只能通过url的参数来传递数据，不懂的朋友可以参考下
前端解析支付宝返回form表单，自动跳转支付_前端跳转到支付宝(1)
2401_84435138的博客
05-02 264
pc端 前端对接支付宝支付-前端获取支付宝返回的form 表单以及submit提交表单，自动跳转支付页面扫码支付返回的form数据大概如下，（可能会有差别）前端实例代码：项目中用到了微信扫码，支付宝扫码支付。前端调取支付宝接口（后台进行了封装，没有直接调取支付宝接口）。
JQ使用form表单提交数据，跳转指定页面或进行提交后的操作
qq_37155370的博客
07-20 3393
原生项目中JQ使用form表单提交数据，跳转指定页面或进行提交后的操作使用步骤上代码 使用步骤 需要： 引入jquery.js jquery.form.js，我使用的是cdn引入，避免下文件 上代码 引入： <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jqu
form表单可以提交，阻止页面跳转
Amourlwh的博客
07-25 8885
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form actio
form 表单提交后，使页面不跳转
qq_42617840的博客
03-20 4344
form 表单提交数据，往往会刷新页面，数据提交后会跳转到其他页面 如果不需要刷新页面时，可以通过ifame实现无刷新。 在form表单下定义一个ifame 将 form 的 target 属性指向 iframe 的 name 属性，这样就实现了不刷新页面的form提交。 示例： <form action="url" enctype="multipart/form-data" target...
php form表单提交方式,form表单提交数据的几种方式
weixin_33371440的博客
03-23 1346
一、submit提交一般表单提交通过type=submit实现，input type="submit",浏览器显示为button按钮，通过点击这个按钮提交表单数据跳转到/url.do当点击登录时，提交的数据是：username=username&password=password这种默认的提交方式，一般会进行页面的跳转(不成功时跳转到当前页面)，而有时我们是对弹出框进行数据提交，希望提交成...
JS Form表单提交文件后，自定义跳转或提示
春盏
08-18 5469
form表单提交后，自定义页面跳转或者提示内容 js请求代码和html代码是我在网上找的，但是后来想再去寻找时，已经找不见了。所以写此博客来记录。 不会解释，一切看代码。 《HTML》代码： target="rfFrame"> name="file" /> form设置target属性，引用的是下方 的id，具体什么原因，我也不清楚。 若上
ASP.NET中阻止form表单提交后跳转网页的方法
HerryDong的博客
09-11 1809
大家都知道form表单提交之后网页就跳转了，然而在很多时候我们不希望网页跳转，这时有同志提出：利用div替换form，然后ajax提交就可以了。这样做功能当然是能够实现的，但填写完后按回车键就没反应了…对于我这样的半吊子前端来说，多写一点js代码都是痛苦万分，还好form有一个onsubmit事件，可以完美解决问题。 html代码 <!DOCTYPE html> <html&gt...
vue 解决form表单提交但不跳转页面的问题
10-16
在Vue.js框架中，表单提交是一个常见的交互行为，但默认情况下，HTML的`<form>`元素在提交时会向其`action`属性指定的URL发送数据并导致页面重载或跳转。在某些场景下，如AJAX提交或者希望在当前页面处理提交的数据...
layui使用form表单实现post请求页面跳转的方法
10-16
为了解决这个问题，我们可以利用layui的form组件以POST方式提交数据，这样数据会被封装在请求体中，而不是显示在URL上。 首先，我们需要创建一个隐藏的form表单，设置其`action`属性为需要请求的服务器端接口，`...
利用ajax提交form表单到数据库详解(无刷新)
12-12
传统的HTML表单提交方式是通过`<form>`元素的`action`属性指定处理表单数据的服务器端脚本，如PHP，然后通过`method`属性指定请求类型（GET或POST）。然而，这种方式会导致页面的刷新和跳转，破坏了用户的浏览流程。...
action提交form表单后不跳转
热门推荐
u013992330的博客
04-25 2万+
正常的form表单提交后页面都会跳转，为了防止页面跳转，可使用jQuery的ajaxSubmit来防止跳转，可使页面保持原样不变1.首先引入以下文件&lt;script type="text/javascript" src="/js/jquery/jquery.form.js"&gt;&lt;/script&gt; //必须 &lt;script type="text/javascript" sr...
pillow_heif-0.17.0-pp39-pypy39_pp73-macosx_14_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
cykooz.resizer-3.0.0-cp310-cp310-macosx_11_0_arm64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]Delphi题库管理与试卷自动生成系统.zip
最新发布
07-27
[毕设]Delphi题库管理与试卷自动生成系统
131 种水果、蔬菜和坚果的 90380张的高质量图像数据集+图像识别与定位+该数据集相关的研究论文
07-27
<项目介绍> 包含131 种水果、蔬菜和坚果的 90380张的高质量图像数据集+该数据集相关的研究论文。可供深度学习图像识别与定位。 - 训练集大小：67700 个图像 测试集大小：22888 个图像 文件名格式：image_index_100.jpg（例如 32_100.jpg）或 r_image_index_100.jpg（例如 r_32_100.jpg）或 r2_image_index_100.jpg 或 r3_image_index_100.jpg。 “r”代表旋转水果。 “r2”表示水果绕第三轴旋转。 “100”来自图像尺寸（100x100 像素）。 水果是如何拍摄的: 1:使用 C920 摄像机拍摄水果。最好的网络摄像头之一。 2:在水果后面，我们放了一张白纸作为背景。 3:将水果和蔬菜种植在低速电机（3转/分钟）的轴中，并录制一段20秒的短片。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
form表单提交跳转页面
07-28
form表单提交后跳转页面可以通过设置form标签的action属性来实现。在action属性中填写跳转的页面的URL地址。例如，如果要跳转到"example.com"页面，可以将action属性设置为"example.com"。当用户点击提交按钮时，表单数据将被提交到指定的URL，并跳转到该页面。请注意，如果action属性为空，则表单数据将被提交到当前页面。 #### 引用[.reference_title] - *1* *2* [【前端】实现form表单中提交按钮为submit类型时，进行判断后才提交跳转](https://blog.csdn.net/rensheng2020/article/details/122689756)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [如何使用form表单提交数据成功后可以跳转指定url](https://blog.csdn.net/qq_40817130/article/details/91377519)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值