Add table row on button click in php and set fields values

Question

I have a form where I have to add table rows on button click.

Here is the table row which I have to add dynamically: (addProdToGroup.php)

<tr style="text-align: center;" id="products">
  <td><?php $j ?></td>
  <td><select class="form-control" name="code" id="productID" style="width: 429px;">
    <?php

    $sql = "SELECT * FROM `product`";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        // output data of each row
        while($row = $result->fetch_assoc()) {
          echo "<option id='".$row['code']."' value='".$row['code']."'>".$row['pname']."</option>";
        }
    } else {
        echo "0 results";
    }
    ?>
    </select>
  </td>
  <td><input type="text" name="hsnNo" id="hsnNo" readonly></td>
  <td><input type="text" name="qty" id="qty" readonly></td>
  <td class="coljoin"><input type="number" format="2" name="amount"></td>
  <td>
    <span class="fa fa-trash"></span>
  </td>
</tr>

This is the table in which I have to add the above-mentioned rows: (order.php)

<table id="productTable" class="table-c">
                  <tr>
                    <th class="text-center" style="width: 5%;">SR No.</th>
                    <th class="text-center" style="width: 45%">DESCRIPTION</th>
                    <th class="text-center" style="width: 10%">HSN/SAC</th>
                    <th class="text-center" style="width: 10%">QTY IN-HAND</th>
                    <th class="text-center" style="width: 10%">ENTER OUTWARD QTY</th>
                    <th class="text-center" style="width: 5%">Delete</th>
                  </tr>
                  <div class="dynamics">

                  </div>
                </table>

On clicking the button, an AJAX query is being called for the PHP code. The ajax code is: (order.php)

<script>
  $(document).ready(function(){
    $('#addOrderProduct').click(function(){
      var j = 1;
      var dataString = "j="+j;
      $.ajax({
        url: "addProdToOrder.php",
        type: "post",
        data: dataString,
        success: function(response){
          $('.dynamics').html(response);
        }
      });
    });
  })
</script>

The output should be like this: Format for the rows

Also, I have a script to update the fields upon selecting the product from the drop-down. How to make that run for every row added into the form? Here is the code for updating fields: (order.php)

$('#productID').change(function(){
      var code = $(this).val();
      console.log(code);
      var dataString = 'code='+code;

      $.ajax({
        url: "getProdDets.php",
        type: "post",
        data: dataString,
        success: function(response){
          var Vals = JSON.parse(response);
          console.log(Vals);
          $("input[name='hsnNo']").val(Vals.hsnNo);
          $("input[name='qty']").val(Vals.qty);
          console.log(Vals.hsnNo);
          console.log(response);
        }
      });
    });

Stack overflow is not a code writing service. Please provide a Minimal, Complete, and Verifiable example and explain the error you're facing. Here's how: stackoverflow.com/help/mcve — Pitto
– Pitto, Commented Mar 15, 2018 at 11:06
Make the JS clone a table row and then add the clone into the table. No need to go back to PHP to do this — RiggsFolly
– RiggsFolly, Commented Mar 15, 2018 at 11:18
same question and same code i think its duplicate stackoverflow.com/questions/49293039/… — Rahul
– Rahul, Commented Mar 15, 2018 at 11:22
@RahulShrivastava The mentioned post is mine using another account. I asked a different question using the same code. — Digitech Solution
– Digitech Solution, Commented Mar 15, 2018 at 11:27

Rohan Kumar · Accepted Answer · 2018-03-15 11:16:42Z

1

Change div to tbody in table and use .append() to add dynamic rows like,

HTML changes:

<table id="productTable" class="table-c">
    <thead>
        <tr>
            <th class="text-center" style="width: 5%;">SR No.</th>
            <th class="text-center" style="width: 45%">DESCRIPTION</th>
            <th class="text-center" style="width: 10%">HSN/SAC</th>
            <th class="text-center" style="width: 10%">QTY IN-HAND</th>
            <th class="text-center" style="width: 10%">ENTER OUTWARD QTY</th>
             <th class="text-center" style="width: 5%">Delete</th>
         </tr>
    </thead>
    <tbody class="dynamics"></tbody>
</table>

Change in success

....
success: function(response){
    $('.dynamics').append(response);
}
....

answered Mar 15, 2018 at 11:16

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Digitech Solution Over a year ago

Thanks! I was able to add multiple rows.

Collectives™ on Stack Overflow

Add table row on button click in php and set fields values

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related