Question

当用户在类型表单上输入一些（任意）文本时，我希望显示第二个表单，而第二个表单则相同，依此类推。有没有一种方法，而无需创建多个隐藏表单，而仅在键入内容时使用jQuery显示它们呢？因为我将不得不在HTML中使用十多个表单...

感谢您的帮助！我将插入一个表单的示例供您处理

<div class="command">

  <form method="post" action="traitement.php">
    <label for="article">Articles:</label><br>
    <input type="text" name="article" placeholder="Ex: T-shirt, XL" id="article">
  </form>

</div>

Answer 1

我知道这并不是您真正要寻找的东西，但这可能会以其他方式帮助您。在第一个表格中指定所需的号码，然后单击链接，它会生成先前输入的表格数。

<script type='text/javascript'>
    function addFields(){
        // Number of inputs to create
        var number = document.getElementById("article").value;
        // Container <div> where dynamic content will be placed
        var container = document.getElementById("container");
        // Clear previous contents of the container
        while (container.hasChildNodes()) {
            container.removeChild(container.lastChild);
        }
        for (i=0;i<number;i++){
            // Append a node with a random text
            container.appendChild(document.createTextNode("Article" + (i+1)));
            // Create an <input> element, set its type and name attributes
            var input = document.createElement("input");
            input.type = "text";
            input.name = "article" + i;
            container.appendChild(input);
            // Append a line break 
            container.appendChild(document.createElement("br"));
        }
    }
</script>
</head>
<body>

<input type="text" id="article" name="article" placeholder="Ex: T-shirt, XL" value="">Number of Article (enter a number)<br />
<a href="#" id="filldetails" onclick="addFields()">Click Me</a>
<div id="container"/>

编辑

<script type='text/javascript'>
    function addFields(){
        for (i=0;i<1;i++){
            // Append a node with a random text
            container.appendChild(document.createTextNode("Article"));
            // Create an <input> element, set its type and name attributes
            var input = document.createElement("input");
            input.type = "text";
            input.name = "article";
            container.appendChild(input);
            // Append a line break 
            container.appendChild(document.createElement("br"));
        }
    }
</script>
</head>
<body>

<input type="button" id="article" onclick="addFields()" name="article" placeholder="Ex: T-shirt, XL" value="">Number of Article (click to add an article)<br />
  
<div id="container"/>

Answer 2

这是一个简单的例子，

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#article").keyup(function(){
                    $('body').append('<form method="post" action="traitement.php" id="secondForm"></form>');
                    $('#secondForm').append('<input type="text" id="secondArticle" name="secondArticle">');
                });
            });
        </script>
    </head>
    <body>
        <div class="command">
            <form method="post" action="traitement.php">
                <label for="article">Articles:</label><br>
                <input type="text" name="article" placeholder="Ex: T-shirt, XL" id="article">
            </form>
        </div>
    </body>
</html>

当我们在现有表单中键入任何内容时，您需要创建新表单。因此，我们可以在jquery中使用KeyUp函数。在文本框中键入任何内容后，将创建新的表单和输入文本框。

这只是一个简单的例子。希望这会有所帮助。

编辑：

$("#article").keyup(function(){
    if($('#secondForm').length == 0){
        $('body').append('<form method="post" action="traitement.php" id="secondForm"></form>');
        $('#secondForm').append('<input type="text" id="secondArticle" name="secondArticle">');
    }
});

填写一个表单后自动添加

2 个答案: