0
点赞
收藏
分享

微信扫一扫

js 获取表单和页面控件数据

<div class="login-home">
<a-form
name="loginform"
id="components-form-demo-normal-login"
:form="form"
class="login-form"
@submit="handleSubmit"
>
<a-form-item>
<a-input
name="userName"
v-decorator="[
'userName',
{ rules: [{ required: true, message: 'Please input your username!' }] },
]"
placeholder="Username"
>
<a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
</a-input>
</a-form-item>
<a-form-item>
<a-input
name="password"
v-decorator="[
'password',
{ rules: [{ required: true, message: 'Please input your Password!' }] },
]"
type="password"
placeholder="Password"
>

 

1.获取表单
(1.)document.表单名称
(2.)document.getElement(表单的id)

 

var formvalue=document.loginform;
console.log(formvalue.userName.value+"\n"+formvalue.password.value)

 

js 获取表单和页面控件数据_单选框

 

 获取元素:

 

2.获取input元素
(1)通过 id获取:document.getElementById(元素的id);
(2)通过 form.名称形式获取:myform.元素名称; —>name属性值
(3)通过 name 获取:document.getElementByName(元素名称)[索引]//从0开始

3.获取单选框
获取单选框有一个前提:将一组单选框按钮设置相同的name属性值
(1)获取单选按钮组:document.getElementsByName(“name属性值”);
(2)遍历每个单选按钮,并查看单选按钮元素的checked属性
若属性值为true,表示被选中,否则未被选中
选中状态设定: checked=’checked’ 或 checked=’true’ 或 checked
未选中状态设定: 没有 checked 属性 或 checked=’false’

<input type="radio" name="sex"value="1" checked>男 <input type="radio" name="sex" value="2">女
for(var i=0,i<na.length;i++){
var s=na[i]; //每一个元素
var h=s.checked;
var t=s.value;

console.log("是否被选中: "+h+",值是: "+t);
}3.多选checkbox:
<input type="checkbox" name="rad" value="1" /> 唱歌
<input type="checkbox" name="rad" value="2" checked /> 跳舞
<input type="checkbox" name="rad" value="3" checked /> rap

function getTxt(){

var radio=document.getElementsByName('rad');

var all="";

for(var i=0;i<radio.length;i++){
//得到每个单选按钮
var s=radio[i];
var g= s.checked;//得到每个单选按钮及状态

if(g){ //判断g的状态

var vv= s.value;

all+=vv+",";

}


}

  

 

5.获取下拉选项
(1)获取select 对象:
var ufrom = document.getElementById(“ufrom”);
(2)获取选中项的索引:
var idx=ufrom.selectedIndex ;
(3)获取选中项 options 的 value 属性值:
var val = ufrom.options[idx].value;
注意:当通过 options 获取选中项的 value 属性值时,
若没有 value 属性,则取 option 标签的内容
若存在 value 属性,则取 value 属性的值
(4)获取选中项 options 的 text:
var txt = ufrom.options[idx].text;
选中状态设定:selected=‘selected’、selected=true、selected
未选中状态设定:不设 selected 属性

script type="text/javascript">

function test(){
//获取 select 对象
var city=document.getElementById('city');
// 获取选中项的索引:
var id =city.selectedIndex;
console.log(id);

//获取选中项 options 的 value 属性值:

var index1=city.options[1].value;
console.log(index1); //beijing

获取选中项 options 的 text:

var text1=city.options[2].text;
console.log(text1);


// 选中状态设定:selected='selected'、selected=true、selected
// 未选中状态设定:不设 selected 属性
var oo= city.options[3].checked=true; //选中下标为3的下拉按钮,设置为true,设置选中状态

</script>

 



举报

相关推荐

0 条评论