Dynamically add new row to table using button click in php

Question

I have created a dynamic table using php.Now I want to add this functionality.

When we click the submit button, It should automatically add data to the database and create new row and previous row should be disabled that it can't be edited.How to do this ?

<?php 
session_start();
require_once "header.php";
?>
<body>
<div class="text-center">
<h1>PAYMENT PAGE</h1>
</div>
<hr>

  <div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <table class="table table-bordered table-hover" id="tab_logic">
                <thead>
                    <tr >
                        <th class="text-center">
                            #
                        </th>
                        <th class="text-center">
                            User ID
                        </th>
                        <th class="text-center">
                            Name
                        </th>
                        <th class="text-center">
                            NIC
                        </th>
                        <th class="text-center">
                            Amount
                        </th>
                        <th class="text-center">
                            Date
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr id='addr0'>
                        <td>
                        1
                        </td>
                        <td>
                        <input type="text" name='uid'  placeholder='User ID' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='uname' placeholder='Name' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='nic' placeholder='NIC' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='amount' placeholder='Amount' class="form-control"/>
                        </td>
                        <td>
                        <input type="date" name='dt' placeholder='Date' class="form-control"/>
                        </td>
                    </tr>
                    <tr id='addr1'></tr>
                </tbody>
            </table>
        </div>
    </div>
    <button id="add_row" class="btn btn-primary btn-lg pull-left" >SUBMIT</button>
</div>


</body>
</html> 


     $(document).ready(function(){
      var i=1;
     $("#add_row").click(function(){
      $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input type='text' name='uid"+i+"'  placeholder='User ID' class='form-control input-md'/></td><td><input type='text' name='uname"+i+"' placeholder='Name' class='form-control input-md'/></td><td><input type='text' name='nic"+i+"' placeholder='NIC' class='form-control input-md'/></td><td><input type='text' name='amount"+i+"' placeholder='Amount' class='form-control input-md'/></td><td><input type='date' name='dt"+i+"' placeholder='Date' class='form-control input-md'/></td>");

      $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
      i++; 
  });
});

prasanth · Accepted Answer · 2017-06-01 07:02:43Z

4

Try simply disable the all previous row input with $('tr').find('input').prop('disabled',true) before new row append .

Jquery Documentation of prop()

Updated jquery version 3.2.1

$(document).ready(function() {
  var i = 1;
  $("#add_row").click(function() {
  $('tr').find('input').prop('disabled',true)
    $('#addr' + i).html("<td>" + (i + 1) + "</td><td><input type='text' name='uid" + i + "'  placeholder='User ID' class='form-control input-md'/></td><td><input type='text' name='uname" + i + "' placeholder='Name' class='form-control input-md'/></td><td><input type='text' name='nic" + i + "' placeholder='NIC' class='form-control input-md'/></td><td><input type='text' name='amount" + i + "' placeholder='Amount' class='form-control input-md'/></td><td><input type='date' name='dt" + i + "' placeholder='Date' class='form-control input-md'/></td>");

    $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
    i++;
  });
});

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

<div class="text-center">
  <h1>PAYMENT PAGE</h1>
</div>
<hr>

<div class="container">
  <div class="row clearfix">
    <div class="col-md-12 column">
      <table class="table table-bordered table-hover" id="tab_logic">
        <thead>
          <tr>
            <th class="text-center">
              #
            </th>
            <th class="text-center">
              User ID
            </th>
            <th class="text-center">
              Name
            </th>
            <th class="text-center">
              NIC
            </th>
            <th class="text-center">
              Amount
            </th>
            <th class="text-center">
              Date
            </th>
          </tr>
        </thead>
        <tbody>
          <tr id='addr0'>
            <td>
              1
            </td>
            <td>
              <input type="text" name='uid' placeholder='User ID' class="form-control" />
            </td>
            <td>
              <input type="text" name='uname' placeholder='Name' class="form-control" />
            </td>
            <td>
              <input type="text" name='nic' placeholder='NIC' class="form-control" />
            </td>
            <td>
              <input type="text" name='amount' placeholder='Amount' class="form-control" />
            </td>
            <td>
              <input type="date" name='dt' placeholder='Date' class="form-control" />
            </td>
          </tr>
          <tr id='addr1'></tr>
        </tbody>
      </table>
    </div>
  </div>
  <button id="add_row" class="btn btn-primary btn-lg pull-left">SUBMIT</button>
</div>

edited Jun 1, 2017 at 7:02

answered Jun 1, 2017 at 6:24

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

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

4 Comments

Manusha Over a year ago

I tried both of answers but none of them work.my j query version 3.2.1 and browser is chrome.

prasanth Over a year ago

@Manusha see my updated answer.jquery v 3.2.1 is not problem

Manusha Over a year ago

I appreciate your help.But stiil the same.No change.I cant understand why.

Manusha Over a year ago

I found the problem. $('tr').find('input').prop('disabled',true); semi colon is missing in this statement. Thank you very much for your help.

Rahul · Accepted Answer · 2017-06-01 06:25:58Z

0

Add $('#addr'+(i-1)).find('input').attr('disabled',true); to your logic

Demo : https://jsfiddle.net/kw4koyvk/

$(document).ready(function(){
      var i=1;
     $("#add_row").click(function(){
      $('#addr'+(i-1)).find('input').attr('disabled',true);
      $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input type='text' name='uid"+i+"'  placeholder='User ID' class='form-control input-md'/></td><td><input type='text' name='uname"+i+"' placeholder='Name' class='form-control input-md'/></td><td><input type='text' name='nic"+i+"' placeholder='NIC' class='form-control input-md'/></td><td><input type='text' name='amount"+i+"' placeholder='Amount' class='form-control input-md'/></td><td><input type='date' name='dt"+i+"' placeholder='Date' class='form-control input-md'/></td>");

      $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
      i++; 
  });
});

answered Jun 1, 2017 at 6:25

Rahul

2,4802 gold badges12 silver badges17 bronze badges

1 Comment

sspence65 Over a year ago

how do you submit this to the database? I tried: $.post("add_test2.php", { uid : uid+i },function(response){ console.log(response); but it never gets called.

Collectives™ on Stack Overflow

Dynamically add new row to table using button click in php

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related