Question

我创建了一个表单，您可以动态添加和删除字段。我非常接近它的工作，但由于某种原因，我可以填写第一个字段，添加一个新字段，第一个字段数据仍然存在。然后，当我添加第二个字段，填写并添加另一个字段时，它将清除所有现有数据。

我可以告诉flatpickr日历始终位于第一个字段，但是当我添加后续字段时，flatpickr日历仅适用于最后一个字段，并且实际上不会显示任何字段之间。我真的需要一些帮助，因为我花了很长时间才想弄明白:(

我认为这是我的JS的问题以及它如何获取最后一个元素，而不是它如何调用flatpickr库。

以下是我在JSFiddle中的所有代码： https://jsfiddle.net/danboy4/w9s9ayep/

谢谢！

Answer 1

您认为错误位于最后一个元素的位置是正确的。您有以下代码：

var html = $(".copy-fields").html();
$(".after-add-more").after(html);

var lastInput = $(".control-group").closest(".start").prevObject 
var lastInput2 = lastInput[lastInput.length-2].getElementsByClassName("start")[0];

这会在第一个输入框之后直接添加新复制的字段，但是当您从数组中获取要使用flatpickr的元素时，您将使用lastInput.length-2。此索引始终是最后一个可见框的索引。问题是您新添加的框不是最后一个可见框，而实际上是第二个框（因为它是在第一个输入框后直接添加的）。因此它会覆盖以前的值。

因此，如果您只是将var lastInput2 = lastInput[lastInput.length-2].getElementsByClassName("start")[0];更改为var lastInput2 = lastInput[1].getElementsByClassName("start")[0];，那么它将按原样运行。

或者，您可以保留var lastInput2 = lastInput[lastInput.length-2].getElementsByClassName("start")[0];，而不是更改新元素的放置位置。要始终将其放在最后，您可以执行类似$("#button").before(html);

的操作希望我能帮助你。

动态表单字段添加会清除所有字段的输入

1 个答案: