Динамическое добавление полей формы очищает ввод для всех полей - PullRequest
Новая
       13

Динамическое добавление полей формы очищает ввод для всех полей

0 голосов
/ 18 мая 2018

Я создал форму, к которой вы можете динамически добавлять и удалять поля.Я так близок к тому, чтобы заставить его работать, но по какой-то причине я могу заполнить первые поля, добавить новое поле, и данные первого поля останутся.Затем, когда я добавлю второе поле, заполните его и добавлю еще одно, оно очистит все существующие данные.

Я могу сказать, что календарь flatpickr всегда находится в первом поле, но затем, когда я добавляю последующееВ полях календарь flatpickr применяется только к последнему полю и фактически не отображается между ними.Мне действительно нужна помощь, так как я потратил так много времени, пытаясь понять это :(

Я считаю, что это проблема с моим JS и как он получает последний элемент, а не как он вызывает flatpickrбиблиотека.

Вот весь мой код в JSFiddle: https://jsfiddle.net/danboy4/w9s9ayep/

Спасибо!

1 Ответ

0 голосов
/ 18 мая 2018

Вы были правы, предполагая, что ошибка была обнаружена при получении последнего элемента.У вас был следующий код: 

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

Надеюсь, я смогу вам помочь.

...