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


Automatically creating the desirable number of radio button questions

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

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

这应该是这样工作的:用户打开index.html,在那里他添加第一个问题(按钮添加问题)和答案的建议(例如3,他将通过按下添加选项按钮并插入文本)。他应该做同样的事情,并为问题2,等等。

之后,通过单击PROCEED,应该会将他引导到process.php页面,其中调查将显示单选按钮问题。但是这里有一个错误,请查看链接或下面的代码:

测试链接

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;
?>

你可能在命名元素时在表单方面犯了错误。你也做了错误的后端,而迭代。

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;
?>