HTML Неограниченная иерархия ввода для формы - PullRequest
Новая
       0

HTML Неограниченная иерархия ввода для формы

0 голосов
/ 07 июня 2018

Я хочу добавить форму для добавления новых категорий.Категории могут иметь инфинитивные подкатегории. 

$(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>

Теперь у меня есть форма, подобная this , и когда я нажимаю «добавить подкатегорию», она должна появиться новая »подкатегория«ввод с помощью кнопок:« добавить под-подкатегорию »и« удалить »

Это должно быть похоже на это , глубина категорий бесконечна

1 Ответ

0 голосов
/ 07 июня 2018

Лабас!

Вы можете попробовать что-то вроде этого: 

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>

Fiddle: http://jsfiddle.net/7L382gow/

Обновленоfiddle для поддержки объекта структуры при манипулировании DOM.

Submit выведет итоговую иерархию на консоль.

http://jsfiddle.net/bqk6pmjg/

...