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

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

希望能帮到你。

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

Dynamic form field adding clears the input for all fields

javascript

jquery

flatpickr