如何使用 javascript 动态添加 html 元素并将其记录保存在 php 中

Question

我有一个输入框，用户可以在其中指定要动态添加的新 DIV 元素的数量，此请求将通过 ajax 发送到 php 并准备一个 html DIV 带有一些内部 input 标签，每个 DIV 具有唯一的 id 属性，使用用户提供的数字以增量方式生成并发送回 JS，现在JS 将这个新的 html 添加到现有的 form.
我还为每个新 DIV 提供了一个删除按钮，用户可以通过该按钮删除任何动态添加的 DIV.
用户可以继续添加和删除任何元素。有时我不想使用数据库来重新编码添加或删除了多少元素。
现在我需要一些解决方案，我可以创建并分配唯一的 ids 到 div 并且还在那里记录一些地方，以便在提交表单时我可以遍历这些记录并从中获取用户提交的数据DIVs。

第一个 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>

第二个 JS 代码

function get_multiple_hotel_div(){
var hotel_no = $("#noofhotel").val();

input_form_data = {
    hotel_no : hotel_no
}

$.ajax({
        type : "POST", //TODO: Must be changed to POST
        data : input_form_data,
        url: 'index.php?/process_transcation/get_multiple_hotel_div',
        beforeSend : function(){
            $('#loading_div').html("<img src='public/images/loading_red.gif' style='margin-left:50%; margin-top:5%;'>");
        },
        success : function(data_response){
            $('#loading_div').empty();
            data_response = $.parseJSON(data_response);
            $('#multi_hotel_table').append(data_response.div_form);  } }); }

第 3 PHP 代码生成 DIV

function get_multiple_hotel_div($hotel_no){

    for($i=1;$i<=$hotel_no;$i++){
    $hotelinput_form.="<div class='subtask_input_form_div multi_hotel_div' id='hoteldiv_".$i."'><p class='basic_eq_div_p'>Hotel Entry&nbsp&nbsp&nbsp&nbsp&nbsp<input type='button' id='remove' name='remove' value='Remove' class='btn green' onclick='remove_div(\"hoteldiv_$i\")'></p>
                        <table>
                        <tbody>
                        <tr>
                        <td style='display:none;'><input type='hidden' id='hotelid_".$i."' name='mhotelno[]'></td>
                        </tr>                   
                        <tr>
                        <td class='headtd'>Hotel Name</td>
                        <td class='headtd'><input type='text' id='mhotelname_".$i."' class='mhotel' name='mhotelname_".$i."' style='width:90% !important;' onkeyup='search_dropdown_data(this.value,this.id,\"hotel_table_$i\",\"mhotelid_$i\",\"$supplier_master_table\")'><div class='dropdown_div'><table id='hotel_table_".$i."' class='dropdown_table'></table></div></td>
                        <input type='hidden' id='mhotelid_".$i."' name='mhotelid_".$i."' class='mhotel'>
                        <td class='headtd'>Destination </td>
                        <td class='headtd'><input type='text' id='mdestination_".$i."' class='mdestination' name='mdestination_".$i."' style='width:90% !important;' onkeyup='search_dropdown_data(this.value,this.id,\"rt_to_table_$i\",\"mdestinationid_$i\",\"$destination_master_table\")'><div class='dropdown_div'><table id='rt_to_table_".$i."' class='dropdown_table'></table></div></td>
                        <input type='hidden' id='mdestinationid_".$i."' name='mdestinationid_".$i."' class='mdestination'>
                        </tr></tbody>
                        </table>
                        </div>";
    }// End of for loop     

    $response_array = array("div_form"=>$hotelinput_form);  
    return json_encode($response_array);                                    

}//end of function

要删除的第 4 个 JS 代码 div

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

Answer 1

在这里查看解决方案：DEMO

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>

jQuery：您需要在本地创建 divs（函数 1），然后跟踪它们的 ID（函数 2）。您还需要两个全局变量：一个用于递增 divs 的 ID（一个计数器），另一个用于存储所有可用的 ID（一个数组）。

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();
        });
    }

}

为根据用户输入生成 div 的按钮创建操作：

$("#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("");
});

因此，您可以根据需要多次更新 div，而无需 Ajax/PHP。您还可以获得新 div 的唯一 ID。最后，您在隐藏的输入字段中有 div 列表，它在表单中传递。

Ps。您也可以只在本地处理表格，然后通过 Ajax.

将最终产品发送到 PHP

旧答案：

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

(我也想问，如果没有ajax和php，在本地创建de div是不是更容易一些。好像后面有很多- 并转发请求。）

Ps。如果客户反复要求更多 div 会怎样？表格中会有唯一的ID吗？因为似乎 PHP 文件总是会生成从 1 到酒店号的 id。

如何使用 javascript 动态添加 html 元素并将其记录保存在 php 中

How to dynamically add html elements using javascript and also keep their record in php

html

javascript

php

jquery

dynamic