append form rows using JS

Question

Hello I have an HTML form and want to be able to add or delete rows dynamically. ie just by a click on an Icon or a text the entire form row should be duplicated and by clicking on a text or icon the duplicated row should be deleted. I know JavaScript append can solve this but I don't know how to implement it since my my HTML has needed php tags in them. the drop-downs options are getting it values from a db and some other input fields are also getting it's values from a db hence the reason I have PHP tags in there. Below is the attached code. Kindly help me with how I can append the row with the appended form working just like the parent row

<div class="col-xl-8 col-md-12">
        <form>
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><strong class="text-success" style="cursor: pointer;"><?=ucwords($clientName)?></strong> REP'S INFORMATION</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-4 col-md-4">
                            <div class="form-group">
                                <label class="form-label">Reps Name<span class="text-red">*</span></label>
                                <input type="text" name="" class="form-control" required="">
                            </div>
                        </div>
                        <div class="col-sm-4 col-md-4">
                            <div class="form-group">
                                <label class="form-label">E-Mail<span class="text-red">*</span></label>
                                <input type="email" name="" class="form-control" required="">
                            </div>
                        </div>
                        <div class="col-sm-4 col-md-4">
                            <div class="form-group">
                                <label class="form-label">Phone No.<span class="text-red">*</span></label>
                                <input type="text text-dark"  class="form-control" name="client_contact2" required="" id="client_contact2"  onkeypress="return restrictAlphabets(event)" onpaste="return false;" ondrop="return false;" autocomplete="off" required="">
                                <input type="date" name="" value="<?=date("Y-m-d")?>" hidden="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">ADD DEVICE(S) INFORMATION</h3>
                </div>
                <div class="card-body">
                    <?php 
                        if ($clientType === $slaClient) {
                    ?>
                        <table id='dyntbl' class='table border text-nowrap text-md-nowrap table-striped mb-0'>
                            <thead>
                                <tr>
                                    <th class="text-center" >Device Brand</th>
                                    <th class="text-center">Device Model</th>
                                    <th class="text-center">Serial Number</th>
                                    <th class="text-center" style="width:10%">SLA Device</th>
                                    <th><button type="button" class=" btn text-success" data-name='add'><i class="fe fe-plus-circle" data-id='ad' style="font-size:1.6em;"></i></button></th>
                                </tr>
                            </thead>
                            <tbody class="field_wrapper " id="table_body">
                                <tr>
                                    <td>
                                        <select class="form-control form-select brand" data-bs-placeholder="Select" name="brand[]" required="" id="brand" onchange="checkDeviceStatus()">
                                            <?php 
                         $readALL = "SELECT * FROM productbrands WHERE deleted = 0";
                         $displayAll = mysqli_query($conn,$readALL);
                         while($rowFetchAll = mysqli_fetch_array($displayAll)){
                          $brandName = $rowFetchAll['brandName'];
                          $brandid = $rowFetchAll['brandID'];
                        ?>
                                            <option value="<?=$brandid?>"><?=$brandName?></option>
                                        <?php } ?>
                                        </select>
                                    </td>
                                    <td>
                                        <select class="form-control form-select model" data-bs-placeholder="Select" name="model[]" required="" id="model" onchange="checkDeviceStatus()">
                                            <?php 
                       $readALL1 = "SELECT * FROM productmodels WHERE deleted = 0";
                       $displayAll1 = mysqli_query($conn,$readALL1);
                       while($rowFetchAll1 = mysqli_fetch_array($displayAll1)){
                        $modelName = $rowFetchAll1['modelName'];
                        $modelid = $rowFetchAll1['modelID'];
                      ?>
                                            <option value="<?=$modelid?>"><?=$modelName?></option>
                                        <?php } ?>
                                        </select>
                                    </td>
                                    <td><input type="text" name="serialNo" class="form-control serialNo" id="serialNo" onchange="checkDeviceStatus()"></td>
                                    <!-- The input field below is to get value from AJAX -->
                                    <td><input type="text" name="deviceLevel" class="form-control" readonly="" id="deviceLevel"> 
                                        <!-- End of Input field -->
                                        </td>
                                        <input type="text" name="" id="client" value="<?=$clientID?>" hidden="" class="client">
                                    <td><button type="button"  class=" btn text-danger" data-name="del"><i class="fe fe-minus-circle"  style="font-size:1.6em;"></i></button></td>
                                </tr>
                            </tbody>
                        </table>
                    <?php } ?>
                    <?php
                        if ($clientType === $nonSla) {
                    ?>
                        <table  class='table border text-nowrap text-md-nowrap table-striped mb-0'>
                            <thead>
                                <tr>
                                    <th>Product Model Non-SLA</th>
                                    <th>Serial Number Non-SLA</th>
                                    <th>Device Status Non-SLA</th>
                                    <th><button type="button" class=" btn text-success" data-name='add'><i class="fe fe-plus-circle" data-id='ad' style="font-size:1.6em;"></i></button></th>
                                </tr>
                            </thead>
                            <tbody class="field_wrapper " id="table_body">
                                <tr>
                                    <td><input type="text" name="" class="form-control" ></td>
                                    <td><input type="text" name="" class="form-control"></td>
                                    <td><input type="text" name="" class="form-control"></td>
                                    <td><button type="button"  class=" btn text-danger" data-name="del"><i class="fe fe-minus-circle"  style="font-size:1.6em;"></i></button></td>
                                </tr>
                            </tbody>
                        </table>
                    <?php } ?>
                </div>
            </div>
        </form>
    </div>

If you use JS to copy a row that's already there, the dropdowns etc will already exist and be populated, so the PHP won't matter. Remember the PHP code already executed before the page was loaded into the browser, and generated some HTML. JS can copy that HTML output. — ADyson
– ADyson, Commented Aug 25, 2022 at 16:12
@ADyson if I copy or clone the ID's will be duplicated and won't be unique — Cephas Armah
– Cephas Armah, Commented Aug 25, 2022 at 16:17
True. But you can give items a new ID during the process. Or, don't use IDs - do you really need them for anything? — ADyson
– ADyson, Commented Aug 25, 2022 at 16:18
I am using ajax to get values for a particular input field. I can use class instead of ID's but I tried cloning the table but the ajax response does not work uniquely for the cloned rows. the parent role only works better as expected where as the children rows does not work — Cephas Armah
– Cephas Armah, Commented Aug 25, 2022 at 16:23

Vijay Hardaha · Accepted Answer · 2022-08-25 16:48:58Z

Here is basic example:

const table_row_html = `
    <tr>
        <th scope="row">{{ROW_NO}}</th>
        <td>Mark</td>
        <td>
            <select class="form-select" name="modal[]"">
                <option selected>Open this select menu</option>
                <option value=" 1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
            </select>
        </td>
        <td>@mdo</td>
        <td><a class="btn btn-danger btn-sm delete" href="#">Remove</a></td>
    </tr>`;

$(document).on("click", ".table a.insert", function() {
  const table_body = $(this).closest(".table").find("tbody");

  table_body.append(
    table_row_html.replace("{{ROW_NO}}", table_body.children("tr").length + 1)
  );
  return false;
});
$(document).on("click", ".table a.delete", function() {
  $(this).closest("tr").remove();
  return false;
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
        <th scope="col">
          <a class="btn btn-primary insert" href="#">Add</a>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>
          <select class="form-select" name="modal[]" ">
                        <option selected>Open this select menu</option>
                        <option value=" 1 ">One</option>
                        <option value="2 ">Two</option>
                        <option value="3 ">Three</option>
                    </select>
                </td>
                <td>@mdo</td>
                <td><a class="btn btn-danger btn-sm delete " href="# ">Remove</a></td>
            </tr>
        </tbody>
    </table>
</div>

Collectives™ on Stack Overflow

append form rows using JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related