如何自动获取多个表单

Question

我正在做一个HTML表单，它的意思是创建一个步骤来传递一个游戏，我希望能够输入一个数字。例如，当我输入5时，它立即向我显示5个表单来填充和创建新的步骤，但是当我尝试它时，我怎么做呢？

<h3>Insertion des étape :</h3>

<form action="InsertionEtape.php" method="post">
    <input type="number" name="quantity" min="1" max="5">
    <br>
    <?php for ($i=0; $i < $_GET['quantity']; $i++) {
       ?>
        <h5>Nom de l'étape</h5>
        <input type="text" name="NomEtape" size="40" maxlength="40">
        <br>

        <h5> Description de l'étape </h5>
        <textarea name="DescriptionEtape" rows="8" cols="80"></textarea>
        <br>
        <br>
        <input type="submit" value="Valider">
        <?php
     } ?>
</form>

Answer 1

<h3>Insertion des étape :</h3>
<form action="index.php" method="post">
    <input type="number" name="quantity" id="quantity" min="1" max="5"> 
    <div id="formcontainer">
    </div>
    <input type="submit" value="Valider">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    jQuery(function($) {
        $("#quantity").bind('keyup mouseup', function () {
            var count = $('#quantity').val();
            var htmlf = '';
            for (i = 0; i < count; i++) {
                htmlf += "<h5>Nom de l'étape</h5><br/>";
                htmlf += '<input type="text" name="NomEtape_"'+i+' size="40" maxlength="40">';
                htmlf += "<h5>Description de l'étape</h5><br/>";
                htmlf += '<textarea name="DescriptionEtape_"'+i+' rows="8" cols="80"></textarea>';
                htmlf += "<br/>"
            }
            $("#formcontainer").html(htmlf);
        });
    });
</script>

简单，只需运行代码，您就会发现自己很容易。

Answer 2

对，所以听起来你想让这个表单在页面上更新。为此，您需要使用JavaScript。PHP只运行服务器端，您希望它在客户端更新。

下面是一个快速的例子，让你走上正确的道路。我正在使用jQuery，这是一个流行的Javascript库。

​

var $group = $('form .group').clone();
$('[name="quantity"]').on('change input keyup cut paste', function() {
  var quantity = parseInt($(this).val());
  $('form .group').remove();
  for (var i = 0; i < quantity; i++) {
    $group.clone().insertBefore('form [type="submit"]');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Insertion des étape :</h3>

<form action="InsertionEtape.php" method="post">
  <input type="number" name="quantity" value="1" min="1" max="5">
  <br>
  <div class="group">
    <h5>Nom de l'étape</h5>
    <input type="text" name="NomEtape[]" size="40" maxlength="40">
    <br>

    <h5> Description de l'étape </h5>
    <textarea name="DescriptionEtape[]" rows="8" cols="80"></textarea>
    <br>
  </div>
  <input type="submit" value="Valider">
</form>

​

Answer 3

好吧我改了这个但出现了一个错误

<form action="InsertionEtape.php" method="post">
    <input type="number" name="quantity" min="1" max="5">
    <br>
    <?php for ($i=0; $i < $_GET['quantity']; $i++) {

       echo "<h5>Nom de l'étape</h5>";
       echo "<input type=\"text\" name=\"NomEtape_".$i."\" size=\"40\" maxlength=\"40\"> <br>";
       ?>
        <h5> Description de l'étape </h5>
        <textarea name="DescriptionEtape" rows="8" cols="80"></textarea>
        <br>
        <br>
        <input type="submit" value="Valider">
        <?php
     } ?>
</form>

注意:未定义索引:第106行/***/**********/*****/******/WWW/Page_Administrateur/FormulaireInsertion.php中的数量