We Keep Coding

how to get a particular cell from a dynamically added row based on its id in jQuery

I have a table with the id line-creation-table which grows or shrinks dynamically. Each row in this table looks like this:
<tr>
<td><input type="text" name="brand" /></td>
<td><input type="text" name="itemRefNo" id="itemRefNo"/></td>
<td> <input type="number" name="quantity" value="1"/></td>
<td> <input type="text" name="unitPrice" /></td>
<td><input type="date" name="deliveryDate" /></td>
<td><input type="button" value="Show Previous Actions" id="showPreviousActions"/></td>
</tr>
these rows are added dynamically. Now when the showPreviousActions button is clicked I want to retrieve the value from itemRefNo cell from the row where the button is clicked.
I tried this:
$("#line-creation-table").on('click', 'input[id="showPreviousActions"]', function(event) {
var itemRefNo = $(this).parent().find('input[id="itemRefNo"]').val();
}
and this:
var itemRefNo = $(event.target).closest('input[id="itemRefNo"]').val();
but neither worked. When I console log the itemRefNo variable I get undefined. How can I solve it? Thank you very much.

This code:
$(this).parent()
takes the current item (this = the button) and gets its parent, which is the td of the button, so attempting to then find an input in an adjacent cell fails.
A quick fix would be to get the tds parent, the tr, giving:
$("#line-creation-table").on('click', 'input[id="showPreviousActions"]', function(event) {
var itemRefNo = $(this).parent().parent()
.find('input[id="itemRefNo"]').val();
}
better would be to use closest() to find the button's row:
$("#line-creation-table").on('click', 'input[id="showPreviousActions"]', function(event) {
var row = $(this).closest("tr");
var itemRefNo = row.find('input[id="itemRefNo"]').val();
}
Where closest() is the same as calling .parent() recursively until it finds a matching node (ie, closest parent).

you can use
$('#showPreviousActions').click(function () {
var aa = $(this).closest('tr').find('#itemRefNo').val();
});

Ok, a very stupid mistake on my side. When creating a row for this table dynamically, I forgot to change the code there so that in the newly created rows there would be an input with the id itemRefNo. The old code:
$('#line-creation-table').append("<tr>" +
"<td><input type='text' name='brand' /></td>" +
"<td><input type='text' name='itemRefNo' /></td>" +
"<td> <input type='number' name='quantity' value='1'/></td>" +
"<td> <input type='text' name='unitPrice' /></td>" +
"<td><input type='date' name='deliveryDate' /></td>" +
"<td><input type='button' value='Show Previous Actions' id='showPreviousActions'/></td>" +
"<td><input type='button' value='Delete' id='deleteRowButton' /></td>" +
"</tr>")
new code:
$('#line-creation-table').append("<tr>" +
"<td><input type='text' name='brand' /></td>" +
"<td><input type='text' name='itemRefNo' id='itemRefNo'/></td>" +
"<td> <input type='number' name='quantity' value='1'/></td>" +
"<td> <input type='text' name='unitPrice' /></td>" +
"<td><input type='date' name='deliveryDate' /></td>" +
"<td><input type='button' value='Show Previous Actions' id='showPreviousActions'/></td>" +
"<td><input type='button' value='Delete' id='deleteRowButton' /></td>" +
"</tr>")
So both of #freedomn-m 's suggestions work.

Insert from dynamic table input to mySQL

I have a dynamic table form input form which you can add/remove rows as you like. As someone who doesn't have much experience, I'm stuck on how to save those input into the mySQL database.
Here's what the input.php looks like
<form action="insert.php" method="post">
<div class="box-body no-padding">
<table class="table table-bordered">
<tr>
<th>Item</th>
<th>#</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
<th></th>
</tr>
<tr>
<td><input type="text" id="item" name="item"></td>
<td><input type="text" id="no" name="no"disabled></td>
<td><input type="number" id="qty" name="qty"></td>
<td><input type="number" id="price" name="price"></td>
<td><input type="number" id="total" name ="total" disabled></td>
<td><button type="button" class="remove-row"><i class="fa fa-trash"></i></button></td>
</tr>
</table>
</div>
<div class="box-body">
<div class="button-group">
<i class="fa fa-plus-circle"></i> Add Item
</div>
</div>
<div class="box-footer">
<div class="button-group pull-right">
<button type="submit" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
And here is the JS (jQuery) code that I use to add/remove rows
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function(){
$(document).ready(function(){
$(".add-row").on('click', function(){
var item = "<td><input type='text' id='item'></td>";
var no = "<td><input type='text' id='no' disabled></td>";
var qty = "<td><input type='number' id='qty'></td>";
var price = "<td><input type='number' id='price'></td>";
var total = "<td><input type='number' id='total' disabled></td>";
var remove_button ="<td><button type='button' class='remove-row'><i class='fa fa-trash'></i></button></td>";
var markup = "<tr>" + item + no + qty + price + total + remove_button + "</tr>";
$("table").append(markup);
});
$(".table").on('click', '.remove-row', function(){
$(this).closest("tr").remove();
});
});
});
</script>
Here's what the page looks like:
input page
insert.php
<?php
$connection = mysql_connect("localhost", "root", "");
$db = mysql_select_db("db", $connection);
if(isset($_POST['submit'])){
$item = $_POST['item'];
$no = $_POST['no'];
$qty = $_POST['qty'];
$price = $_POST['price'];
$query = mysql_query("insert into table(item, no, qty, price) values ('$item', '$no', '$qty', '$price')");
}
?>
I know the insert.php won't work for my case because I need to input it as arrays. The thing is:
1. I don't know how to implement the front end so I won't have duplicate id/names when I click "Add Item"
2. I don't know how to insert the arrays (that I don't know to create) to the mysql.
I'd like to know how can I implement the save button in my case. Thank's for your help.

First, please research the mysql_* functions. They should no longer be used because they can lead to SQL injection security issues. Use mysqli_* instead or a DB layer like PDO.
Second, if you append "[]" to your input tag names then PHP will receive the data as arrays and you can loop through it in your insert.php.
<tr>
<td><input type="text" id="item" name="item[]"></td>
<td><input type="text" id="no" name="no[]" disabled></td>
<td><input type="number" id="qty" name="qty[]"></td>
<td><input type="number" id="price" name="price[]"></td>
<td><input type="number" id="total" name="total[]" disabled></td>
<td><button type="button" class="remove-row"><i class="fa fa-trash"></i></button></td>
</tr>
And be sure your javascript code also adds the name attribute:
$(".add-row").on('click', function(){
var item = "<td><input type='text' id='item' name='item[]'></td>";
var no = "<td><input type='text' id='no' name='no[]' disabled></td>";
var qty = "<td><input type='number' id='qty' name='qty[]'></td>";
var price = "<td><input type='number' id='price' name='price[]'></td>";
var total = "<td><input type='number' id='total' name='total[]' disabled></td>";
var remove_button ="<td><button type='button' class='remove-row'><i class='fa fa-trash'></i></button></td>";
var markup = "<tr>" + item + no + qty + price + total + remove_button + "</tr>";
$("table").append(markup);
});
Then in PHP you can have:
<?php
$connection = mysqli_connect("localhost", "root", "", "db");
if(isset($_POST['submit'])){
$rowCount = count($_POST['item']);
// Note that this assumes all the variables will correctly be submitted as arrays of the same length. For completeness and robustness you could add a !empty check for each value.
for ($i = 0; $i < $rowCount; $i++) {
$item = $_POST['item'][$i];
$no = $_POST['no'][$i];
$qty = $_POST['qty'][$i];
$price = $_POST['price'][$i];
$query = mysqli_query($connection, "insert into `table` (item, no, qty, price) values ('$item', '$no', '$qty', '$price')");
}
}
?>

Get row index of a table javascript

I know this question has been asked many times, I went through most of the suggestions and none of the solutions seem to be working for me.
I have a table in a modal in which I am allowing the user to make some changes. I then use these values to update the data in the database.
My table rows are created by echoing the HTML code
echo "<tr> ";
echo "<td > $row_counter </td>";
echo "<td style='width:200px' class='left_align' > $lstr_product_name </td>";
echo "<td > $lstr_department_name </td>";
echo "<td > <input type='text' name='unit_cost' class='form-control unit_cost' style='width:50px;' value='$lint_unit_cost' /> <input name='product_id' data-id='$lint_product_id' class='form-control product_id' value='$lint_product_id' type='hidden'/> </td>";
echo "<td > $lint_quantity_counted </td>";
echo "<td > $lint_total_cost </td>";
To update the proper values in the database I need to get the product_id name which I know that I can get by
var x = document.getElementsByName("product_id")[0].value;
However I need to get the correct row index to be able to POST the correct product_id.
I have tried the following:
alert($(this).index());
But this always returns 0. The closest I got to a solution was by using
var rowID = $(this).closest('tr').index();
alert(rowID);
The problem with this is that my editable cell is "unit_cost" which is the 4th cell in the tr. This means that the closest tr is not the one that the row that the cell is in but the one below.
I have then tried
alert( "Row id: " + $("#tbl_store_product_sizes tr").this.rowIndex );
But also no luck. I have ran out of ideas, what is the proper way of doing this?
EDIT
All my javascript code is enclosed in the $(document).ready(function()
I am watching for the change of the unit_cost field using the following code
$(document.body).off( "change", ".unit_cost");
$(document.body).on('change', '.unit_cost', function(event)
{
var rowID = $(this).closest('tr').index();
alert(rowID);
var product_id = document.getElementsByName("product_id")[rowID].value;
alert('The product id is: ' + x);
var unit_cost = document.getElementsByName("unit_cost")[rowID].value;
});

Explanation:-
Since both inputs are in the same <td>, so on change of first-one you have to use .next() to get next input data.
You need to do it like below:-
$(document).on('change', '.unit_cost', function(event) {
var rowID = $(this).closest('tr').index();
alert(rowID);
var product_id = $(this).next('.product_id').val();
alert('The product id is: ' + product_id);
var unit_cost = $(this).val();
});
Working snippet:-
$(document).on('change', '.unit_cost', function(event) {
var rowID = $(this).closest('tr').index();
alert('The corresponding row index is: '+ rowID);
var product_id = $(this).next('.product_id').val();
alert('The product id is: ' + product_id);
var unit_cost = $(this).val();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td style='width:200px' class='left_align'>2 </td>
<td>3 </td>
<td> <input type='text' name='unit_cost' class='form-control unit_cost' style='width:50px;' value='4' /> <input name='product_id' data-id='$lint_product_id' class='form-control product_id' value='5' type="hidden"/> </td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td style='width:200px' class='left_align'>9 </td>
<td>10 </td>
<td> <input type='text' name='unit_cost' class='form-control unit_cost' style='width:50px;' value='11' /><input name='product_id' data-id='$lint_product_id' class='form-control product_id' value='12' type="hidden"/> </td>
<td>13</td>
<td>14</td>
</tr>
</table>

Mapping html form input to javascript object inside a newly formed element

I have the following html. Please have a look at it and I will explain the problem as and when we go along.
<table>
<tbody>
<tr id="<?php echo $record['id']?>" style="...">
<td><?php echo $record['id']; ?></td>
<td><?php echo $record['url']; ?></td>
<td><input type="button" name="edit" value="Edit" onclick="edit(<?php echo ($record['id'])?>)"></td>
</tr>
</tbody>
</table>
What I am trying to achieve here is that when I click the "Edit" button, it clears that field and creates new empty fields in its place where those details can be entered again and in place of the edit button, the update button appears.
This is what the edit function looks like:
<script>
function edit(id){
var element = document.getElementById(id);
$(element).empty();
$(element).append("<td><input name='id' value="+id+" disabled></td>" +
"<td><input type='text' name='url' ></td>" +
"<td><input type='text' name='title'></td>" +
"<td><input type='button' value='Update' onclick='testFunction()'></td>");
}
The update button fires a function called testFunction. Now in this testFunction, I want to send the new values into the new form that I have created with jQuery so that I can send those values to the MySQL so that the new value of title is updated for a given id.
Please look over the code and tell me how should I go about solving this?
var testFunction = function(newID){
console.log("This is the NEW id of the object that we are changing----->");
console.log(newID);
console.log("--------------------------END------------------");
$.post( "update", { id: newID})
.done(function( ) {
document.getElementById(id).style.display = "none";
});
};
</script>

//test record
var record = {
id: 12345,
title: 'Some title',
url: 'https://stackoverflow.com/posts/45861223/edit'
};
function action(id) {
var $element = $('#' + id),
$title = $('[name=title]', $element),
$url = $('[name=url]', $element),
$btn = $('[type=button]', $element),
isUpdate = ($btn.attr('value') != 'Edit');
$title.prop('readOnly', isUpdate);
$url.prop('readOnly', isUpdate);
$btn.attr('value', isUpdate ? 'Edit' : 'Update');
if (isUpdate) {
// show some loading mask
$.post("update", {
title: $title.val(),
url: $url.val(),
id: id
})
.done(function() {
// here you have the new id from the server
// hide the loading mask
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr id="12345">
<td><input type='text' name='title' value="Some title" readOnly></td>
<td><input type='text' name='url' value="https://stackoverflow.com/posts/45861223/edit" readOnly></td>
<td><input type="button" name="edit" value="Edit" onclick="action(12345)"></td>
</tr>
</tbody>
</table>

Adding a dropdown from database in a form

My questions are in the end of this referred as MY PROBLEMS. Please read the questions before you try to go through all the things I have written, so that I don't waste so much of your time.
I have a form where I need to enter certain values as
ITEM | QUANTITY | PRICE | DISCOUNT | TOTAL
Item 1 | 1 | 100 | 05 | 95
Item 2 | 4 | 250 | 10 | 900
Add more
Total : 995
On clicking the 'Add more' link, a new set of same input fields appear, and so forth.
Each subtotal is automatically calculated (95 and 900 in this case).
These sub totals are automatically added to get the final total (995 in this case).
The script I use to have the 'Add more' functionality is the following
<script>
$(document).ready(function() {
var InputsWrapper = $("#InputsWrapper");
var AddButton = $("#AddMoreFileBox");
var x = InputsWrapper.length;
var FieldCount = 1;
$(AddButton).click(function(e){
FieldCount++;
$(InputsWrapper).append('<tr><td><input class="item" type="text" name="item[]"></td><td><input class="qty" type="number" name="qty[]"></td><td><input class="price" type="number" name="price[]"></td><td><input class="discount" type="number" name="discount[]">%</td><td><input class="total" type="number" name="total[]" readonly ></td></tr>');
x++;
return false;
});
});
</script>
The following is the form I have.
<table id="InputsWrapper">
<tr>
<span class="small">Add More Field</span></tr>
<tr>
<td><label for='item'>Item:</label></td><td><label for='qty'>Quantity:</label></td><td><label for='price'>Price:</label></td><td><label for='discount'>Discount</label></td><td><label for='vat'>VAT</label></td><td><label for='total'>Final Price:</label></td>
</tr>
<tr>
<td><input class='item' type='text' name='item[]'></td>
<td><input class='qty' type='number' name='qty[]'></td>
<td><input class='price' type='number' name='price[]'></td>
<td><input class='discount' type='number' name='discount[]'>%</td>
<td><input class='total' type='number' name='total[]' readonly></td>
</tr>
<tr>
<td><input id='totaldp' type='number' name='totaldp' readonly</td>
</tr>
</table>
Now, I need to have an extra field called tax, which will be fetched using a drop down populated from a database with tax values. I need this tax value also to be displayed against each item as a dropdown
ITEM | QUANTITY | PRICE | DISCOUNT | TAX | TOTAL
This is the code I use to make the dropdown in the form
<td>
<?php
$query = mysqli_query($con, "SELECT * FROM `tax`");
echo '<select name="vat" class="vat">';
while ($row = mysqli_fetch_array($query)) {
echo '<option value="' . $row['tax_rate'] . '">' . $row['tax'] . '</option></br>';
}
echo '</select>';
?>
</td>
And in the script, I add class="vat" type="number" name="vat[]"
MY PROBLEMS:
Doing this way, I get the dropdown only once. Clicking the 'add more' field gives only an empty dropdown.
If anyone could help, let me know how.
I think this is very inefficient and stupid way of doing it, so if there is a better way, please let me know.

Please share how do you add the select to the append code. It seems that you are making something wrong there.
So i would recommend you this first the html and php:
<table id="InputsWrapper">
<tr>
<span class="small"><a onclick="addRow();" id="AddMoreFileBox" class="btn btn-info">Add More Field</a></span></tr>
<tr>
<td><label for='item'>Item:</label></td><td><label for='qty'>Quantity:</label></td><td><label for='price'>Price:</label></td><td><label for='discount'>Discount</label></td><td><label for='vat'>VAT</label></td><td><label for='total'>Final Price:</label></td>
</tr>
<tr>
<td><input class='item' type='text' name='item[]'></td>
<td><input class='qty' type='number' name='qty[]'></td>
<td><input class='price' type='number' name='price[]'></td>
<td><input class='discount' type='number' name='discount[]'>%</td>
<td>
<?php
$query = mysqli_query($con, "SELECT * FROM `tax`");
echo '<select name="vat" class="vat">';
while ($row = mysqli_fetch_array($query)) {
echo '<option value="' . $row['tax_rate'] . '">' . $row['tax'] . '</option></br>';
}
echo '</select>';
?>
</td>
<td><input class='total' type='number' name='total[]' readonly></td>
</tr>
<tr>
<td><input id='totaldp' type='number' name='totaldp' readonly</td>
</tr>
Note that for the "Add more button" i use a javascript function:
<script type="text/javascript"><!--
var module_row = <?php echo $module_row; ?>;
function addRow() {
html = '<tr>';
html+= '<td><input class='item' type='text' name='item[]'></td>';
html+= '<td><input class='qty' type='number' name='qty[]'></td>';
html+= '<td><input class='price' type='number' name='price[]'></td>';
html+= '<td><input class='discount' type='number' name='discount[]'>%</td>';
<?php $query = mysqli_query($con, "SELECT * FROM `tax`"); ?>
html += '<select name="vat" class="vat">';
<?php while ($row = mysqli_fetch_array($query)) { ?>
html += '<option value="<?php echo $row['tax_rate']; ?>">';
html += $row['tax'];
html += '</option></br>';
<?php } ?>
html += '</select>';
html+= '<td><input class='total' type='number' name='total[]' readonly></td>';
html+= '</tr>';
module_row++;
$(InputsWrapper).append(html);
}
//--></script>
I am very sorry for the code format and that there is no code check, but i am in work and have no time. If you can remove the js and code mistakes i did, it should work fine. If not i can make you a better solution when i am back home.