簡體   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