繁体   English   中英

使用预填充的 java 脚本 arrays 生成和处理动态表单

[英]Dynamic form generation and processing with pre-filled java script arrays

我有一系列问题(Q[i])和四个选项(op[])。 我已从 mysql 将数据填充到其中。

  1. 我想生成一个动态表格,下面是它的代码,它不起作用,让我知道如何 go 一下。

我想做一个类似http://www.w3schools.com/quiztest/quiztest.asp?qtest=PHP的测验

这是我尝试过的代码:

for(i=1;i<=10;i++)
    {
        <form name="Quiz Test">
        document.write(Q[i]+"</br>");
        <input type="radio" name="choice" value=op1[i]> document.write(op1[i])<br>
        <input type="radio" name="choice" value=op2[i]> document.write(op2[i])<br>
        <input type="radio" name="choice" value=op3[i]> document.write(op3[i])<br>
        <input type="radio" name="choice" value=op4[i]> document.write(op4[i])<br>
        //<input type="submit" onclick="get_radio_value()">
        </form>
    }

提前致谢

使用PHP JSON填充阵列

<html>
<head>
<style>
.questionDiv { display:none }
</style>
<script type="text/javascript">
// the array below is of course fillable on the server. 
// Just dump the array to JSON
// var quiz = <?PHP echo $someJSON ?>    
var quiz = [
{"Q":"How ....","A":["one","two","three","four"]},
{"Q":"How ....","A":["one","two","three","four"]},
{"Q":"How ....","A":["one","two","three","four"]},
{"Q":"How ....","A":["one","two","three","four"]},
{"Q":"How ....","A":["one","two","three","four"]}
]; // note no comma after the last
function next(idx) {
  document.getElementById('Q'+idx).style.display='none';
  document.getElementById('Q'+(idx+1)).style.display='block';
}
window.onload=function() {
  var html = "";
  for(var i=0,n=quiz.length;i<n;i++) {
    html += '<div class="questionDiv" id="Q'+i+'"><span class="question">'+(i+1)+'. '+quiz[i].Q+'</span><br />'
    var answer = quiz[i].A;
    for (var j = 0, m=answer.length;j<m;j++) {
      var ident = 'A'+i+'_'+j;
      html += '<input type="radio" name="'+ident+'" id="'+ident+'" value="'+j+'" /><label for="'+ident+'">'+(j+1)+'. '+answer[j]+'</label><br />';
    }
    if (i<quiz.length-1) html += '<input type="button" onclick="next('+i+')" value="Next"/>';
    else html += '<input type="submit" />';
    html += '</div>'
  }
  document.getElementById('quizDiv').innerHTML=html;
  document.getElementById('Q0').style.display='block';
}
</script>
</head>
<body>
<form action="answer.php">
<div id="quizDiv">
</div>
</body>
</form>
<html>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM