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

一般来说用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
    原文地址: https://blog.csdn.net/qq_40817130/article/details/91377519
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞