html dynamic name with php

Question

I try to make dynamic add/remove table with jquery. The problem of how I can pass value from the table to PHP because the HTML name dynamically generated by jquery. I know it can solve by making php loop but I don't know what kind of loop. Sorry for my messy code cause I'm still new in this kind.

html page

<div class="row setup-content" id="step-2">
<div class="container">
  <div class="row clearfix">
     <div class="col-md-10 table-responsive">
        <table class="table table-bordered table-hover table-sortable" id="tab_logic">
           <thead>
              <tr >
                 <th class="text-center">
                    Ticket Type
                 </th>
                 <th class="text-center">
                    Price(RM)
                 </th>
                 <th class="text-center">
                    Quantity
                 </th>
                 <th class="text-center">
                    Setting
                 </th>
                 <!-- <th class="text-center" style="border-top: 1px solid #ffffff; border-right: 1px solid #ffffff;"> -->
                 <!-- </th> -->
              </tr>
           </thead>
           <tbody>
              <tr id="paid0" data-id="0" class="hidden">
                 <div class="form-group">
                    <td data-name="paid_ticket_name">
                       <input type="text" name="paid_ticket_name0"  placeholder="e.g General Admission, VIP, etc" class="form-control"/>
                    </td>
                    <div class="col-md-6">
                       <td data-name="paid_ticket_price">
                          <input type="number" name="paid_ticket_price0" class="form-control"/>
                       </td>
                       <td data-name="paid_ticket_quantity">
                          <input name="paid_ticket_quantity0" placeholder="100" class="form-control"/>
                       </td>
                    </div>
                    <td data-name="paid_del">
                       <button name="paid-del0" class="btn btn-danger glyphicon glyphicon-remove row-remove"></button>
                    </td>
                 </div>
              </tr>
           </tbody>
        </table>
        <table class="table table-bordered table-hover table-sortable" id="tab_logic1">
           <tbody>
              <tr id="free0" data-id="0" class="hidden">
                 <div class="form-group">
                    <td data-name="free_ticket_name">
                       <input type="text" name="free_ticket_name0"  placeholder="e.g General Admission, VIP, etc" class="form-control"/>
                    </td>
                    <div class="col-md-6">
                       <td data-name="free_ticket_price">
                          <input type="text" value="FREE" placeholder="FREE" name="free_ticket_price0" disabled="" class="form-control"/>
                       </td>
                       <td data-name="free_ticket_quantity">
                          <input name="free_ticket_quantity0" placeholder="100" class="form-control"/>
                       </td>
                    </div>
                    <td data-name="paid_del">
                       <button name="paid-del0" class="btn btn-danger glyphicon glyphicon-remove row-remove"></button>
                    </td>
                 </div>
              </tr>
           </tbody>
        </table>
        <div class="col-md-12 btn-toolbar">
           <a id="add_row_paid" class="btn btn-primary pull-right">Paid Ticket</a>
           <a id="add_row_free" class="btn btn-primary pull-right">Free Ticket</a>
        </div>
     </div>
  </div>

javascript code

$(document).ready(function() {
$("#add_row_paid").on("click", function() {
    // Dynamic Rows Code

    // Get max row id and set new id
    var newid = 0;
    $.each($("#tab_logic tr"), function() {
        if (parseInt($(this).data("id")) > newid) {
            newid = parseInt($(this).data("id"));
        }
    });
    newid++;

    var tr = $("<tr></tr>", {
        id: "paid"+newid,
        "data-id": newid
    });

    // loop through each td and create new elements with name of newid
        $.each($("#tab_logic tbody tr:nth(0) td"), function() {
        var cur_td = $(this);

        var children = cur_td.children();

        // add new td and element if it has a nane
        if ($(this).data("name") != undefined) {
            var td = $("<td></td>", {
                "data-name": $(cur_td).data("name")
            });

            var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
            c.attr("name", $(cur_td).data("name") + newid);
            c.appendTo($(td));
            td.appendTo($(tr));
        } else {
            var td = $("<td></td>", {
                'text': $('#tab_logic tr').length
            }).appendTo($(tr));
        }
    });

    // add delete button and td
    /*
    $("<td></td>").append(
        $("<button class='btn btn-danger glyphicon glyphicon-remove row-remove'></button>")
            .click(function() {
                $(this).closest("tr").remove();
            })
    ).appendTo($(tr));
    */

    // add the new row
    $(tr).appendTo($('#tab_logic'));

    $(tr).find("td button.row-remove").on("click", function() {
       $(this).closest("tr").remove();
   });
});

score 0 · Accepted Answer · answered Nov 10 '18 at 10:08

You could add a hidden form element to the page, such as

<input type="hidden" name="row_count" value="0">

and each time the button add_row_paid is clicked (in your Javascript code above) you could update the value of this hidden input field:

$("input[name='row_count']").val(newid);

So when the form is submitted, in addition to each of the rows in the table, you will also have a field containing the ID of the latest row in the table. This can then be used to loop over each ID (row) in the table, for example:

foreach (range(0, $_POST['row_count']) as $id) {
    // code to run for each row here, accessing cells using format such as $_POST["paid_ticket_quantity$id"]
}

Alternativey, you could restructure your form elements to be in an array form, such as in the answer at POST an array from an HTML form without javascript - this way you would be able to loop through each row of the table without the need of an additional counter field to store the number of rows.

html dynamic name with php

1 Answers1