向前辈们请教一个问题:如何用JS验证一个 name属性为数组的表单?

fox_lin 2014-01-13 12:12:30

是这样的:做一个问卷调查的页面,其中的问题类型有单选题,复选题,文本答案 .
基本流程是:先展示出所有数据库保存的问题->用户答问卷->提交问卷->用JS验证是否答完所有题目->答完所有题目则保存问卷答案,否则提示用户未答完题目,返回问卷页面.
很自然的我有一个记录答案的表单,为了保持问题与答案的关联性,对每一个问题的每一项答案,我是这么处理的:
<tr><td><input type="checkbox" name="answer[".$msg[id]."][]" value=".$tmp[0]." />".$tmp[0]." : ".$tmp[1]."</td></tr>"
其中msg[id]是该问题的ID;tmp[0]是该问题选项的索引,就是A选项B选项C选项的A,B,C;tmp[1]是选项描述,就是ABCD各选项描述了什么内容.
这样可以让答案表单具有结构性,我生成的示例表单数组:Array ( [12] => Array ( [0] => A )
[23] => Array ( [0] => 1 [1] => 3 [2] => 4 )
[24] => Array ( [0] => 文本类型答案. )
),这样一来保存用户的答案是挺方便的,可是关键的问题是我对JS不太熟悉(小白一枚),所以用JS验证用户是否答完全部问题(验证此数组内元素数是否等于问题数)这一个环节不会做了,所以想请大家指点一下.

...全文

169 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

fox_lin 2014-02-09

打赏
举报

谢谢二楼,年前没有来得及结帖子,我慢慢看你的思路.

zhjdg 2014-01-13

打赏
举报

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<form id='aList' method='post' action='1.php'>
		<input type="checkbox" name='answer["t1"][]' value='a1'> 
		<input type="checkbox" name='answer["t1"][]' value='a2'> 
		<input type="checkbox" name='answer["t1"][]' value='a3'> 
		<input type="checkbox" name='answer["t1"][]' value='a4'> 
		<br /> 
		<input type="checkbox" name='answer["t2"][]' value='b1'> 
		<input type="checkbox" name='answer["t2"][]' value='b2'> 
		<input type="checkbox" name='answer["t2"][]' value='b3'> 
		<input type="checkbox" name='answer["t2"][]' value='b4'> 
		<br /> 
		<input type='submit' value='Submit' id='submit'>


	</form>


	<script>
	// 题目的名字，自己加上去。
		function answerName() {
			var names = [ 't1', 't2' ];
			return names;
		}
		//找出所有题目，并分类。
		function findT() {
			var p, allInput, names, namesLen,i;
			p = document.getElementById('aList');
			allInput = [].slice.call(p.getElementsByTagName("input"));
			names = answerName();
			namesLen = names.length;
			i=0;
			var result={};
			for(i;i<namesLen;i++){
				var fName = 'answer["' +names[i] +'"][]';
				var len = allInput.length;
				var go = true;
				var j=-1;
				var elem;
				var t = result[names[i]]=[];
				var num=0;
				while((elem=allInput[++j])&&go){
					if(elem.name.indexOf(fName) !==-1){
						t.push(elem);
						allInput.splice(j--,1);
						num++;
					}
					if(num==4){
						go = false;
					}
				}
			}
			return result;			
		}
		
		function checkIsAllSelect(){
			var t = findT();			
			var st;
			for(var j in t){
				st = t[j];
				var len = st.length
				var i=0;
				var flag = true;
				for(i;i<len;i++){
					if(st[i].checked === true){
						flag = false;
					}
				}
				if(flag){
					return false;
				}
			}
			return true;
			
		}		
		
		function doSubmit(e) {
			if (checkIsAllSelect()){
				
			}else{
				e.preventDefault();
				//return false;
			}
		}

		var $submit = document.getElementById('submit');
		$submit.addEventListener('click', doSubmit);
	</script>



</body>
</html>