Html Неограниченный ввод иерархии для формирования
Я хочу добавить форму для добавления новых категорий. Категории могут иметь бесконечные подкатегории.
$(document).ready(function () {
var max_fields = 15; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function (e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div class = "input_fields_wrap_sec"><input type = "text" name = "mytext[]" placeholder = "Sub-Category title"/>\n\
<input type = "submit" name = "submit1" value = "Add Sub-Sub-Category" class = "add_field_button" >\n\
<a href = "#" class = "remove_field">Remove</a></div>'
); //add input box
}
});
$(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action = "" method = "POST">
<div class = "input_fields_wrap">
<p>Please enter the Category Title</p>
<input type = "text" name = "mytext[]" placeholder = "Category title">
<input type = "submit" name = "submit1" value = "Add Sub-Category" class = "add_field_button" >
</div>
<input type = "submit" name = "submit" value = "submit">
</form>Теперь у меня есть такая форма, как это, и когда я нажимаю «добавить подкатегорию», должен появиться новый ввод «подкатегория» с кнопками: «добавить подкатегорию» и «удалить»
Должно быть как это, глубина категорий бесконечна
Я попытался добавить поле и кнопки «подкатегории», и эта подкатегория могла иметь свои собственные подкатегории. Но когда я пытаюсь нажать кнопку добавления подкатегории, страница перезагружается. Я не знаю, как мне написать в js, чтобы создать категорию, которая может иметь свою подкатегорию, у которой могут быть свои собственные подкатегории и т. д.
Проблема в том, что когда вы вызываете $(add_button).click, вы присоединяете слушателя к существующие кнопки. Затем вы создаете несколько новых кнопок, но к ним не прикреплен этот слушатель;) Итак, когда вы нажимаете на них, они отправляют вашу форму, и это перезагружает страницу! На вашем месте я бы использовал type=button для своих кнопок и onclick = "addSubCategory()", где addSubCatogery был бы вашим слушателем;) Надеюсь, это поможет!
вместо submit используйте button
Я думаю, что последняя кнопка должна иметь тип submit, а внутренние - нет. Тогда preventDefault также будет ненужным.
Ачиу! Спасибо, что приняли мой ответ. Пожалуйста, проверьте мою новую улучшенную скрипку на предмет улучшенной функциональности - предполагая, что вы, возможно, захотите отправить иерархию на сервер или что-то подобное.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Лабас!
Вы можете попробовать что-то вроде этого:
function getValueText(level) {
let i = 0
let text = "Add ";
while (i < level) {
text += "sub-"
i++;
}
return text + "category";
}
function appendInnerCategory(level, element) {
var myDiv = document.createElement("div");
myDiv.className = "level-" + level
var btn = document.createElement("input");
btn.type = "button";
btn.value = getValueText(level);
btn.addEventListener("click", function(event) {
appendInnerCategory(level + 1, event.target.parentNode);
});
var textBox = document.createElement("input");
textBox.type = "text";
myDiv.appendChild(textBox);
myDiv.appendChild(btn);
element.appendChild(myDiv);
}
appendInnerCategory(0, document.querySelector('.wrapper'));
HTML:
<div class = "wrapper"></div>
Рабочий пример: http://jsfiddle.net/7L382gow/
Обновлен скрипт для поддержки объекта структуры при манипулировании DOM.
Submit выведет полученную иерархию на консоль.
Это совершенно потрясающе. Обратите внимание, я получаю консольную ошибку из кода скрипки. Он утверждает, что не может загрузить jsfiddle.net/js/createStream.js.map. Хотя на выходе я получаю правильно сформированный объект json.
Я проработал проблемы до такой степени, что консоль как в jsfiddle, так и в консоли в моем экземпляре django выдает именно то, что я хочу, но форма никогда не отправляет результаты. У меня есть проверка работоспособности в моей функции form_valid, которая должна выводить простую строку в консоль, когда вы нажимаете кнопку «Отправить», но ничего не выходит и ошибок нет ... Что еще мне нужно для отправки данных на сервер? Вот мой мод / форк jsfiddle вашего кода (проверка концепции перед переходом на django) ... jsfiddle.net/hepcat72/d42k38j1/18
что ты уже испробовал? Вы зациклились на чем-то конкретном?