一般来说用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>