您现在的位置是:首页 >>JsJs

Js提交form表单

zhang2021-07-10 17:48:23【Js】人已围观

简介:
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>js提交表单</title>
<script src="{cxcms:path}/templates/default/js/jquery-1.8.3.min.js"></script>
</head>
<body>

表单一:
<div id="biaodan" style="background:none">
<div class="phone-box">
<div class="phone-inner">
<div class="cheshi0">
<p class="ceshi">不用迷茫,在线测试马上领取学历提升方案</p>
</div>
<form action="#">
<div>
<p style="color:#514F4F; font-size:16px; margin-top:10px; text-align:center; ">免费测试:看看自己适合哪种学历形式,系统今晚关闭,请考生尽快进行测评!</p>
</div>
<div class="phone-details">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="WW">请输入您的姓名:</td>
<td class="xx">
<input type="text" name='name' id='xm' placeholder="请输入您的姓名" />
</td>
</tr>
<tr>
<td class=" WW ">目前的最高学历:</td>
<td class=" xx "><select name='xl'>
<option value='初中及以下'>初中及以下</option>
<option value='高中/中专'>高中/中专</option>
<option value='大专'>大专</option>
<option value='本科'>本科</option>
</select></td>
</tr>
<tr>
<td class=" WW ">您的年龄段是:</td>
<td class=" xx "><select name='nld' >
<option value='18岁以下'>18岁以下</option>
<option value='18-23岁'>18-23岁</option>
<option value='24-30岁'>24-30岁</option>
<option value='31-40岁'>31-40岁</option>
<option value='40岁以上'>40岁以上</option>
</select>
</td>
</tr>
<tr>
<td class=" WW ">提升学历的原因:</td>
<td class=" xx "> <select name='yy' >
<option value='求职需要'>求职需要</option>
<option value='升职加薪'>升职加薪</option>
<option value='积分落户'>积分落户</option>
<option value='评职称需要'>评职称需要</option>
<option value='考公务员需要'>考公务员需要</option>
<option value='其他'>其他</option>
</select>
</td>
</tr>
<tr>
<td class=" WW ">请输入您的电话:</td>
<td class=" xx ">
<input type=" text " name='tel' id='dh2' placeholder="请输入电话号码" />
</td>
</tr>
</tbody>
</table>
</div>
<div style="text-align:center; color:#4D4C4C; margin-top:10px; font-size:15px; ">系统将根据您填写的信息为您推荐适合匹配的院校与专业,请留意短信,系统稍后为你发送结果</div>
<div class="phone-but ">
<span id="sub1" class="input">提交获取测评结果</span>
</div>
</form>
</div>
</div>
</div>


表单二:
<div class="exam-info public-wrap tc">
<div class="exam-cont public-cont w1200" style="margin-top: 120px;left: 45%;">
<h2><small>2020年成人学历,</small>助学金计划</h2>
<h2><small>内部名额申请现已开放,</small>因补贴力度大,会限制补贴名额</h2>
<h2><small>每天开放30个名额,</small>先到先得</h2>
<form action="#">
<div class="input-box m0a clearfix">
<input class="left" type="text" name="tel" id="dh1" placeholder="请输入您的手机号码">
</div>
<div class="input-box m0a clearfix">
<input class="left" type="text" name="name" id="xm" placeholder="姓名">
</div>
<input class="exam-btn ty" type="button" id="sub2" value="点击立即抢占名额">
</form>
</div>
</div>


<script>
/*以下为发起留言的方法,可以上报手机号、QQ、微信三种方式的留言*/
$("#sub1").click(function () {
$.ajax({
url: "custom.asp?action=add&_type=ajax",
type: "POST",
dataType:"json",
data: { //需要传递的参数
name: $('#biaodan input[name="name"]').val(),
xl: $('#biaodan select[name="xl"]').val(),
nld: $('#biaodan select[name="nld"]').val(),
yy: $('#biaodan select[name="yy"]').val(),
tel: $('#biaodan input[name="tel"]').val()
},
success: function(res) { //请求成功后的操作
if(res.status=="success"){
alert(res.msg);
}
else{
alert(res.msg);
}
},
error: function(err) { //请求失败后的操作
console.log(err); //请求失败在控制台输出22
}
})

});
</script>
<script>
/*以下为发起留言的方法,可以上报手机号、QQ、微信三种方式的留言*/
$("#sub2").click(function () {
$.ajax({
url: "custom.asp?action=add&_type=ajax",
type: "POST",
dataType:"json",
data: { //需要传递的参数
name: $('.exam-cont input[name="name"]').val(),
tel: $('.exam-cont input[name="tel"]').val()
},
success: function(res) { //请求成功后的操作
if(res.status=="success"){
alert(res.msg);
}
else{
alert(res.msg);
}
},
error: function(err) { //请求失败后的操作
alert("服务器发生错误,请联系管理员");
console.log(err); //请求失败在控制台输出22
}
})

});
</script>
</body>
</html>


首选是点击提交按钮,然后开始执行操作。
js提交表单时,先找到提交按钮,
然后取提交按钮的id命名或者class命名,没有的话,可以自己设置一个,
然后修改data:中自己需要获取的参数,一个网站可能存在多个表单,因此获取的参数前面需要找个唯一的参数,例如这里的#biaodan select和.exam-cont input,表示获取#biaodan和exam-cont下面的。
多个表单的提交按钮命名不能一样,这里两个提交按钮用的是#sub1和#sub2分开。

注意:提交按钮可以是input,也可以是span等其他,如果是提交按钮是input,那么不能用type="submit",否则会出错,要用type="button";如果提交按钮用的不是input,那么就不用写type=什么什么。

js提交form表单需要jquery.js的支持。所以,页面里面需要引用jquery.js文件。且jquery.js需要放在

<script>
/*以下为发起留言的方法,可以上报手机号、QQ、微信三种方式的留言*/
$("#sub2").click(function () {
$.ajax({
url: "custom.asp?action=add&_type=ajax",
type: "POST",
dataType:"json",
data: { //需要传递的参数
name: $('.exam-cont input[name="name"]').val(),
tel: $('.exam-cont input[name="tel"]').val()
},
success: function(res) { //请求成功后的操作
if(res.status=="success"){
alert(res.msg);
}
else{
alert(res.msg);
}
},
error: function(err) { //请求失败后的操作
alert("服务器发生错误,请联系管理员");
console.log(err); //请求失败在控制台输出22
}
})

});
</script>
的前面,要让jquery.js先加载,要不然jquery.js没有先加载的情况下,表单提交不了。









上一篇:Js做下拉菜单的三种方法

下一篇:没有了!

文章评论

    评论加载中...

标签云

站点信息

  • 建站时间:2018-11-17
  • 文章统计:134篇文章
  • 微信交流:扫描二维码,添加我
在线客服
在线客服
在线咨询:
点击这里给我发消息技术交流
点击这里给我发消息技术交流
点击这里给我发消息技术交流
电话咨询:
(微信同步)
15629136039
微信二维码