HTML中获取input中单选按钮radio数据(性别例子)
个人学习整理
1、编写HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Gender</title>
</head>
<body onload="get_gender()">
<div>
性别: <input type="radio" name="gender" id="g_man" value="1">男
<input type="radio" name="gender" id="g_woman" value="0">女
<input type="radio" name="gender" id="g_none" value="-1">保密
<br>
<button onclick="get_sex()">提交</button>
<p id="p1"></p>
</div>
</body>
</html>
2、在<script></script>中编写JS--接收数据库(此处接收数据库中性别的接口省略,使用的是onload先获取人员的id再填写性别)
//获取数据库中性别信息
//使用ajax操作
function get_gender(){
//获取当前页面传过来的人员id
var urlParams=new URLSearchParams(location.search);
var $id=urlParams.get(id);
//1.获取异步对象
var xhr=new XMLHttpRequest();
//4.绑定监听,获取响应get方法
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
var result=xhr.responseText;
var $gender=JSON.parse(result);
if($gender.gender==1){
g_man.checked=true;
}else if($gender.gender==0){
g_woman.checked=true;
}else{
g_none.checked=true;
}
}
}
//2. 创建请求,打开链接
var url="../get_gender?id="+$uid;
xhr.open("get",url,true);
//3.发送请求
xhr.send(null);
}
3、编写JS-将人员性别传入数据库
function get_sex(){
// 获取本页面的人员id
var urlParams=new URLSearchParams(location.search);
var $id=urlParams.get("id");
//ajax--post方法
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
var result=xhr.responseText;
console.log(result);
}
}
xhr.open("post","../get_gender",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var gender="";
if(g_man.checked){
p1.innerHTML=g_man.value;
gender=g_man.value;
}else if(g_woman.checked){
p1.innerHTML=g_woman.value;
gender=g_woman.value;
}else{
p1.innerHTML=g_none.value;
gender=g_none.value;
}
var formdata="id="+$id+"&gender="+gender;
xhr.send(formdata);
}
HTML中获取input中单选按钮radio数据(性别例子)的更多相关文章
- js中获取input中所输入的值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Android中获取网页表单中的数据实现思路及代码
在Android中获取网页里表单中的数据具体实现代码如下,感兴趣的各位可以参考过下哈,希望对大家有所帮助 MainActivity如下: 复制代码 代码如下: package cn.testjavas ...
- Android中获取网页表单中的数据
MainActivity如下: package cn.testjavascript; import java.util.StringTokenizer; import android.os.Bundl ...
- koa 基础(十)原生node.js 在 koa 中获取表单提交的数据
1.app.js // 引入模块 const Koa = require('koa'); const router = require('koa-router')(); /*引入是实例化路由 推荐*/ ...
- 在SQL SERVER中获取表中的第二条数据
在SQL SERVER中获取表中的第二条数据, 思路:先根据时间逆排序取出前2条数据作为一个临时表,再按顺时排序在临时表中取出第一条数据 sql语句如下: select top 1 * from(se ...
- 在Express 中获取表单请求体数据
在Express 中获取表单请求体数据 获取 GET 请求参数 获取 POST 请求体数据 安装 配置 获取 GET 请求参数 Express 内置了一个 API , 可以直接通过 req.query ...
- js技术之如何在JS中获取input的值
在JavaScript中获取input元素value的值: 方法一:var variations_number = $("#input的id名").val(); 1 <!DO ...
- 记录一次bug解决过程:velocity中获取url中的参数
一.总结 在Webx的Velocity中获取url中参数:$rundata.getRequest().getParameter('userId') 在Webx项目中,防止CSRF攻击(Cross-si ...
- 在弹框中获取foreach中遍历的id值,并传递给地址栏(方法2)
1.php有时候我们需要再弹框中获取foreach中遍历的数据(例如id),在弹框中点击按钮并传递给地址栏跳转.那么应该怎么做呢.第二种方法. 2. 可以在弹框中给出一个input hidden 点击 ...
随机推荐
- easyui 动态添加标签页,总结
步骤 1:创建 Tabs <div style="margin-bottom:10px"> <a href="#" class="e ...
- [技术分享]借用UAC完成的提权思路分享
借用UAC完成的提权思路分享 背景 UAC(User Account Control,用户帐户控制)是微软为提高系统安全而在Windows Vista中引入的新技术,它要求用户在执行可能会影响计算机运 ...
- typeof操作符返回一个字符串,表示未经计算的操作数的类型。
typeof操作符返回一个字符串,表示未经计算的操作数的类型. 语法 typeof运算符后跟操作数: typeof operand or typeof (operand) 参数 operand 是 ...
- hdoj1078【DP·记忆化搜索】
还是满水的一道题目吧...这个一看肯定要搜索了..然后又是这么DP,那就是记忆化搜索了...走K步,下一步要比他多...很好写啊/// #include<iostream> #includ ...
- VS代码中常用 正则表达式
1. #define ABC 1 修改为 enum 样式: #define (.+?)\s+(.+?)$ $1 = $2 ,
- 安装elasticsearch-head
直接安装chrome插件,用npm老出错,shit 再说吧 使用插件连接的时候反而没有出错,后续如果出错 , 可以配置 elasticsearch下config下的y 在新的电脑上使用发现格式不对,比 ...
- python 蓝牙模块pybluz安装
最近项目运用了蓝牙,所以来学一学蓝牙. 经过查阅,知道python的蓝牙模块是pybluz,然后老管理进行安装 出错,提示“Could not find the Windows Platform SD ...
- Fzu Problem 1901 Period II (kmp)
题目链接: Problem 1901 Period II 题目描述: 给出一个串,满足长度为p的前缀和长度为p的后缀相等的p的个数,输出p的个数,和p分别是多少? 解题思路: 对kmp的next数组的 ...
- Codeforces Round #395 (Div. 2) D
Description One of Timofey's birthday presents is a colourbook in a shape of an infinite plane. On t ...
- RHEL 6.5 ----Postfix邮件服务器
主机名 IP 服务 master 192.168.30.130 slave 192.168.30.131 软件包介绍 包名 介绍 postfix-2.6.6-2.2.el6_1.x86 ...