Question

我想组织我的DOM HTML元素，使它们看起来像这样：

ADD AUTHOR (Button) // adds a whole new author
(textbox for field) //New Author
ADD BOOK (Button)   // adds new textfields under this author
(textbox for field)
(textbox for field)
(textbox for field)
//I want to be able to add more books here with DOM if it's from the same author

(textbox for field) //New Author
ADD BOOK (Button)   // adds new textfields under this author
(textbox for field)
(textbox for field)
//I want to be able to add more books here with DOM if it's from the same author

但它的作用是：

ADD AUTHOR (Button)
(textbox for field)
ADD BOOK (Button)
(textbox for field)
(textbox for field)
(textbox for field)//this can be a new author or a authors' book
(textbox for field)
(textbox for field)
(textbox for field) // there is no structure

我正在尝试通过邮件将此代码发送到另一个.php，以便我可以插入到我的数据库中。这是否意味着帖子将是一个数组的数组。那么我会把它作为post ['myBooksText ['0']']来阅读吗？

这是我到目前为止的代码：

<form action="insertIntoDB.php" method="post">
 <div class="input_fields_wrap">
     <button class="add_field_button">Add Author</button>
     <div><input type="text" name="myAuthorText[]"></div>
     <button class="add_sub_field_button">Add Author Books</button>
     <div><input type="text" name="myBooksText[]"></div>
 </div>
</form>
 <SCRIPT language="javascript">

    $(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
    var add_subButton      = $(".add_sub_field_button"); //Add sub 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><input type="text" name="myAuthorText[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(add_subButton).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><input type="text" name="myBooksText[]"/><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>

如何组织DOM HTML元素

0 个答案: