Question

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

我尝试了以下代码，花了一个多小时在网上搜索，无法解决问题。

我首先使用PHP来做这件事，我一直困扰着，论坛上的人建议我使用Javascript。

我现在很困惑!!请给我一个线索！

＆＃13;

<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="E.g.: Gross Salary" />&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" name="value1" placeholder="E.g.: 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="E.g.: Gross Salary" />&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" name="value1" placeholder="E.g.: 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="E.g.: Electricity" />&nbsp&nbsp&nbsp&nbsp&nbsp<input type="text" name="value2" placeholder="E.g.: 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 } ?>

＆＃13;

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

这会对你有所帮助。祝你好运

＆＃13;

$(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>');
   }
   });
});

＆＃13;

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

＆＃13;

Answer 3

检查以下代码。我使用Jquery来做这件事。如果你使用javascript轻松一点，你就能理解它。希望，它可以帮助您了解如何在Javascript中处理这种情况。

<!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方式。

当使用表时，尝试使用thead，tbody和tfoot，因为它提供了一种直接的方式来添加元素以及触摸页眉或页脚。

至于主要问题，JQuery是强大的，但如果你是一个新手，不知道基础知识将来会给你带来问题。因为这里有很好的JQuery答案，这里是一个简单的JavaScript解决方案

＆＃13;

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

＆＃13;

如何动态创建表单元素

4 个答案: