Создать повторяющийся раздел формы, удалить значения полей
У меня есть форма с повторяющимся разделом. Чтобы создать повторяющийся раздел, я использую небольшой вариант этого кода:
// Add a new repeating section
var attrs = ['for', 'id', 'name'];
function resetAttributeNames(section) {
var tags = section.find('input, label'), idx = section.index();
tags.each(function() {
var $this = $(this);
$.each(attrs, function(i, attr) {
var attr_val = $this.attr(attr);
if (attr_val) {
$this.attr(attr, attr_val.replace(/_\d+$/, '_'+(idx + 1)))
}
})
})
}
$('.addFight').click(function(e){
e.preventDefault();
var lastRepeatingGroup = $('.repeatingSection').last();
var cloned = lastRepeatingGroup.clone(true)
cloned.insertAfter(lastRepeatingGroup);
resetAttributeNames(cloned)
});
// Delete a repeating section
$('.deleteFight').click(function(e){
e.preventDefault();
var current_fight = $(this).parent('div');
var other_fights = current_fight.siblings('.repeatingSection');
if (other_fights.length === 0) {
alert("You should atleast have one fight");
return;
}
current_fight.slideUp('slow', function() {
current_fight.remove();
// reset fight indexes
other_fights.each(function() {
resetAttributeNames($(this));
})
})
});
JSFiddle of it - http://jsfiddle.net/Unfxn/27/
Первоначально я нашел код из этой темы: повторение div с полями формы
Однако существует проблема с этим кодом: если вы заполните поля формы и нажмете "добавить бой", новый повторяющийся раздел не только дублирует поля формы, но и их значения. Я думаю, что мне нужно использовать что-то вроде этого, чтобы очистить значения нового раздела формы:
$(this).closest('form').find("input[type=text], textarea").val("");
но я не уверен, как включить это в функции, которые у меня уже есть. Итак, как я могу очистить значение полей после создания нового раздела формы?
1 ответ
Вы можете удалить все значения из всех полей ввода в вашем новом клонировании:
cloned.find("input").val("");
РЕДАКТИРОВАТЬ:
Для сброса группы радиостанций вы можете установить их проверенное значение на false:
cloned.find("input:radio").attr("checked", false);