Java Script Append

Question

I have written some code below to append the form inputs both with hidden and visible. But when I click on my add icon nothing happens. Below is the Code I have written. The Append button with id="add" isn't working. Can someone please help me with the right thing do.

<script type="text/javascript">
$(document).ready(function() => {
    var num = 1; 
        $("#add").click(function() => {
            var c = "<tr id=\"row" + num + "\"> <td><select class=\"form-control form-select select2\" data-bs-placeholder=\"Select\" name=\"model[]\" required=\"\" id=\"model\"><?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=\"serialN0[]\" class=\"form-control\" placeholder=\"Serial No...\"> <input type=\"text\" name=\"addedBy[]\" class=\"form-control\" id=\"addedBy\" value="<?=$_SESSION['user_uniq_id']?>" hidden=""> <input type=\"text\" name=\"deviceID[]\" class=\"form-control\" value="<?=time()?>" id=\"deviceID\" hidden=""></td><td><a href=\"javascript:;\" type=\"button\" id=\"add\" class=\"text-danger\" onclick=\"DeleteRow(" + num + ");\"><i class=\"fe fe-minus-circle\" style=\"font-size:1.6em;\"></i></a></td>  </tr>";
            $("tbody").append(c);
            num++;
        });
    });

    function DeleteRow(id) {
        $('#row' + id).remove();
    }

</script>

<div class="card-body">
   <form id="" method="POST" autocomplete="off" novalidate="novalidate">
      <table class="table border text-nowrap text-md-nowrap table-striped mb-0">
         <thead>
            <tr>
               <th>Device Model</th>
               <th>Serial No</th>
               <th>Action</th>
            </tr>
         </thead>
         <tbody class="field_wrapper">
            <tr id="row0">
               <td>
                  <select class="form-control form-select select2" data-bs-placeholder="Select" name="model[]" required="" id="model">
                     <?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="" name="" class="form-control" placeholder="Serial No...">
                  <input type="text" name="addedBy[]" class="form-control" id="addedBy" value="<?=$_SESSION['user_uniq_id']?>" hidden="">
                  <input type="text" name="client[]" class="form-control" value="<?=$clientID?>" id="client" hidden="">
                  <input type="text" name="deviceID[]" class="form-control" value="<?=time()?>" id="deviceID" hidden="">
               </td>
               <td><button type="button" id="add" class=" btn text-success"><i class="fe fe-plus-circle" id="add" style="font-size:1.6em;"></i></button></td>
            </tr>
         </tbody>
      </table>
   </form>
</div>

You have a syntax error in your snippet line 48 col 9 - please fix it and see if your problem still exists Remove either function or => — Joschi
– Joschi, Commented Aug 5, 2022 at 17:35

Stern Chen · Accepted Answer · 2022-08-05 17:53:30Z

There are incorrect PHP scripts and JavaScript arrow function expression in your html string. Resulting the html you are trying to append was causing an error.
A correct example would look like this:

$("#add").click(() => {
    var c = "<tr>...<?php ?>...</tr>";
});

I would like to recommend you to try render your server data to stored in JavaScript variable, then only you start process the data in your JavaScript script.

<script type="text/javascript">
    /* first encode your PHP data as JSON and echo (render) it in your JavaScript */
    /* for example, this line after processed by server: */
    var dataFromPHP = <?php echo json_encode(array(
        array('id' => 1, 'name' => 'Brandon'),
        array('id' => 2, 'name' => 'May'),
    )); ?>
    /* will become like this: */
    /* var dataFromPHP = [{"id":1,"name":"Brandon"},{"id":2,"name":"May"}] */

    /* check the log to see how the result looks like */
    console.log(dataFromPHP);

    /* then only you continue process these data */
</script>

Collectives™ on Stack Overflow

Java Script Append

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related