求助：一个表单中有多个input，数量不确定，怎么验证不为空，一次性提交后，怎么获取到值？

时间：2021-03-17 19:00:30
做一个简单的问卷调查系统，在用户答题页面页面遇到了难题，一个是怎么验证所有input不为空，input的数量不确定，包含text,checkbox,radio三种类型；另一个是提交后，怎么获取到每一个input的输入值？各位大神们，有什么好的方法吗？

7 个解决方案

#1

你这个问卷调查我也做过实际挺简单的
你的input应该用到节点添加和删除
要想判断input是不是被选中就用jQuery当中each方法遍历
当变量input对象时你要用prop方法判断这个对象是text还是checkbox还是radio
然后取值就行了

#2

补充说一句你在创建input的时候一定要有规律的添加name值方便提交后php容易获取
获取就用遍历就行

#3

var text=true,checkbox={},radio={};
var inputs=document.getElementsByTagName('input');
for(var i=0,len=inputs.length;i<len;i++){
var x=inputs[i];
var type=x.type.toLowerCase();
switch(type){
case 'text':
  if(text){
    text=!!x.value;
  }
break;
case 'checkbox':
  if(!checkbox[x.name]){
      checkbox[x.name]=x.checked;
  }
break;
case 'radio':
  if(!radio[x.name]){
      radio[x.name]=x.checked;
  }
break;
}
}
if(!text){
alert('no');
}
for(var i in checkbox){
if(checkbox.hasOwnProperty(i)){
  if(!checkbox[i]){
  alert(''no');
break;
}
}
for(var i in radio){
if(radio.hasOwnProperty(i)){
  if(!radio[i]){
  alert(''no');
break;
}
}
}
类似这样试试

#4

JQuery 获取 所有input控件 再循环
$("input[id^='id']")

遍历就
$("input[id^='id']").each(function(){
//获取对象this
});

#5

引用 1 楼 u010036886 的回复:
你这个问卷调查我也做过实际挺简单的
你的input应该用到节点添加和删除
要想判断input是不是被选中就用jQuery当中each方法遍历
当变量input对象时你要用prop方法判断这个对象是text还是checkbox还是radio
然后取值就行了


大哥，有没有具体实例，对jQuery不是很熟悉；我尝试了用for循环获取input值，但是取到的值都是null;无法插入数据库

#6

引用 5 楼 xuhonggood1 的回复:
Quote: 引用 1 楼 u010036886 的回复:

你这个问卷调查我也做过实际挺简单的
你的input应该用到节点添加和删除
要想判断input是不是被选中就用jQuery当中each方法遍历
当变量input对象时你要用prop方法判断这个对象是text还是checkbox还是radio
然后取值就行了


大哥，有没有具体实例，对jQuery不是很熟悉；我尝试了用for循环获取input值，但是取到的值都是null;无法插入数据库

我得确定一个问题就是你的调查问题是不是已经固定了不在添加了。如果调查问题已经固定那么就如4楼所说如果没有固定那么你的name值一定要有规律而且下标依次递增这样设计才方便遍历。我也不清楚你的调查问题是可以继续增加减少还是固定不变的。

#7

将name值设计好后就在动态程序里面循环取值就行了。下面这个是判断是否被选中希望对你有用 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>

<script type="text/javascript" language="javascript">

function check(){

	if(conn()==false){

		return false;

	}	

}

function conn(){

	var inputs=document.getElementsByTagName("input");

	for(var i=0 ; i<inputs.length ; ++i){

		if(inputs[i].type.toLowerCase()=='checkbox'){  //在这里进行input文本框类别判断剩下的input  radio自己写吧。复制整个if里面东西将checkbox改成radio或者text

			var mark = false;

			$("input[name='"+inputs[i].name+"']").each(function(){

				if($(this).prop("checked")){

					mark = true;

				}

			});

			if(!mark){

				alert("第 "+(inputs[i].name.replace(/[^\d]/g,''))+" 道题没有作答");

				return false;

				break;

			}

		}

	}

}

</script>

</head>

<body>

<pre>

<form onsubmit="return check()">

Q1、您的爱好<br>

<input type='checkbox' name='q1[]' value='好' />篮球

<input type='checkbox' name='q1[]' value='不好' />足球

<input type='checkbox' name='q1[]' value='其他' />羽毛球

Q2、您的性别<br>

<input type='radio' name='r2' value='是' />男

<input type='radio' name='r2' value='不是' />女


Q3、您的地址<br>

<input type='text' name='t3' >

</pre>

<input type="submit" value=" ok " />

</form>

</body>

</html>

#1

你这个问卷调查我也做过实际挺简单的
你的input应该用到节点添加和删除
要想判断input是不是被选中就用jQuery当中each方法遍历
当变量input对象时你要用prop方法判断这个对象是text还是checkbox还是radio
然后取值就行了

#2

补充说一句你在创建input的时候一定要有规律的添加name值方便提交后php容易获取
获取就用遍历就行

#3

var text=true,checkbox={},radio={};
var inputs=document.getElementsByTagName('input');
for(var i=0,len=inputs.length;i<len;i++){
var x=inputs[i];
var type=x.type.toLowerCase();
switch(type){
case 'text':
  if(text){
    text=!!x.value;
  }
break;
case 'checkbox':
  if(!checkbox[x.name]){
      checkbox[x.name]=x.checked;
  }
break;
case 'radio':
  if(!radio[x.name]){
      radio[x.name]=x.checked;
  }
break;
}
}
if(!text){
alert('no');
}
for(var i in checkbox){
if(checkbox.hasOwnProperty(i)){
  if(!checkbox[i]){
  alert(''no');
break;
}
}
for(var i in radio){
if(radio.hasOwnProperty(i)){
  if(!radio[i]){
  alert(''no');
break;
}
}
}
类似这样试试

#4

JQuery 获取 所有input控件 再循环
$("input[id^='id']")

遍历就
$("input[id^='id']").each(function(){
//获取对象this
});

#5

引用 1 楼 u010036886 的回复:
你这个问卷调查我也做过实际挺简单的
你的input应该用到节点添加和删除
要想判断input是不是被选中就用jQuery当中each方法遍历
当变量input对象时你要用prop方法判断这个对象是text还是checkbox还是radio
然后取值就行了


大哥，有没有具体实例，对jQuery不是很熟悉；我尝试了用for循环获取input值，但是取到的值都是null;无法插入数据库

#6

引用 5 楼 xuhonggood1 的回复:
Quote: 引用 1 楼 u010036886 的回复:

你这个问卷调查我也做过实际挺简单的
你的input应该用到节点添加和删除
要想判断input是不是被选中就用jQuery当中each方法遍历
当变量input对象时你要用prop方法判断这个对象是text还是checkbox还是radio
然后取值就行了


大哥，有没有具体实例，对jQuery不是很熟悉；我尝试了用for循环获取input值，但是取到的值都是null;无法插入数据库

我得确定一个问题就是你的调查问题是不是已经固定了不在添加了。如果调查问题已经固定那么就如4楼所说如果没有固定那么你的name值一定要有规律而且下标依次递增这样设计才方便遍历。我也不清楚你的调查问题是可以继续增加减少还是固定不变的。

#7

将name值设计好后就在动态程序里面循环取值就行了。下面这个是判断是否被选中希望对你有用 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>

<script type="text/javascript" language="javascript">

function check(){

	if(conn()==false){

		return false;

	}	

}

function conn(){

	var inputs=document.getElementsByTagName("input");

	for(var i=0 ; i<inputs.length ; ++i){

		if(inputs[i].type.toLowerCase()=='checkbox'){  //在这里进行input文本框类别判断剩下的input  radio自己写吧。复制整个if里面东西将checkbox改成radio或者text

			var mark = false;

			$("input[name='"+inputs[i].name+"']").each(function(){

				if($(this).prop("checked")){

					mark = true;

				}

			});

			if(!mark){

				alert("第 "+(inputs[i].name.replace(/[^\d]/g,''))+" 道题没有作答");

				return false;

				break;

			}

		}

	}

}

</script>

</head>

<body>

<pre>

<form onsubmit="return check()">

Q1、您的爱好<br>

<input type='checkbox' name='q1[]' value='好' />篮球

<input type='checkbox' name='q1[]' value='不好' />足球

<input type='checkbox' name='q1[]' value='其他' />羽毛球

Q2、您的性别<br>

<input type='radio' name='r2' value='是' />男

<input type='radio' name='r2' value='不是' />女


Q3、您的地址<br>

<input type='text' name='t3' >

</pre>

<input type="submit" value=" ok " />

</form>

</body>

</html>
标签：

相关文章