I have working script that the user completes inputs on a form and when they submit the form and the content of the form inputs are entered as a table row.
Is there any way of, I think within the JS to make each row have a unique ID and add a delete button to the last colum of each row so the user can delete an individual row.
Thanks for saving a life!!!!
HTML Form
<form id="my_form" action="table_form.php" method="post">
<div style="width:10%; float:left;">
Quantity<br />
<input name="field_1" type="text" id="field_1" size="3" />
</div>
<div style="width:20%; float:left;">
Part Number<br />
<input type="text" id="field_2" name="field_2" />
</div>
<div style="width:30%; float:left;">
Notes<br />
<input name="field_3" type="text" id="field_3" size="45" />
</div>
<div style="width:20%; float:left;">
Unit Price<br />
<input type="text" id="field_4" name="field_4" />
</div>
<div style="width:20%; float:left;">
<br />
<input type="submit" value="Add Row" />
</div>
</form>
<!--
Here we create our HTML table.
Note the ID of the table. This will be used in our javascript file
Our table only contains a header row. All other content will be added dynamically
--><? $rowid = 1; ?>
<table width="100%" id="my_table">
<tbody id="my_table_body">
<tr>
<th width="5%"><div align="left">Qty</div></th>
<th width="19%"><div align="left">Part Number</div></th>
<th width="46%"><div align="left">Notes</div></th>
<th width="15%"><div align="left">Unit Price</div></th>
<th width="15%"><div align="left">Row Total</div></th>
</tr>
</tbody>
</table>
JS
window.addEvent('domready', function(){
$('my_form').addEvent('submit', function(e){
e.stop();
this.set('send', {
onComplete: function( response ){
var data = JSON.decode(response);
inject_row( $('my_table_body'), data );
}
});
var valid_form = true;
$$('#my_form input').each(function(item){
if( item.value == '' ) valid_form = false;
});
if( valid_form ) {
this.send();
} else {
alert('Fill in all fields');
}
});
var inject_row = function( table_body, data ){
var row_str = '<tr width="100%">';
data.each( function(item, index){
row_str += '<td>'+item+'</td>';
});
row_str += '<td><input type="submit" name="deleterow" id="deleterow" value="Delete" /></td></tr>';
var newRow = htmlToElements( row_str );
newRow.inject( table_body );
}
var htmlToElements = function(str){
return new Element('div', {html: '<table><tbody>' + str + '</tbody></table>'}).getElement('tr');
}
});
PHP
<?php
/**
* If nothing is being posted to this script redirect to
* our HTML page.
*/
if( ! $_POST ){
header('Location: newquote.php');
}
// create an empty array for our results
$results = array();
/**
* Stick the values from _POST into our results array
* while also stripping out any html tags
*
* This is where you would perform any required processing
* of the form data such as server side validation or updating
* a database.
*/
foreach( $_POST as $field ){
$results[] = strip_tags( $field );
}
// Echo our results as a JSON encoded string.
echo json_encode( $results );
?>
I agree with J-P, it sounds like you don't need an unique id here.
Since the question is tagged "jquery" I suggest using the live event binding, e.g.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(".deleterow").live("click", function() {
$(this).parents("tr:first").remove();
});
});
function foo(id) {
$("#"+id).append('<tr><td>'+(new Date()).getSeconds()+'</td><td>x</td><button class="deleterow">delete</button></td></tr>');
}
</script>
</head>
<body>
<table id="t1">
<tr><td>a</td><td>A</td><td><button class="deleterow">delete</button></td></tr>
<tr><td>b</td><td>B</td><td><button class="deleterow">delete</button></td></tr>
<tr><td>c</td><td>C</td><td><button class="deleterow">delete</button></td></tr>
</table>
<button onclick="foo('t1')">add</button>
</body>
</html>
The function passed to $(document).ready() is invoked when ...well, as the name states, when the document (dom) is ready.
$(".deleterow").live("click", ... : Whenever a click event occurs on an element with the css class "deleterow" the function passed as second parameter is invoked. In this case
function() {
$(this).parents("tr:first").remove();
}
When the function is invoked the this-context is the element where the event occurred. parents("tr:first") returns the first/"nearest" tr element in the ancestor-axis of the current element. remove() is probably self-explaining...
edit: ok, now that the jquery tag is gone....
http://www.jaycarlson.net/blog/2009/04/06/live-events-in-mootools/ shows a live-event binding for mootools. Using that the "new" solution is quite similar to the jquery script
window.addEvent('domready', function() {
// add an onclick handler for all current and future button elements
// within the table id=t1
$('t1').addLiveEvent('click', 'button', function(e){
// a button in t1 has been clicked, this=button element
// get the "nearest" tr in the parent/ancestor-axis
// and remove it
$(this).getParent("tr").dispose();
});
});
This should be unique enough for this project:
var newDate = new Date;
var id = newDate.getTime();
Then it would just be a matter of adding it the row in your loop and linking it to your delete button.
I always use the php function uniqid(). It generates a unique id based on the time in microseconds. PHP Documentation.
You could loop through your results in PHP and add the result from uniqid() to each result before using json_encode().
Related
I have a blog and get data from some SQL-database.
I have a problem to get correct data from a foreach loop and i don't know why. I will try to explain.
For each image there is a textarea where users can put in a comment. For each comment i have to send the corresponding id (ajax) to add to the database.
foreach($db->query("SELECT id, image FROM news") as $row)
{
<a href='images/news/{$row['image']}'><img src='images/news/{$row['image']}'/></a>";
<div class="save_comment">
<table width="400" border="0" cellspacing="1" cellpadding="2">
<tr>
<td>
<input type="text" class="_comment_id" name="id" value="<?php print_r($row['id'] );?>" />
Comment:
<textarea id="_comment_text" class="comment_area" name="comment_area" maxlength="400" cols="80" rows="8" ></textarea>
</td>
</tr>
<tr>
<td>
<a class="post_comment" href=".popupContainer">Post Comment</a>
</td>
</tr>
</table>
</div>
}
On click on "Post Comment" following js-script will be initialised....
<script type="text/javascript">
jQuery(document).ready(function() {
$(".post_comment").leanModal({top : 200, overlay : 0.6, closeButton: ".modal_close" });
$(function(){
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
});
</script>
....and a popup Container (div with class .popupContainer) is shown, where users can finally submit their comment.
<div class="popupContainer" style="display:none;">
Your Name: <input type="text" class="_user_name" />
Email:<input type="text" class="_comment_email" />
<input type='button' class='_submit_comment' value='Speichern' >
</div>
By submitting this comment, following script is initialised and data will be sent by ajax.
<script type="text/javascript">
$("._submit_comment").click(function(){
var parentObj = $(this).closest('.save_comment');
var _comment_id = parentObj.find('._comment_id').val(); -> I don't get the correct id
So here begins the problem. I only get the first id from the foreach-loop, but i need to get for every comment the corresponding id. Can anybody help with this problem?
Thank you
Misch
This part is wrong IMHO :
$(this).closest('.save_comment');
You should set a JS variable when you click on "Post Comment" with the id that you can store in the link like :
<a class="post_comment" href=".popupContainer" data-idcomment="<?php print($row['id'] );?>">Post Comment</a>
And
var _comment_id = null;
jQuery('.tabs .tab-links a').on('click', function(e) {
_comment_id = jQuery(this).data('idcomment');
var currentAttrValue = jQuery(this).attr('href');
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
});
Then you can use _comment_id for you ajax call
<script type="text/javascript" src="../js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$("#submit").click(function (){
var name =$("#name").val();
var mobile =$("#mobile").val();
var email =$("#email").val();
$.get('new.php',{name : name, mobile: mobile, email: email},function (data){
$("#res").html(data);
});
$("#name").val("");
$("#mobile").val("");
$("#email").val("");
$("#res").hide(10000);
});//submit.click end here!!!!!!!
$("#view").click(function(){
var view='view';
$.post('new.php',{view: view},function(data){
$("#viewdata").html(data);
});
$("#viewdata").toggle("slow");
});//to display data in table!!!!!!!
$("#add").click(function(){
$("#addnew").toggle("slow");
});//toggel button for record table!!!!!
$("body").on('click','',function(){
var iddata =this.id.split('-');
var id = iddata[1];
alert(id);
});
</script>
if(isset($_POST['view']))
{
$query="select * from userdetail";
$res=mysql_query($query);
echo "<table border=1>
<tr><th>name</th><th>Mobile</th><th>Email</th><th>Delete</th><th>Update</th></tr>";
while($row=mysql_fetch_array($res))
{
echo "<tr><td>".$row[1]."</td><td>".$row[3]."</td><td>".$row[4]."</td>";
echo "<td><div class='del' id='id-".$row[0]."';>Delete</div></td>";
echo "<td><a href='#'>Update</a></td>";
}
echo"</table>";
}
<body>
<div id="addnew" style="width:500px; float:left;">
<div style="width:200px; float:left;">
<form name="frm" id="frm">
<input type="text" id="name"></br>
<input type="text" id="mobile"></br>
<input type="text" id="email"></br>
<input type="button" id="submit" value="submit"/></br>
</form>
</div>
<div id="res" style="width:300px; float:left;">
</div>
</div>
<button id="add">Add New</button>
<button id="view">View</button>
<div id="viewdata">
<table border=1>
<tr>
<th>name</th><th>Mobile</th><th>Email</th><th>Delete</th><th>Update</th>
</tr>
</div>
</body>
I'm new in jquery and trying to learn crud function with jquery and php. I'm working on a code where I can add data through jquery as well as I can retrieve it from database, now I have placed a delete field to delete record from that table but I'm stuck here because I don't know how to get id from that table so I can use it to delete that record from table. I have tried .on and delegate in jquery to get that id but still not getting the result what I want, so please help me to solve this error.
So your html output is going to be something like this for your delete cell
<td>
<div class='del' id='id-1'>Delete</div>
</td>
Within JQuery you can do this:
$('.del').on('click',function() {alert(this.id)});
Result: id-1
Check it out here http://jsfiddle.net/54nptrkd/
By placing id inside while loop, I can fetch it using bellow code
in html page.
I can use
$<'#viewdata'>.on('click','.del',function(){
alert(this.id);
})
It will popup the result like id-31 or id-1 (whatever is selected).
Now you can use that id to delete the record.
.del is a class where id is stored in php file
e.g
< class='del' id=$row['id']>delete
"ok i'm trying and can you refer me some stuff or link to learn delete and update using jquery and php"
Your SQL statement will be something along the lines of
Delete from *TABLE* where id = ?
You most likely will have a Delete.php file that you can run your sql queries the same as you did in your New.php. Delete.php will either listen to a $_POST or $_GET variable
Your JQuery will have an ajax call like this if you are using $_POST in your php
$.ajax('Delete.php?id='+id,{
success: function() {
alert('it worked!')
}
});
or like this if you are using $_GET in your php
$.ajax('Delete.php', {
id: id,
success: function() {
alert('it worked!')
}
});
id will be defined in your JS like I mentioned before
$('.del').on('click',function() {
alert(this.id)
var id = this.id;
//$.ajax call goes here
});
I have to one public_page.php page and one action.php page. If a user press submit button in public_page.php it sends information to action.php page by jquery post method. After successful processing the action.php page sends one tr data which should be replaced in table of public_page.php.
page: public_page.php
<div id="result"></div>
<table>
<thead><tr><th>S/N</th><th>Name</th><th>Address</th><th>Mobile</th><th>Action</th></tr></thead>
<tbody>
<tr id="1"><td>1</td><td>Mr.X</td><td>Japan</td><td>95684256</td><td><a class="edit" href="">Edit</a></td></tr>
<tr id="5"><td>1</td><td>Mr.Y</td><td>USA</td><td>123856641</td><td><a class="edit" href="">Edit</a></td></tr>
<tr id="8"><td>1</td><td>Mr.Z</td><td>UK</td><td>456862043</td><td><a class="edit" href="">Edit</a></td></tr>
</tbody>
</table>
jquery code (without $(document).ready line here):
$("body").on("click",".edit",function(event){
event.preventDefault();
var url = 'action.php';
var trid = $(this).closest('tr').attr('id');
$.post(url,
{
trid: trid,
},function(data){
$("#result").html(data).show();
});
});
after that the data of table row is come in '#result' div for editing. Let. tr id=5 (Mr.Y) is now for editing. So here it is comes in #result div as follows:
<div id="result">
<form id="5000">
Name:<input type="text" name="name" value="Mr.Y" /><br />
Address:<input type="text" name="adrs" value="USA" /><br />
Mobile:<input type="text" name="mobile" value="123856641" /><br />
Age:<input type="text" name="age" value="30" /><br />
<input type="submit" value="Submit" />
</form>
</div>
Now when user edit the information and press Submit, it sends the form information to action.php page by jquery. what is doing action.php page, after getting trid (which is actually id of database row that is to be edited) it process the data and produce callback data for public_page.php like this:
page: action.php
echo '<div class="success_msg">Data Updated Successfully!</div>';
echo '<div class="trid">5</div>';
echo '<div class="trcontent"><tr id="5"><td>1</td><td>Mr.Y</td><td>Tokeyo</td><td>123856641</td><td><a class="edit" href="">Edit</a></td></tr></div>';
and jquery code of public_page.php process the data like this:
var url = 'action.php';
var id = $(this).closest('form').attr('id');
var form_id = "#"+id ;
var data = $(form_id).serializeArray();
$.post(url,
data,function(callbackdata){
var msg = $(callbackdata).filter(".success_msg").html();
var trid = $(callbackdata).filter(".trid").html();
var trdata = $(callbackdata).filter(".trcontent").html();
$("#result").html(msg).show();
$('#'+trid).replaceWith(trdata);
});
as per query code, it should replace the tr which id is 5. But although it is replacing the tr but not in tabular format, it is replacing as text format like this:
page: public_page.php
<div id="result"></div>
<table>
<thead><tr><th>S/N</th><th>Name</th><th>Address</th><th>Mobile</th><th>Action</th></tr></thead>
<tbody>
<tr id="1"><td>1</td><td>Mr.X</td><td>Japan</td><td>95684256</td><td><a class="edit" href="">Edit</a></td></tr>
1Mr.YTokeyo123856641<a class="edit" href="">Edit</a>
<tr id="8"><td>1</td><td>Mr.Z</td><td>UK</td><td>456862043</td><td><a class="edit" href="">Edit</a></td></tr>
</tbody>
</table>
I think ...... is not inserting with replaced data.
How to resolve this issue, so that after replacing tr id="5" looks like a table row, not a string.
I'd suggest making an edit that will deal with this in a simpler way.
In your php code, instead of returning a div, what you should return is data.
<?php
$data = new stdClass();
$data->successMsg = 'Data Updated Successfully!';
$data->trid = 5;
$data->trContent = '<tr id="5"><td>1</td><td>Mr.Y</td><td>Tokeyo</td><td>123856641</td><td><a class="edit" href="">Edit</a></td></tr>';
echo json_encode($data);
Then in your JS code, you can go directly at the data instead of filtering it out of your HTML.
$.post(url,
data,
function(callbackdata){
var msg = callbackdata.successMsg;
var trid = callbackdata.trid;
var trdata = callbackdata.trContent;
$("#result").html(msg).show();
$('#'+trid).replaceWith(trdata);
},
'json');
The reason you're having problems is because of the way jQuery handles invalid HTML. <div><tr><td>1</td><td>2</td></tr></div> is not valid.
$('<div><tr><td>1</td><td>2</td></tr></div>').html() // outputs `12`
I am showing data from database into table with the checkbox in front of every row. All I want is to change the checked rows columns with class click into input fields on clicking the edit button. I am very new to jQuery. I don't have much concepts about it. So help me please.
Here is the jQuery code I've tried:
$(function () {
$("input[name='check[]']:checked").each(function (){
$('#edit').click(function(){
var OriginalContent = $('.click').text();
$('.click').addClass("cellEditing");
$('.click').html("<input type='text' value='" + OriginalContent + "' />");
$('.click').children().first().focus();
$('.click').children().first().keypress(function (e) {
if (e.which == 13) {
var newContent = $('.click').val();
$('.click').parent().text(newContent);
$('.click').parent().removeClass("cellEditing");
}
});
$('.click').children().first().blur(function(){
$('.click').parent().text(OriginalContent);
$('.click').parent().removeClass("cellEditing");
});
});
});
});
And here is the html:
echo '<div class="table-responsive">';
echo '<table class="table table-bordered table-hover"><thead><tr>
<th>ID</th><th>Name</th><th>Category</th><th>Description</th><th>Price</th><th>Status</th><th colspan="2">Image</th></tr></thead><tbody>';
while($row = mysqli_fetch_array($retval))
{
echo '<tr><td>'.$row["ID"].'</td>
<td >'.$row["Name"].'</td>
<td>'.$row["Category"].'</td>
<td>'.$row["Description"].'</td>
<td class="click1">'.$row["Price"].'</td>
<td class="click">'.$row["Status"].'</td>
<td><img style="width: 3em; heigth: 3em;" class="img-responsive" src="'.$row["Imagepath"].'" alt="'.$row["Name"].'"/></td>
<td><input class="checkbox" name="check[]" id="check[]" type="checkbox" value='.$row["ID"].'/></td></tr>';
}
echo '</tbody></table>';
echo '</div>';
?>
<center><input class="btn btn-default" name="deletebutton" type="submit" value="DELETE" />
<input class="btn btn-default" name="edit" id="edit" type="button" value="EDIT" />
<input class="btn btn-default" name="updatebutton" type="submit" value="UPDATE"/></center>
</form>
Basically you need two functions to run...
when "edit" is clicked: convert all "editable" columns to INPUTs, if that row is ":checked"
when ENTER is pressed while editing one of your "editable" INPUTs: revert it to a string
I simplified your HTML a bit for clarity. An explanation of the jQuery needed is inline.
Also, here's a working jsFiddle: http://jsfiddle.net/msz76tgp/2/
HTML
<table>
<tr>
<td class="editable status">something</td>
<td class="editable price">2</td>
<td class="checkbox"><input type="checkbox"/></td>
</tr>
<tr>
<td class="editable status">something else</td>
<td class="editable price">3</td>
<td class="checkbox"><input type="checkbox"/></td>
</tr>
</table>
<a id="edit" href="#edit">edit</a>
jQuery
$(function () {
// When edit is clicked...
$('#edit').on('click', function(){
// For each ":checked" checkbox...
$('.checkbox INPUT:checked').each( function(){
// Get the parent row...
var $row = $(this).closest('tr');
// And that row's "editable" columns...
var $editable= $row.children('.editable');
// Add the "editing" class...
$editable.addClass('editing');
// And change all strings to INPUT fields.
$editable.each( function(){
$(this).html('<input value="'+$(this).text()+'"/>');
});
});
});
// Also...
// Any time an .editing INPUT receives a keypress...
$('table').on('keypress', '.editing', function(e){
// If the key pressed is ENTER...
if( e.which == 13 ){
// Get the current row...
var $row = $(this).closest('tr');
// Get the editable columns...
var $editable = $row.children('.editable');
// Remove the class...
$editable.removeClass('editing');
// Change back to string...
$editable.each( function(){
$(this).html( $(this).find('INPUT').val() );
});
}
});
});
I didnt really use your code, since you're writing html with php which is hard to maintain and isnt my preferred style (id rather write html and then put php inside) but this should get help you with your question: http://jsfiddle.net/swm53ran/28/.
comments in the code show what's going on. in essence, im using jquery to add the input with the data that is already in there. but since you are using php, you can just modify the code below by inserting <?php echo();?> inside the html code built in the javascript section.
<tr>
<td class="name">php echo name here</td>
<td class="description">php echo description here</td>
<td class="data">php echo data here</td>
<td>Edit Info</td>
</tr>
$('.edit').on('click', function() {
var row = $(this).closest('tr');
***NOT NECESSARY SECTION OF CODE BECAUSE YOU'RE USING PHP (JUST FOR DEMO)****
//collect data thats there (you dont have to do this if you have php,
//then you can just code in <?php echo();?> into your html building in
//javascript) because i have no php here
var name = row.find('.name').html();
var description = row.find('.description').html();
var data = row.find('.data').html();
***END OF NOT NECESSARY SECTION****
//construct inputs to be inserted into cells
//since you're using php, you modify the below code to something like this:
//var nameInput = '<input type="text" value="<?php echo('name');?>"/>';
//but you have to be careful because ^ this code wont work because of the
//nested parenthesis escape each other, so just put like <?php echo('name');?>
//into another variable and stick the variable in instead.
var nameInput = '<input type="text" value="'+ name +'"/>';
var descriptionInput = '<input type="text" value="'+ description +'"/>';
var dataInput = '<input type="text" value="'+ data +'"/>';
//remove all contents and append inputs
row.find('.name').html('').append(nameInput);
row.find('.description').html('').append(descriptionInput);
row.find('.data').html('').append(dataInput);
});
hope this helps!
Below is a simplified example that demonstrates the problem I am having. One hundred percent of code is posted below.
Three files work together: testa.php, testb.php, and testc.js. (FWIW, testa.php could function as the index.php, but this is just a demo)
OVERVIEW:
TESTA.PHP
When user clicks anchor tag, sends value to testb.php
Receives ajax response from testb.php into div #reportstable, within FORM structure
Form is submitted to itself, so it prints $_POST data -
TESTB.PHP
receives value from TESTA.PHP, via ajax
outputs table that corresponds to received values
(In this example, I removed how received value is used, but still retained this structure as it affects the jQuery in testc.js)
TESTC.JS
the jQuery that makes it (partially) work
PROBLEM 1: If user adds more than one "document" (i.e. row), only data for the last document appears in the POST data..
PROBLEM2: DocTitle and FileName IDs (dt1, fn1) are not POSTED as they appear in the DOM. In the DOM, their IDs are incremented properly (dt11, dt12, dt13, etc) but when POSTed only one comes through and it has not been incremented. (Use firebug to inspect table elements after adding a couple of documents.
PROBLEM3: First click doesn't "take" when clicking the "choose file" anchor when adding a new document. Any thoughts on this one?
TESTA.PHP
<?php
If (empty($_POST)===false) {
echo '<pre>';
print_r($_POST);
echo '</pre>';
die();
}
?>
<html><body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery-custom-file-input.js"></script>
<script type="text/javascript" src="testc.js"></script>
<br />
Project*:<br />
Click Me
<form action="" method="post">
<div id="reportstable">
</div>
</form>
</body></html>
TESTB.PHP
<?php
$project_id = $_POST['project_id'];
if ($project_id == 5) {
echo '
<table id="DocTable">
<tr>
<th width="150">Document Title</th>
<th width="150">File Name</th>
</tr>
<tr name="tr2" id="tr2" style="display:none;">
<td><input type="text" name="dt1" id="dt1"></td>
<td>
<input type="hidden" name="fn1" id="fn1">
<span id="sp1">choose file<span>
</td>
</tr>
</table>
<br />
add document<br />
<br />
<input type="submit" name="submit" id="submit_it" value="Submit">
';
}
TESTC.JS
$(function(){
var count = 1;
//*******************************************************************
$('#project_pick').click(function(e) {
$(this).hide();
$.ajax({
type: "POST",
url: "testb.php",
data: "project_id=5",
success:function(data){
$('#reportstable').html(data);
}
});
});
//*******************************************************************
$(document).on('click','#ah11',function() {
$(this).file().choose(function(e, input) {
$('#fn11').val(input.val());
$('#sp11').html(input.val());
$('#sp11').css('color','grey');
});
});
//*******************************************************************
$(document).on('click','#ah12',function() {
$(this).file().choose(function(e, input) {
$('#fn12').val(input.val());
$('#sp12').html(input.val());
$('#sp12').css('color','grey');
});
});
//*******************************************************************
$(document).on('click','#ah13',function() {
$(this).file().choose(function(e, input) {
$('#fn13').val(input.val());
$('#sp13').html(input.val());
$('#sp13').css('color','grey');
});
});
//*******************************************************************
$(document).on('click', '#add_row', function() {
$("table#DocTable tr:nth-child(2)")
.clone()
.show()
.find("a, input, span, tr").each(function() {
$(this)
.val('')
.attr('id', function(_, id) {
return id + count;
});
})
.end()
.appendTo("table");
count++;
if (count == 4) {
$('#add_row').prop('disabled', 'disabled');
}
}); //end fn add_row
//*******************************************************************
$(document).on('click', '#submit_it', function() {
alert('This will be submitted now');
});
//*******************************************************************
});
It seems in your javascript that you are changing the values of the id attribute only. However, when you post a form, the id attribute is irrelevant and not posted, you need the name attribute instead.
So where you are changing id's, you really should be changing names (and id's to if you really need them as they need to be unique).
However, a far easier solution would be to use arrays for names, like:
<input type="text" name="dt[]">
If you copy / clone elements with these names and post the form, you will get an array in your $_POST['dt'].