Question

我有一个表单，您可以动态添加和删除字段（这是使用javascript完成的）。用户可以创建销售并将产品添加到销售中，保存信息并在需要时进行编辑。每个产品都有几个字段，如id（隐藏），名称，折扣......，在表单中您可以添加和删除产品。因为可以动态添加和删除字段，所以我遇到了一个问题，即如果用户正在编辑表单并删除现有产品，我如何获取已删除的产品的ID以便从数据库中删除它们。如何使用表单的其余部分发布此信息？最好的方法是什么？

不过，我正在使用PHP，HTML和JavaScript。

Answer 1

对于像我这样的动态内容，我通常使用JSON。

使用他们添加，删除，更改等内容的任何内容在javascript中构建json对象，然后发送该对象而不是所有隐藏的输入。

更好的方法是捕获用户正在执行的操作，并通过ajax发送，而不是批量发送。然后，您不必在浏览器中维护表单中已更改的状态。如果用户删除了某个项目，则会拨打一条ajax，说明他们正在删除该项目ID。

Answer 2

有很多＆＃34;它取决于，＆＃34;但我可举一个例子。

我们假设您有一行看起来像这样的字段：

<input name="part-number1" id="part-number1">
<input name="qty1" id="name="qty1">
<button id="delete-button1">Remove this item</button>

如果您愿意，您可以解析按钮的ID并尝试提取行号。然而，这很难并且容易出错。有一种更简单的方法：

删除此项

然后，在您的Javascript中，您可以简单地执行类似这样的操作来附加事件监听器：

// Note the use of event delegation here so we can add and remove rows without
// breaking the listener
$(window).on("button", "[data-row-idx]", function() {
  var id = $(this).getAttribute("data-row-idx");
  // Now you can use the 'id' to remove the elements from the screen
  // Or make an Ajax call.
});

要解决问题，您可以创建该按钮并使用以下命令设置属性：

var $button = $("<button />").setAttribute("data-row-idx", 10);

并根据需要将其附加到您的文档中。

Answer 3

用户如何删除产品？点击可能是button或icon。

如果是这样，应该很容易。

code听取click事件并应用style display:none或删除node; parentNode.removeChild(node)可以轻松获取相应的详细信息，最有可能是与data-attributes关联的node，以便删除。

换句话说，这有点two way data binding。最好的方法是将接口视为JavaScript object并具有1-1映射。当对象被修改时，更新界面，反之亦然。

如何获取已删除的表单字段的ID

3 个答案: