Question

如何创建一个表单，在单击按钮时添加包含多个输入字段（php + html）的行

我的行包含1个选择选项和3个输入框。

<tr>
   <td>
      <select name="itemname[]" id="itemname" class="form-control" tabindex="1">
         ;
         <option value="">Select item</option>
         <?php
            $sql_item = "SELECT id, item
                        FROM food_exchange_list
                        ORDER by item ASC";
            $result_item = mysqli_query($con, $sql_item);
            if($result_item && $myrow_item = mysqli_fetch_array($result_item))
            {
                do
                {
                    $item_id = $myrow_item["id"];
                    $item_name = $myrow_item["item"];
            ?>
         <option value="<?php echo $item_id;?>"><?php echo $item_name; ?></option>
         <?php
            }
            while($myrow_item = mysqli_fetch_array($result_item));
            }
            ?>
      </select>
   </td>
   <td><input type="number" class="form-control" min="0" max="100" id="exchange" name="exchange[]" required="required" tabindex="3" onchange="compute_protien(this.value)" style="width: 80px;"></td>
   <td>60</td>
   <td>2</td>
   <td>60</td>
   <td>2</td>
</tr>

这是一行的代码。我想在点击添加行按钮时添加类似的行，当有人从选择框中选择一个值并使用php将其提供到同一行时，我想从数据库中获取值。

Answer 1

（我认为基于你的标签，jQuery是可以的）

您可以使用append将html元素添加到jQuery对象。例如，您可以使用$('<a>')为<a></a>标记创建html对象。

以下代码：

var table = $('table#myTable'); // find the table you want to append to
var newRow = $('<tr>');    // creates a new row
newRow.append($('<td>'));  // creates and appends an empty table data element
table.append(newRow);      // appends the row to your table

执行向表中添加更多行的基础知识。当然，您还想添加类，名称，文本等。

现在，要获得<select>标记的所有选项，您有两种选择：

如果您有预定数量的选项，则可以离线执行
否则向您的服务器发送请求

第一种解决方案显然是更快的解决方案。您可以使用PHP将隐藏数据添加到您的html中。通过向您的表中添加data - 元素（例如），只需要最少的信息，复制现有行（如果您将始终至少有一行），或者您可以构建一个额外的行，但是使用display: none;隐藏它。

注意：如果这是在表单中，请确保它不会被发送，或者至少会被服务器忽略。最简单的方法是将这些元素添加到表单之外。但是我强烈建议在这种情况下使用data或“复制”选项。

如果您想在添加新行时实时获取数据，可以使用$.get()来实现。然后让服务器回答所需的数据。

对于您的示例，您将发送所有项目的get-request。这看起来像这样：

$.get("server_link_to_get_data.php", function(data, status) {
  /* this is the callback; you should probably build your entire row here */
  $('select#whatever').append($('<option value="' + data + '">'));
}

（很明显，代码并没有完全符合你的要求，因为你会想要返回一个id和item-names数组，但是它的工作方式几乎相同）

然后，您当然还需要让服务器用正确的数据回答get-request。这显然取决于您对服务器进行编程的方式。（我看到你没有使用MVC模型或类似的，我强烈推荐）

执行此请求可能是最干净的选项，因为它不会污染您的HTML，但是，您还需要向用户说明您当前正在处理以避免愤怒点击。（F.你可以在发送请求之前禁用按钮并在回调中重新启用它）

总结：如果你总是保证至少有一行，我只需要复制它的<option>部分，因为它可以创建一个干净的JS，而且不需要复杂化任何东西。你也只需要在php中构建你的html，如果你改变了什么就不要更新你的JS。

但是，如果没有，那么我可能只是发送一个GET请求并从那里构建行。

如何创建一个表单，该表单将添加一个包含多个输入字段的行，只需单击一个按钮即可

1 个答案: