Question

我想创建一个HTML表单，如下所示：

<form action="<?php print($action); ?>" method="post">
<label for="possibilities">Possibilites</label>
        <select name="possibility" id="possibility">
        <?php foreach ($possibilites as $possibility): ?>
            <option value="<?php print($possibility['id']); ?>"><?php
                print($possibility['name']); ?></option>
          <?php endforeach; ?>
        </select>
        <rest>The rest of the form</rest>
</form>

当用户从选项菜单中选择某个值时，将生成表单的其余部分（而不是<rest>The rest of the form</rest>）

此页面接受将在表单其余部分中使用的大量PHP个变量。

如何根据从选项中选择的值生成表单的其余部分？

表单的其余部分将接受动态生成的各种输入元素中的大量PHP变量。用户应该可以在各个休止符之间切换（<rest> ... </rest>，直到他提交完成的表单。代码不应该打开安全漏洞。

您会选择哪种方法？为什么？（加载部分HTML文件的Javascript？为<rest>...</rest>构建各种DOM树（包含PHP变量）或PHP代码中的某些方法）？

Answer 1

创建一个额外的div或任何其他需要显示表单的html元素

<div class="formGenerated"></div>

然后在javascript中更改事件有助于了解何时选择任何选项

$(document).ready(function() {
    $('#possibility').on('change', function() {
      var selectedVal =  $('#possibility').val();//value of the option selected
       $.ajax({
           url:'multipleForms.php',
           type:'POST',
           dataType:'json', 
           data:{name:selectedVal},
           success:function(resp){
             $('.formGenerated').html(resp);
          }
       });
    });
});

// multipleForms.php
<?php
   $name = $_POST['name'];
   if($name == 'x'){
     $x = 'your form goes here';
     echo json_encode($x);
   }
   //similarly for other conditions
?>

希望这对你有所帮助。

Answer 2

使用jquery，以下代码将是一个选项：

$(document).ready(function() {
    $('#selectId').on('change', function() {
        $('#restDivId').load('partialHtmlPage.php?value=' + $('#selectId').val());
    });
});

Answer 3

构建各种DOM树是更快的选择。实际上没有更好或更安全的选择，如果我们谈论安全性，两者都是相同的......

Answer 4

使用文档片段和dom操作动态更新标记。它足够快，完全是客户端。关于jQuery的使用，我宁愿首先与框架无关，除非你需要一些由所述框架提供的特定选项。

文档：

Answer 5

对我而言，这实际上取决于一些事情：

您需要显示多少个其他表单元素？
您是否需要以某种方式记录在服务器端填写表单的步骤？
您是否需要评估表单中提交的数据以及服务器上仅提供的数据，以确定要显示的下一个表单组件？

如果您只有几个不同的表单选项并且在DOM中添加隐藏元素，则页面下载不会添加您认为不可接受的增量页面下载时间，您可能会强烈考虑仅使用javascript的解决方案来隐藏/显示表单基于您所需逻辑的元素。如果您对其他任何项目的回答都是肯定的，并且假设您希望在没有重新加载页面的情况下完成所有这些操作，那么您将需要使用AJAX方法。

根据所选值创建动态表单

5 个答案: