html+js 问卷调查页面的展示以及form提交
html+js 问卷调查页面的展示以及form提交
从数据库查到问题的种类，选择种类则显示该种类的子问题，多选，点击则取消选择
子问题：
当选项为可输入时，点击该选项，则出现输入框，选择其他选项时，改输入框消失
html部分：
<body >
<div data-role=”page” >
<div data-role=”header”
style=”border: 0; background: #FBCDCA; text-align: center; height: 55px;”>
<div style=”padding-top: 3px;”>
<p>
<b>调查问卷</b>
</p>
</div>
</div>
<div data-role=”main” id=”main”>
<div id=”outer”>
<form onsubmit=”return check()” action=”saveQuestionnairersponse” method=”post” >
<div class=”type”>
<div class=”question”>
请选择你要调查的问题类型：
</div>
<div class=”answer”>
<c:forEach var=”type” items=”${typelist}” varStatus=”status”>
<input type=”radio” onclick=”showChild(this,${status.index})” />${type.qtName}<br />
</c:forEach>
</div>
</div>
<c:forEach var=”type” items=”${typelist}” varStatus=”status”>
<div id=”type${status.index}” style=”display: none;”>
<c:forEach var=”question” items=”${questionList}” varStatus=”q”>
<c:if test=”${question.qtId == type.qtId}”>
<div class=”question”>
${question.questionContent}
</div>
<div class=”answer” id=”answer${q.index}”>
<c:forEach var=”option” items=”${optionList}” varStatus=”s”>
<c:if test=”${option.tquestioninfo.questionId == question.questionId}”>
<input type=”radio” id=”op${s.index}” name=”questionnairersponse[${q.index}].tquestionoptionsinfo.optionId” value=”${option.optionId}” class=”option” onchange=”change(${q.index})”/>${option.optionContent}<br />
<div >
<c:if test=”${option.isWrite==1}” >
<div id=”table${s.index}” style=”display: none”>
<table
style=”border-bottom: 1px solid green; width: 80%”
cellpadding=”0″ cellspacing=”0″>
<tr>
<td>
<input type=”text” style=”border: 0; background: #FEFCC8; width: 100%;”
name=”questionnairersponse[${q.index}].writeContent” id=”write${s.index}”/>
</td>
</tr>
</table>
</div>
</c:if>
</div>
</c:if>
</c:forEach>
</div>
</c:if>
</c:forEach>
</div>
</c:forEach>
<div style=”margin-top: 20px;”>
<input type=”submit” value=”提交问卷” style=”background-color: #FBCDCA;border:0″ />
</div>
</form>
</div>
</div>
</div>
</body>
js部分：
<script type=”text/javascript”>
var length = “${fn:length(typelist)}”;
var questionLength = “${fn:length(questionList)}”;
var optionLength = “${fn:length(optionList)}”;
var tempradio = new Array();
function showChild(checkedRadio, index) {
for ( var i = 0; i < length; i++) {
if (index == i) {
var subQuestion = “type” + i;
if (tempradio[i] == checkedRadio) {
checkedRadio.checked = false;
document.getElementById(subQuestion).style.display = “none”;
tempradio[i] = null;
} else {
document.getElementById(subQuestion).style.display = “block”;
tempradio[i] = checkedRadio;
}
}
}
}
function change(answerId) {
var questionId = “answer” + answerId;
var v = document.getElementById(questionId).getElementsByTagName(“input”);
for ( var i = 0; i < v.length; i++) {
if (v.item(i).checked) {
var inputID = v.item(i).id;
var tableId = “table” + inputID.substring(2, 3);
var writeTable = document.getElementById(tableId);
if (writeTable != null) {
writeTable.style.display = “block”;
}
for ( var j = 0; j < v.length; j++) {
if (i != j) {
var inputID = v.item(j).id;
var writeId = “write” + inputID.substring(2, 3);
var writeText = document.getElementById(writeId);
if (writeText != null) {
writeText.value = “”;
}
}
}
} else {
var inputID = v.item(i).id;
var tableId = “table” + inputID.substring(2, 3);
var writeTable = document.getElementById(tableId);
if (writeTable != null) {
writeTable.style.display = “none”;
}
}
}
}
function check() {
var sum = 0;
for (var i = 0; i < optionLength; i++) {
var questionId = “op” + i;
var v = document.getElementById(questionId);
if(v.checked) {
sum+=1;
}
}
if (sum > 0) {
return true;
} else {
return false;
}
}