您现在的位置是：首页 >>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做下拉菜单的三种方法
下一篇：JS去掉网址后缀
随机图文
文章评论
|
评论加载中...
|
点击排行
js关闭div
标签云
猜你喜欢
站点信息
- 建站时间：2018-11-17
- 文章统计：222篇文章
- 微信交流：扫描二维码，添加我