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

Question

我有一个输入框，用户可以在其中指定要动态添加的新 DIV 元素的数量，该请求将通过 ajax 发送到 php，并在其中准备一个 html DIV > 使用一些内部 input 标签，每个 DIV 具有使用用户提供的数字以增量方式生成的唯一 id 属性，并将其发送回 JS，现在 JS 将这个新的 html 附加到现有的 form 中。
我还为每个新的 DIV 提供了一个删除按钮，用户可以通过该按钮删除任何动态添加的 DIV。
用户可以随时添加和删除元素。很多时候，我不想使用数据库来重新编码添加或删除的元素数量。
现在我需要一些解决方案，我可以在其中创建和分配唯一的 ids 到 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>

第二个 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);  } }); }

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

第四个 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:您需要在本地创建 div(函数 1)，然后跟踪它们的 id(函数 2)。您还需要两个全局变量:一个用于递增 div 的 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 列表，该列表在表单中传递。

诗。您也可以只在本地处理表单，然后通过 Ajax 将最终结果发送到 PHP。

旧答案:

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

(我还想问，如果没有ajax和php，在本地创建de div不是更容易吗？似乎有很多来回请求。)

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