使用jQuery获取form表单数据并且打印在控制台

第一步：引入jQuery文件（这里是必须的）其他的配置文件按照个人需求引入

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery-3.4.1.min.js"></script><script src="js/bootstrap.min.js"></script>

第二步：创建form表单

<div class="container"><div class="row"><form class="form-horizontal"><!--name --><div class="form-group"><label>账号</label><input type="text" name="username" id="name" placeholder="请输入账号" /></div><!-- 密码--><div class="form-group"><label>密码</label><input type="password" name="password" id="passsword" placeholder="请输入密码"/></div><!--性别--><div class="form-group"><label class="col-lg-2">性别</label><div class="col-lg-10"><div class="radio-inline"><label><input type="radio" name="sex" value="male" />男</label></div><div class="radio-inline"><label><input type="radio" name="sex" value="female" />女</label></div></div></div><!-- 爱好--><div class="form-group"><label class="col-lg-2">爱好</label><div class="radio-inline"><label><input type="checkbox" name="hobby" value="sing" />唱歌 </label></div><div class="radio-inline"><label><input type="checkbox" name="hobby" value="dance" />跳舞 </label></div><div class="radio-inline"><label><input type="checkbox" name="hobby" value="football" />足球</label></div></div><div class="modal-footer"><input type="button" id="btn" name="submit"  value="注册"/></div></form></div></div>

第三步：创建函数获取表单中输入的数据，并且打印在控制台上

<script type="text/javascript">$(function(){$("#btn").click(function(){var username=$("input[name='username']").val();;var password=$("input[name='password']").val();;var sex=$("input[name='sex']").val();var hobbys=$(":checkbox:checked").val();var result={};result.username=username;result.password=password;result.sex=sex;result.bobbys=hobbys;console.log(result)})})</script>

使用jQuery获取form表单数据并且打印在控制台相关推荐

8 jquery 获取 form 表单内容
8 jquery 获取 form 表单内容有时,我们需要获取表单内容进行发送ajax请求,通过函数方式比较方便. $("#title").serialize() 获取一个序列化的 ...
JQuery获取form表单数据
form表单内所有元素追加name属性值 <form class="form-horizontal m" id="feedback"><inp ...
jquery的ajax获取form表单数据
jq是对dom进行的再次封装.是一个js库,极大简化了js使用 jquery库在js文件中,包含了所有jquery函数,引用: 这里主要介绍jquery获取页面form数据使用的过程 html页面代码 ...
form表单数据的提交与获取
最近写项目遇到的情况,搜索查看以后总结了一下关于form表单的提交与数据获取的方式. form表单的提交方式: 1.type=submit提交 input type="submit" ...
Jquery 之ajax 提交form表单数据的方法
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.form表单提交数组数据 1.jquery提交form表单 2.引入jquery.form.js 总结前言 &l ...
php获取post表单数据_PHP如何通过post方法来获取form表单中数据？（代码示例）
我们在网站开发过程中,通常都会遇到关于php form表单的相关操作.如php获取带有post提交方法的表单数据,这种该如何操作呢?如果大家有看过我[PHP如何通过get方法获得form表单数据?]这 ...
html post请求渲染,FastAPI框架入门基本使用, 模版渲染, form表单数据交互, 上传文件, 静态文件配置...
安装 pip install fastapi[all] pip install unicorn 基本使用(不能同时支持,get, post方法等要分开写) from fastapi import Fa ...
jQuery操作Form表单元素
Web开发中常常须要操作表单,form表单元素有select.checkbox.radio.textarea.button.file.text.hidden.password等. 当中checkbox ...
jquery表单ajax json数据,jquery序列化form表单使用ajax提交后处理返回的json数据
1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...

使用jQuery获取form表单数据并且打印在控制台

使用jQuery获取form表单数据并且打印在控制台相关推荐

最新文章

热门文章