javascript - 自动创建所需数量的单选按钮问题

Question

我尝试制作网络应用程序来创建单选按钮问题(例如调查)。问题是定义单选按钮选项数组，以便在 php 页面上调用它并以所需的顺序显示它。

在下面的示例中，每个问题只有一个单选按钮，我想在index.html页面上显示所有单选按钮输入。

这应该像这样工作:用户打开index.html，在那里添加第一个问题(按钮添加问题)和答案建议(例如3，他将通过按添加选项按钮并插入文本来获得答案)它)。对于第二个问题，他应该做同样的事情，等等......

之后，通过单击“继续”，他应该会进入 process.php 页面，调查将在其中显示单选按钮问题。但有一个错误，请在链接或下面的代码中查看:

LINK FOR TESTING

index.html

<script src="script.js"></script>
<form action="http://www.balkanex.info/atest/radio/process.php" method="post">
Here is the page with which you can add your new radio button questions for survey.
<input type="button" value="ADD NEW QUESTION" onclick="addradio();">
<div id="mydiv"></div> 
<br/> 
<input type="submit" name="submit" value="PROCEED"><br/> 
</form> 

script.js

n=1;
var m = 1;
var moreradio = '<br/><input type="button" onclick="addmoreradio()" value="Add option">';
function addradio() {
        m = 1;
        var textarea = document.createElement("textarea");
        textarea.name = "question[" + n + "]";
        textarea.rows = 1;
        textarea.cols = 60;
        var div = document.createElement("div");
        div.innerHTML = n + '. Question: ' + '<br />' + 'Que: ' + textarea.outerHTML + moreradio + '<br/><div id="opid' + n + '"' + '></div><br /><br/>';
        document.getElementById("mydiv").appendChild(div);
        n++;
        r = n-1;
}
function addmoreradio() {
    var radio = '<input type="text" name="tag' + r + m + '"><br/>';
    document.getElementById("opid"+r).innerHTML += radio;
    m++
}

process.php

<?php
$question = $_POST['question'];
$length = count($_POST['question']);
$r=1;

for($j=1; $j<$length+1; $j++) {
if($_POST['question'][$j] != "") {
    $radioarray = $_POST['tag'];
    $area = '<input type="radio" name="'.$r.'" value="'.$r.'">'.$radioarray$j$r.'<br/>';
    $bla .= $j.') '.$question[$j].'<br/>'.$area.'<br/><br/>';
    $r++;
}}

$content = $bla;
echo $content;
?>

Answer 1

在命名元素时，您可能在表单方面犯了错误。此外，您在迭代时在后端犯了错误。您可以使用以下内容；

JS:

<script>
            var m = 0;
            function addradio() {
                    var textarea = document.createElement("textarea");
                    textarea.name = "question[]";
                    textarea.rows = 1;
                    textarea.cols = 60;
                    var div = document.createElement("div");
                    div.innerHTML = m + '. Question: ' + '<br />' + 'Que: ' + textarea.outerHTML + '<br/><input type="button" onclick="addmoreradio(' + m + ')" value="Add option">' + '<br/><div id="opid' + m + '"' + '></div><br /><br/>';
                    document.getElementById("mydiv").appendChild(div);
                    m++;
            }
            function addmoreradio(question_id) {
                var radio = '<input type="text" name="tag' + question_id + '[]"><br/>';
                document.getElementById("opid" + question_id).innerHTML += radio;
            }
        </script>

HTML:

<script src="script.js"></script>
<form action="http://www.balkanex.info/atest/radio/process.php" method="post">
Here is the page with which you can add your new radio button questions for survey.
<input type="button" value="ADD NEW QUESTION" onclick="addradio();">
<div id="mydiv"></div> 
<br/> 
<input type="submit" name="submit" value="PROCEED"><br/> 
</form>

PHP:

<?php
$question = $_POST['question'];
$content = '';

foreach ($question as $k => $v) {
    $area = '';
    $options = $_POST["tag" . $k];
    foreach ($options as $key => $val) {
        $area .= '<input type="radio" name="tag[]" value="'. $key .'">' . $val . '<br/>';   
    }

    $content .= $k + 1 . ') ' . $question[$k].'<br/>'.$area.'<br/><br/>';   
}

echo $content;
?>