javascript - 根据所选值创建动态表单

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

希望这对你有帮助。