如何使用javascript动态添加html元素并在php中保留它们的记录

我有一个输入框，用户在其中指定要动态添加的新

DIV

元素的数量，这个请求然后通过ajax发送到php，在那里它准备了一个html

DIV

，其中包含一些内部的

input

标记，每个

DIV

都有唯一的

id

属性，使用用户提供的数字以增量方式生成，并发送回JS，现在JS在现有的

表单中追加这个新的html

我还为每个新的

DIV

提供了一个删除按钮，用户可以通过该按钮删除任何动态添加的

DIV

用户可以随时添加和删除元素，所以我不想使用数据库记录添加或删除了多少元素。
现在我需要一些解决方案，在那里我可以创建和分配唯一的

id

到

div

，并且在那里保留一些记录，以便在提交表单时，我可以循环通过这些记录，从那些

div

中获取用户提交的数据

第一个HTML代码：

<tr><td>No. Of Hotel</td><td><input type="text" id="noofhotel" name="noofhotel">
<input class="btn green" type="button" value="Submit" onclick="get_multiple_hotel_div()"></td></tr>

删除div的第四个JS代码

function remove_div(div_id){
$("#"+div_id).remove();}

在此处检查解决方案：

HTML：您需要从用户那里获得请求的div的数量，并将它们放在一个容器中，并记住表单中的div列表。因此，您需要一个输入字段、一个按钮、一个容器和一个隐藏字段

<input name="nr_divs" type="text" maxlength="2" />
<button id="b-new-div">+</button>
<form>
<div id="container"></div>
<input type="hidden" id="div_id_list" name="div_id_list" value="" />
</form>

因此，在没有Ajax/PHP的情况下，您可以根据需要多次更新div。您还可以获得新div的唯一id。最后，隐藏的输入字段中有一个div列表，它以表单的形式传递

另外，您也可以在本地处理表单，然后通过Ajax将最终产品发送到PHP

旧答案：

您可以将所有ID存储在一个数组中。然后在删除或添加div时更新数组。当您发送表单时，您也可以简单地传递数组，这样服务器就可以从数组中读取ID，然后检查输入。（您可以在Ajax请求中发送数组，也可以将其放入表单中的隐藏输入中）

（我还想问，如果没有ajax和php，在本地创建de div是否会更容易。似乎有很多向后和向前的请求。）

---

注：如果客户反复要求更多的div，会发生什么？表单中是否有唯一的ID？因为PHP文件似乎总是会生成从1开始到酒店编号的id。

正如您提到的id从1开始的问题，这也是我需要解决的问题，这就是为什么我想要一些解决方案，可以从前面的编号开始，然后继续。另外，我如何将数组存储在隐藏的输入字段中？？您肯定需要在本地生成和存储ID。您可以在表单的底部放置一个隐藏的输入（），每当添加或删除div时，js都可以更新该输入。对不起，只有明天我才能教你怎么做。但是你应该自己试试。我改变了答案。检查演示中的解决方案。它应该会起作用。

function remove_div(div_id){
$("#"+div_id).remove();}

<input name="nr_divs" type="text" maxlength="2" />
<button id="b-new-div">+</button>
<form>
<div id="container"></div>
<input type="hidden" id="div_id_list" name="div_id_list" value="" />
</form>

var nr_div=0; // the counter
var div_list=[]; // the storage

function updateDivList(id, action) {

    /* 
    id = the div id
    action= add or remove a div from the list
    */

    if (action>0) { // add new div in the list
        div_list.push(id);
    } else { // remove a div from the list
        var temp=[];
        for (var i=0; i<div_list.length; i++) {
            if (div_list[i]!=id) {
                temp.push(div_list[i]);
            }
        }
        div_list=temp;
    }
    // Put the div list in the hidden field, inside the form
    $("#div_id_list").val(div_list.join(","));
}

function newDiv(container, div_query) {

    /*
    container = where does the new div go?
    div_query = how many divs?
    */

    var html="<div div-id=\""+nr_div+"\" >";
    html+="<button class=\"b-remove\" type=\"button\">remove</button>";
    html+="/* Your HTML code goes here*/";
    html+="</div>";

    $(container).append(html); // the div appears in the container

    updateDivList(nr_div,1); // add the new div in the list

    nr_div++; // increase the counter

    if (div_query-1 > 0) { // if more divs are needed, recall function
        newDiv(container, div_query-1);
    } else { // add remove div action to the inside button
        $(".b-remove").click(function(){ 
            updateDivList($(this).parent().attr("div-id"),-1);
            $(this).parent().remove();
        });
    }

}

$("#b-new-div").click(function(){
            var nr=$("input[name='nr_divs']").val();
            if (nr.length>0 && !isNaN(nr)) {
                newDiv("#container",nr);
            }
            $("input[name='nr_divs']").val("");
});