Php 如何在html中创建表单数组_Php_Html

Php 如何在html中创建表单数组

php html

Php 如何在html中创建表单数组,php,html,Php,Html,我正在开发一个网页，其中一部分我想问用户一系列的是/否问题。考虑到我希望在用户单击“下一步”后显示第二个问题，而不是第一个问题。例如：我有5个问题： 1-你快乐吗？你满意吗？你饿了吗？你累了吗？你放松了吗首先，我想在下面的表格中显示第一个问题： <div class="form-popup " id="Q" style="float:right"> <div class="form

我正在开发一个网页，其中一部分我想问用户一系列的是/否问题。考虑到我希望在用户单击“下一步”后显示第二个问题，而不是第一个问题。例如：

我有5个问题： 1-你快乐吗？你满意吗？你饿了吗？你累了吗？你放松了吗

首先，我想在下面的表格中显示第一个问题：

<div class="form-popup " id="Q" style="float:right">
        <div class="form-container text-center" >
            <header>
                <h1 style="color:green">Questions </h1>                   
            </header>

            <P>Are you happy?</p><br>
            
            <input type="radio" name="yes/no" required>
            <label >Yes</label>&nbsp; &nbsp; &nbsp;
            <input type="radio" name="yes/no">
            <label >No</label><br><br><br>
        
            <button type="button" class="btn " >Next</button> &nbsp; &nbsp; &nbsp;
            <button type="button" class="btn " >Done</button>
        </div>
    </div>


问题
 你快乐吗？


对
否



下一个
多恩

我希望当用户回答此问题并单击“下一步”时，会自动显示第二个问题，而不是第一个问题。我想让它自动化，这样管理员就可以轻松地添加、删除或编辑任何问题了？

这里有一段代码，您也许可以继续使用。请注意，它缺少很多东西，比如处理（存储）给定的答案、验证输入、错误检查等，但它希望能给您一个如何完成的提示。将其视为解决方案的“开始”。在我看来，还需要更多：

<?php
$question_ix = $_GET["q"] ?? 0;

$questions = array(
    "Are you happy?",
    "Are you satisfied?",
    "Are you hungry?",
    "Are you tired?",
    "Are you relaxed?"
);

if (($question_ix >= count($questions)) || ($question_ix < 0)) {
    echo "No more questions (or wrong question number)"; exit;
} else {
    $next_question = $question_ix + 1;
    $html = <<<EOD
    <html><head>
    </head>
    <body>
        <div class="form-popup " id="Q" style="float:right">
            <div class="form-container text-center" >
                <header>
                    <h1 style="color:green">Questions </h1>                   
                </header>

                <p>{$questions[$question_ix]}</p><br>
                
                <input type="radio" name="yes/no" required>
                <label >Yes</label>&nbsp; &nbsp; &nbsp;
                <input type="radio" name="yes/no">
                <label >No</label><br><br><br>

                <button  onclick="window.open('?q={$next_question}', '_self');" type="button" class="btn " >Next</button> &nbsp; &nbsp; &nbsp;
                <button type="button" class="btn " >Done</button>
            </div>
        </div>
    </body>
    </html>
    EOD;
    echo $html;
}
?>

您可以通过追加和删除DOM元素来完成，下面只是一个示例，您可以根据自己的意愿进行调整。如果您想更新动态问题，请使用ajax
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        i=0;
        $(document).on("click", ".btn", function() {
            i++; // ensure new question is updated, you can remove this
            $(".form-container").remove();
            $("#Q").append('<div class="form-container text-center" ><header><h1 style="color:green">New Questions '+i+' </h1></header><P>Are you satisfied?</p><br><input type="radio" name="yes/no" required><label >Yes</label><input type="radio" name="yes/no"><label >No</label><br><br><br><button type="button" class="btn " >Next</button><button type="button" class="btn " >Done</button></div>');
        });
    });
</script>


$（文档）.ready（函数（）{
i=0；
$（文档）。在（“单击“，”.btn“，函数（）上）{
i++；//确保更新了新问题，您可以删除此问题
$（“.form container”）.remove（）；
$（“#Q”）.append（‘新问题’+i+’你满意吗？

是没有


下一步’；
});
});
代码的其余部分在哪里？你试过什么？您是否需要将每个答案存储在某个地方—db、文本文件等？您可以制作一个表单并隐藏所有单选按钮，但您想询问的按钮除外。然后，如果您按下“下一步”按钮，您可以隐藏当前单选按钮并显示“下一步”单选按钮，依此类推。最后一个问题显示提交按钮，而不是下一个。@ProfessorAbronsius我除了硬编码表单弹出窗口并使用javascript关闭一个和打开另一个之外，还没有做任何尝试。我的想法是，我想从数据库中阅读这些问题，并自动化我上面解释的场景。另外，我不需要存储answers@George问题是，首先：问题与单选按钮不同。第二，我想让它自动化，这样管理员就可以很容易地删除一个问题或添加一个问题，等等，“我想让它自动化”对于这个网站来说范围太广了。这是一个针对特定编程问题的问答网站。使整个过程自动化绝非易事；它包括以下内容：选择存储数据的方式，设置数据并创建用于输入、验证、读取、显示和删除数据的过程。您能否解释一下这部分：window.open（“？q={$next_question}，“_self”）；这是一个小的JavaScript代码，只需再次打开相同的页面，参数为？q=2
（对于第二个问题）。因此，如果您的文件名为yoursite.com/index.php
，那么脚本将重定向到yoursite.com/index.php？q=2
如果我不想重新加载页面怎么办。有没有不重新加载页面的方法呢？要做到这一点而不重新加载页面，需要ajax或者将所有问题写入页面上的javascript变量中load@ProfessorAbronsius我试图通过使用以下函数来使用ajax:function NextClick（）{var self=window.location.href；console.log（“从中加载“#Q”）+self）；$（“#Q”）.load（“#Q>*”）；}每当单击“下一步”按钮时，都会调用它，但我不断收到错误消息