Menu
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++;
});
});
860
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
