表单的HTML无限制层次结构输入 [英] html Unlimited hierarchy input to form

问题描述

我要添加用于添加新类别的表单。类别可以有不定子类别。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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

                                <input type="submit" name="submit1" value="Add Sub-Sub-Category" class="add_field_button" >

                                <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的表单，当我按下"添加子子类别"时，它应该会出现新的"子子类别"输入："添加子-子子类别"和"删除"

应该像this，类别的深度是不定式

推荐答案

Labas！

您可以尝试这样的操作：

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时维护结构对象。

提交会将生成的层次结构打印到控制台。

http://jsfiddle.net/bqk6pmjg/

这篇关于表单的HTML无限制层次结构输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！