如何动态创建表单元素

Question

当用户输入行数时，我需要动态创建一个表单。

我尝试了以下代码，并花了一个多小时在互联网上搜索，但仍无法解决。

首先，我是使用PHP进行此操作的，后来我陷入困境，论坛上的人们建议我使用Javascript。

我现在很困惑！ 请给我一个提示！

 <p> <h3>Assignment 11]</h3>***********************</p> <form action="" method="post"> <b>Number of items</b> (between 1 and 30): <input type="number" name="numbItems" min="1" max="30" id="numbItem"> &nbsp&nbsp <input name="submit" value="Create" type="submit" id="createItem"> </form> <script type="text/javascript"> //document.getElementById("numbItem").onchange = function() { document.getElementById("createItem").onclick = function() { var price = document.getElementById("numbItem").value; //document.getElementById("demo").innerHTML = "your model price will be " + price ; alert(price + " items created."); }; </script> <br>=============================================================================<br><br> <table> <tr> <td>Item</td> <td>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspValue ( R )</td> <td>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspTaxes ( R )</td> <td>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspVAT ( % )</td> </tr> </table> <br>=============================================================================<br><br> <?php if($numbItems=="1") { ?> <form action="" method="post"> <input type="text" name="item1" placeholder="Eg: Gross Salary" />&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" name="value1" placeholder="Eg: 12000" />&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input type="text" name="tax1" value="" readonly style="color:#f00;background:#ccc">&nbsp&nbsp&nbsp&nbsp&nbsp<input type="number" name="vat1" min="0" max="100"> &nbsp&nbsp&nbsp&nbsp&nbsp <input name="btnItem1" value="Calculate" type="button"><br><br> </form> <?php } ?> <?php if($numbItems=="2") { ?> <form action="" method="post"> <input type="text" name="item1" placeholder="Eg: Gross Salary" />&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" name="value1" placeholder="Eg: 12000" />&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input type="text" name="tax1" value="" readonly style="color:#f00;background:#ccc">&nbsp&nbsp&nbsp&nbsp&nbsp<input type="number" name="vat1" min="0" max="100"> &nbsp&nbsp&nbsp&nbsp&nbsp <input name="btnItem1" value="Calculate" type="submit"><br><br> <input type="text" name="item2" placeholder="Eg: Electricity" />&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" name="value2" placeholder="Eg: 750" />&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input type="text" name="tax2" value="" readonly style="color:#f00;background:#ccc">&nbsp&nbsp&nbsp&nbsp&nbsp<input type="number" name="vat2" min="0" max="100"> &nbsp&nbsp&nbsp&nbsp&nbsp <input name="btnItem2" value="Calculate" type="submit"><br><br> <!-- <input type="submit" value="Submit"> --> </form> <?php } ?> 

Answer 1

如果您有jQuery ...
1.将id元素添加到表单中或创建新的DIV ，如下所示

<form action="" method="post">
    <div id="theForm"></div>
</form>

2，jQuery功能

$('#createItem').click(function(e){  
    $('#theForm').append('<< Your Items HTML Code >>')  
});

3.将名称元素更改为item[]而不是item1和其他

当您在PHP中调用$_POST['item']时，该项目将作为数组读取。 您可以使用

$items = $_POST['item'];
foreach($items as $item){
    echo $item; //Output the value
}

Answer 2

这将为您提供帮助。 祝好运

 $(document).ready(function(e) { $("#create").on("click",function(){ var num = $("#num").val(); if(num>1){ for(i=1; i<=num; i++){ $(".extra").append('<tr><td><input type="text"></td></tr>'); } }else{ $(".extra").append('<tr><td><input type="text"></td></tr>'); } }); }); 

 <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <input type="number" id="num"> <button type="button" id="create">Create</button> <table> <tbody class="extra"> </tbody> </table> 

Answer 3

检查以下代码。 我已经使用Jquery来做到这一点。 如果您对javascript相当简单，则可以理解它。 希望能帮助您了解如何处理Java中的这种情况。

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript">
    $( document ).ready(function() {
        console.log( "ready!" );

        $( "#createItem" ).click(function() {
            var totalRows = $('#numbItem').val();

            var formHtml = '';
            for (var i = 1; i <= totalRows; i++)
            {
                formHtml += '&nbsp;<input type="text" name="item'+i+'"  placeholder="E.g.: Gross Salary" />&nbsp;<input type="text" name="value'+i+'" placeholder="E.g.: 12000" />&nbsp;<input type="text" name="tax'+i+'" value="" readonly style="color:#f00;background:#ccc">&nbsp;<input type="number" name="vat'+i+'" min="0" max="100">&nbsp;<input name="btnItem'+i+'" value="Calculate" type="button"><br><br>';

            }

            $('#userForms').html(formHtml);
        });

    });
</script>
</head>
<body>

    <b>Number of items</b> (between 1 and 30):
    <input type="number" name="numbItem" min="1" max="30" id="numbItem"> &nbsp&nbsp
    <button id='createItem' type="button">Create</button>

    <div id=userForms></div>

</body>
</html>

Answer 4

我会指出一些东西，标记

    <hr>

是放置所需分隔符的html方法。

使用表格时，请尝试使用the，tbody和tfoot，因为它提供了一种直接添加标题而无需触摸页眉或页脚的方式。

对于主要问题，JQuery是强大的，但是如果您是新手，则不了解基础知识会在将来给您带来问题。 因此，这里有很好的JQuery答案，所以这里是一个简单的javascript解决方案

 <html> <body> <p> <h3>Assignment 11</h3> <hr> <form action="" method="post"> <p> <b>Number of items</b> (between 1 and 30): </p> <input type="number" name="numbItems" min="1" max="30" step="1" id="numbItem"> <br> <input name="submit" value="Create" type="button" id="createItem"> </form> <hr> <table> <thead> <tr> <td>Item</td> <td>Value ( R )</td> <td>Taxes ( R )</td> <td>VAT ( % )</td> </tr> </thead> <tbody id="itemsTableBody"></tbody> <tfoot> <tr> <td>Item</td> <td>Value ( R )</td> <td>Taxes ( R )</td> <td>VAT ( % )</td> </tr> </tfoot> </table> <script type="text/javascript"> document.getElementById("createItem").onclick = function() { var price = document.getElementById("numbItem").value; var tbody = document.getElementById("itemsTableBody"); var olds = tbody.childNodes; for (; olds.length > 0;) { tbody.removeChild(olds[0]); } for (var i = 0; i < price; ++i) { var tr = document.createElement("tr"); var td1 = document.createElement("td"); var td2 = document.createElement("td"); var td3 = document.createElement("td"); var td4 = document.createElement("td"); td1.appendChild(document.createTextNode("td1 " + i)); td2.appendChild(document.createTextNode("td2 " + i)); td3.appendChild(document.createTextNode("td3 " + i)); td4.appendChild(document.createTextNode("td4 " + i)); tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tr.appendChild(td4); tbody.appendChild(tr); } }; </script> </body> </html>