jQuery练习：使用jQuery获取表单数据，使用弹窗显示。

表单样式：

HTML代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="form.css"/><script src="jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script src="form.js" type="text/javascript" charset="utf-8"></script></head><body><div id="nav"><a> 位置： 首页 --> 表单</a></div><div id="head"><a>注册信息</a></div><div id="main"><form action="#" method="get" id="form" name="mform"><table  class="tab"><tr class="user"><td>账号：</td><td><input type="text" name="user" id="num" placeholder="请输入账号" /></td></tr><tr class="pwd"><td>密码：</td><td><input type="password" name="password" id="pwd" placeholder="请输入密码"/></td></tr><tr class="sex"><td>性别:</td><td><input type="radio" name="sex" value="男" checked />男<input type="radio" name="sex" value="女" />女</td></tr><tr class="hob"><td>爱好：</td> <td><input type="checkbox" name="hobby" value="唱歌" checked />唱歌 <input type="checkbox" name="hobby" value="跳舞" />跳舞 <input type="checkbox" name="hobby" value="足球" />足球 </td></tr><tr class="star"><td>星座：</td> <td><select name="star" id="star"> <option value="1">白羊座</option> <option value="2" selected>射手座</option> <option value="3">巨蟹座</option> <option value="4">天秤座</option> <option value="5">水瓶座</option> <option value="6">双鱼座</option> <option value="7">天蝎座</option> <option value="8">狮子座</option> <option value="9">摩羯座</option> <option value="10">处女座</option> <option value="11">双子座</option> <option value="12">金牛座</option> </select> </td> </tr> <tr class="remarks"><td style="padding-bottom: 90px;">备注：</td> <td><textarea id="remark" rows="4" cols="50"></textarea></td></tr> <tr id="reg"> <td > <input id="btn" type="button" value="注册" "/> </td></tr></table></form></div></body>
</html>

CSS样式代码：

body{margin: 0;
}
#nav{background-color: aqua;width: 100%;padding-left: 10px;padding-top: 10px;height: 40px;}
#nav a{display: block;margin-top: 0px;
}
#head{padding-top: 25px;border-bottom: 1px solid #000;
}
#head a{font-size: 25px;margin-left: 10px;border-bottom: 2px solid #00FFFF;
}
.tab{padding-top: 20px;padding-left: 100px;
}
.user{display:block;  margin:2px 0;
}
.user input{border-style: none;border: 1px solid #000;border-radius: 5px;height: 25px;width: 250px;
}
.pwd{display:block;  margin:2px 0;}
.pwd input{border-style: none;border: 1px solid #000;border-radius: 5px;height: 25px;width: 250px;
}
.sex{display:block;  margin:2px 0;
}
.hob{display:block;  margin:2px 0;
}
.star{display:block;  margin:2px 0;
}
.remarks{display:block;  margin:2px 0;
}
.remarks textarea{border-style: none;border: 1px solid #000;border-radius: 5px;height: 100px;
}
#reg input{border-style: none;background-color: #00FFFF;color: white;width: 80px;height: 25px;
}

js代码：

$(function(){$("#btn").click(function(){var userName = $(":text").val();var password = $(":password").val();var sex = $(":radio:checked").val();var hobby = [];var i = 0;$(":checkbox:checked").each(function() { hobby[i] = $(this).val();i++;});var star = $("#star option:selected").text();var remark = $("#remark").val();alert("账号："+userName+"\r"+"密码："+password+"\r"+"性别："+sex+"\r"+"爱好："+hobby+"\r"+"星座："+star+"\r"+"备注："+remark)})})

结果测试：

jQuery练习：使用jQuery获取表单数据，使用弹窗显示。相关推荐

PHP获取表单数据的方法有几种,如何实现PHP获取表单数据与HTML嵌入PHP脚本
如何实现PHP获取表单数据与HTML嵌入PHP脚本导语:如何实现PHP获取表单数据与HTML嵌入PHP脚本,下面是小编给大家提供的操作讲解,大家可以参考阅读,更多详情请关注应届毕业生考试网. 常用的 ...
react如何获取表单数据
react如何获取表单数据? 分为两种情况:第一种是每次输入都会更新状态第二种是只有用到的时候才获取(会用大量的ref,不推荐) 这里主要介绍第一种 //这是我们要操作的数据state = {resu ...
python获取表单数据的代码_使用flask和python从html表单获取表单数据
我正在尝试在按下submit时从文本字段中获取表单数据,以便将其放入json格式并作为另一个页面访问json数据,该页面将是localhost:5000/info.每次我试图用request.form ...
观看慕课老师milanlover视频Tomcat装在Servlet的三种情况+Servlet获取表单数据+Servlet相对路径
在src新建TestServlet1: package servlet;import java.io.IOException; import java.io.PrintWriter;import ja ...
php 保存表单数据,使用jquery和php自动保存表单数据
我对PHP非常好,但是使用jQuery的总菜单,并且卡在自动保存表单数据中. 自动保存功能在dummy.php中每30秒调用一次.我正在将用于处理的序列化表单数据( – >数据库)发送到save ...
微信小程序之获取表单数据
前言:微信小程序中很多地方运用到了表单,很多时候我们需要把表单中的内容提取出来返回给后台,这里我随便写了一点注意点: 1.所有的input textarea button全部包含在form表单元素 ...
servlet获取表单数据
1.sevlet获取表单数据在很多的情况下,我们需要在浏览器,Web服务器和后台程序之间传递数据.浏览器使用两种方法可将这些信息传递到Web服务器,分别为Get方法和Post方法. 2.Get方法, ...
JSP简单练习-获取表单数据
在JSP中,服务器端程序与客户端交互最常用的方法就是采用表单提交数据.表单提交的方法主要有两种,一种是get方法,另一种是post方法,两者最大的区别:使用get方法提交的数据会显示在浏览器的地址栏中 ...
【jQuery】使用Ajax提单表单数据
为什么80%的码农都做不了架构师?>>> $('#prev').click(function(){$.ajax({cache: true,type: "POST&qu ...

jQuery练习：使用jQuery获取表单数据，使用弹窗显示。

表单样式：

HTML代码：

CSS样式代码：

js代码：

结果测试：

jQuery练习：使用jQuery获取表单数据，使用弹窗显示。相关推荐

最新文章

热门文章