Как сделать эту многоточечную форму массивом
У меня есть многоточечная форма на этой скрипке: Вот ссылка! . в этой форме можно добавить мультидроп только 3 раза, я хочу всегда добавлять этот мультидроп, и как сохранить данные массива в sql
<div id = "Yes1">
<label for = "name" >Name</label>
<input type = "text" id = "name1" name = "name1">
<br><br>
<label for = "multiDrop" >Multi Drop</label>
<select name = "multiDrop1" id = "multiDrop1">
<option value = ""></option>
<option value = "Y">YES</option>
<option value = "N">NO</option>
</select>
<br><br>
</div>
Ваш вопрос не ясен.
@NegiRox я могу добавить только 3 многоточечных, я хочу добавить, может быть, 10 многоточечных, но сделать этот код более простым, чем я создаю один и тот же код до 10 раз.
Используйте классы вместо идентификаторов, чтобы помечать/находить ваши элементы, и используйте делегация мероприятия, чтобы упростить назначение обработчиков событий.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я бы рекомендовал использовать следующий подход:
- получить повторяющийся блок HTML в переменную;
- прослушивать изменения раскрывающегося списка (используя делегирование событий, выбирая по
class, а не поid); - изменить необходимые атрибуты (имена, идентификаторы и т. д.) на основе глобального счетчика, чтобы различать эти динамические блоки;
const block = `
<div class = "block">
<div class = "yes">
<label>Name</label>
<input type = "text" class = "name"></input>
<label>Multi Drop</label>
<select class = "multiDrop">
<option value = ""></option>
<option value = "Y">YES</option>
<option value = "N">NO</option>
</select>
</div>
</div>
`;
const addAnotherBlock = () => {
$('#wrapper').append(block);
$('.name:last').attr('name',i++);
};
var i = 0;
$(document).ready(() => addAnotherBlock());
$('#wrapper').on('change', '.multiDrop', function(){
if ($(this).val() == 'Y') addAnotherBlock();
else if ($(this).val() == 'N' && $('.block').length > 1 && !$(this).closest('.block').is('.block:last')){
$(this).closest('.block').remove();
}
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "wrapper"></div>как удалить мультидроп, если я выберу нет?
это то, что ты имеешь в виду?
Проверьте @Orocduded. Он удаляет только последний элемент. Попробуйте ввести имя в 5-е поле ввода из 10 полей ввода. и попытайтесь удалить это 5-е поле ввода, выбрав Нет. Даже если вы попытаетесь удалить этот 5-й блок, он удалит последний блок.
Тем не менее, если нам нравится ловить ошибки вместе, ваше решение позволяет удалить все динамические блоки вплоть до пустой страницы; кроме того, он делает ненужное клонирование содержимого поля ввода, которое пользователю, скорее всего, потребуется отредактировать, и, если в последнем раскрывающемся списке выбрано «НЕТ», вы не можете продолжить добавление блоков до отмены выбора/выбора предыдущего ' ДА'.
Отметьте здесь, чтобы добавлять и удалять элементы в соответствии с вашими требованиями.
Вы можете удалить только тот блок, для которого вы выбрали Нет.
$(document).ready(function() {
$(document).on("change", ".multidrop", function() {
if ($(this).val() == 'Y') {
$clone = $(this).closest(".Yes").clone();
var num = parseInt($(".Yes:last").attr("data-index")) + 1;
$clone.attr("data-index", num);
$clone.attr("id", $clone.attr("id").replace(/\d+/, num));
$clone.find("input,select").each(function() {
var name = ($(this).attr("name")).replace(/\d+/, num);
var id = ($(this).attr("id")).replace(/\d+/, num);
$(this).attr("name", name);
$(this).attr("id", id);
});
$clone.insertAfter(".Yes:last"); //Add field html
} else if ($(this).val() == "N" && $(".Yes").length > 1) {
$(this).closest(".Yes").remove();
}
});
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "Yes1" class = "Yes" data-index = "1">
<label for = "name">Name</label>
<input type = "text" id = "name1" name = "name1" class = "name">
<label for = "multiDrop">Multi Drop</label>
<select name = "multiDrop1" id = "multiDrop1" class = "multidrop">
<option value = "">Select Option</option>
<option value = "Y">YES</option>
<option value = "N">NO</option>
</select>
<br><br>
</div>
каково ваше требование?