We Keep Coding

Set Table Cell Value and Hidden Input

I have a web form that allows users to enter details for creating a shipping consignment for 1 more more items. They enter the address from/to fields and then there's a table where they can enter 1 or more rows for items to be included on the shipment.
One of the table columns is for the Product ID, which is a value that is returned from a database query performed when entering a code in another table cell. We don't want users entering/editing this so we're including this as a hidden input but we would also like to display this to the user.
Here's what one of the table rows looks like:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table id="shipmentItems" class="table table-condensed table-striped table-bordered">
<thead>
<th class="text-center" scope="col" width="15%">Product ID</th>
<th class="text-center" scope="col" width="15%">Product Code</th>
<th class="text-center" scope="col" width="10%">Qty</th>
<th class="text-center" scope="col" width="55%">Description</th>
<th class="text-center" scope="col" width="5%"></th>
</thead>
<tbody>
<tr>
<td><input type="hidden" class="form-control productID" name="productID[]" value=""></td>
<td><input type="text" class="form-control productCode" autocomplete="off" placeholder="Product Code" name="productCode[]" value=""></td>
<td><input type="text" class="form-control qty" autocomplete="off" placeholder="Qty" name="qty[]" value=""></td>
<td class="description"></td>
<td class="text-center deleteRow"><span class="glyphicon glyphicon-trash"></span></td>
</tr>
When the user enters the Product Code value an AJAX request is performed to do the database query and I then use the following to update the other cells:
$this.closest('tr').children('.form-control.productID').html(productID);
$this.closest('tr').find('.form-control.productID').val(productID);
$this.closest('tr').children('.description').html(description);
The last two are updating correctly (hidden productID input value) and the description, but the value for the Product ID cell is remaining empty. I'm assuming I can have a hidden input value and a non input value for the same table cell at the same time and update both separately?

$this.closest('tr').children('.form-control.productID').html(productID);
This attempts to set the HTML of your inputs (all of them in the row). But text and hidden inputs have no HTML, only a value.
I think you're actually trying to set the HTML of the table cells, which you can do like so:
$this.closest('tr').find('td').html(productID);
Note that (like your existing code) this will match every td; judging by the table headers you really only want to match the first one:
$this.closest('tr').find('td').first().html(productID);
Note 2 that this is a bit fragile, and will break if your table structure changes. It would be safer to add a class to the cell you want to update, eg <td class='product_id'>, and target that with your selector.
$('.productCode').on('keyup', function() {
let productID = 42;
$(this).closest('tr').find('td').first().html(productID);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Type a letter in product code field to simulate your AJAX call:</p>
<table border=1>
<thead>
<th>Product ID</th>
<th>Product Code</th>
<th>Qty</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td><input type="hidden" class="form-control productID" name="productID[]" value=""></td>
<td><input type="text" class="form-control productCode" autocomplete="off" placeholder="Product Code" name="productCode[]" value=""></td>
<td><input type="text" class="form-control qty" autocomplete="off" placeholder="Qty" name="qty[]" value=""></td>
<td class="description"></td>
</tr>

Enable textbox withing a loop when checked

How can i enabled my textbox within a loop when it check the checkbox?. Can you help me guys how to do it.
<table class="table table-bordered table-hover mt-2">
<thead>
<tr>
<th>Select</th>
<th>Duties and Responsibilities</th>
<th>Weight of Duties</th>
<th>Rate of Department Head</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
#for (int x = 0; x <= 7; x++)
{
<tr>
<td><input type="checkbox" class="form-control" /></td>
<td><input type="text" name="JdDescription" class="form-control" disabled/></td>
<td><input type="text" readonly name="WeightofDuties" class="form-control" /></td>
<td><input type="text" name="RateofHead" class="form-control" disabled/></td>
<td><input type="text" name="Remarks" class="form-control" disabled/></td>
</tr>
}
</tbody>
</table>

Fetch the parent <tr> element upon clicking a checkbox, then enable text inputs within this <tr> node:
$('input[type=checkbox]').change(function () {
var disabled = this.checked ? '' : 'disabled';
$(this).parents('tr').find('input[type=text]').prop('disabled', disabled);
});
This will also disable the input[type=text] fields again upon unchecking the checkbox. If you only want to enable a specific text field, modify the argument of .find('input[type=text]') selector accordingly.
If you also want to toggle the readonly text field, do it like so:
$(this).parents('tr').find('input[name="WeightofDuties"]')
.attr('readonly', !this.checked);

How to pick the date using date picker in dynamic table?

My problem is how to use date picker in dynamic rows of the column.
I have used date picker in input text field,but it appears only in first row of the date column.
By selecting the date the date is not selected.
<table class="table table-bordered table-striped table-xxs" id="tb3">
<thead>
<tr>
<th></th>
<th>Bank Name</th>
<th>Chq No</th>
<th>Chq Date</th>
<th>Amount</th>
<th></th>
</tr>
</thead>
<tbody>
<tr >
<td><a href='javascript:void(0);' class='remove3'><span class='glyphicon glyphicon-remove'></span></a></td>
<td>
<input style="width:100px" type="text" id="Product_Code" class="form-control input-xs Product_Code "name="name[]"></td>
<td ><input style="width:100px" type="text" id="Product_Name" class="form-control input-xs" name = "no[]" > </td>
<td><input type="text" class="form-control input-xs datepicker-dates" placeholder="Pick a date…" id="TDate" name="TDate" value="<?php echo date('d/m/Y') ?>"</td>
<td><input style="width:80px" type="text" id="Rate" class="form-control input-xs" value="" name="rate[]"></td>
<td><a href="javascript:void(0);" style="font-size:18px;" id="addMore3" title="Add More Person"><span class="glyphicon glyphicon-plus"></td>
</tr>
</tbody>
</table>
This is table code...........
<script>
$(function(){
$('#addMore3').on('click', function() {
var data = $("#tb3 tr:eq(1)").clone(true).appendTo("#tb3");
data.find("input").val('');
});
$(document).on('click', '.remove3', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>0) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
}
});
});
</script>
This is javascript code for creating dynamic rows and columns.

try this:
<input type="text" name="TDate" class="form-control" value="" id="datepicker">
<script type="text/javascript">
$(function () {
$('#datepicker').datepicker();
});</script>

Detect html table cell value change

How am I able to detect change in html table on any cell? Currently I can only detect change in one cell, I could repeat the same code for all table cell ID but wondering if there is an efficient way.
Note that I have other inputs in my form and only wish to detect ones relevant to the table below:
Code:
html:
<table id="myTable" border="1" data-mini="true" >
<tbody>
<tr>
<th>Drawing Number</th>
<th>Description</th>
<th>Sheet Number</th>
<th>Issue</th>
</tr>
<tr>
<td><input name="drawing-n-1" id="drawing-n-1" type="text" /></td>
<td><input name="drawing-d-1" type="text" /></td>
<td><input name="drawing-s-1" type="text" /></td>
<td><input name="drawing-i-1" type="text" /></td>
<td><input name="drawing-n-2" id="drawing-n-2" type="text" /></td>
<td><input name="drawing-d-2" type="text" /></td>
<td><input name="drawing-s-2" type="text" /></td>
<td><input name="drawing-i-2" type="text" /></td>
</tr>
</tbody>
</table>
javascript:
var drawing_input = 'drawing-n-1';
$('#'+drawing_input).change(function(e) {
alert("aha");
var data = $('#'+drawing_input).val();
});

With jQuery you needn't be so specific. Just change the selector to listen for all <input>s.
$('input').on('change',
This selector will pick every <input> on the page.
Or if you need to isolate the table's inputs, add the table's id in the selector.
$('#xTable input').on('change'...
This selector will pick every <input> within the table.
Saw that you needed only to listen for inputs with ids. If so then you can use the brackets and ^=:
$("#xTable input[id^='drawing-n-']").on('change'....
This means get any <input> that has an [ id that starts ^= with "drawing-n-" ] which is in a <table> with the id of xTable.
That selector will pick only input#drawing-n-1 and input#drawing-n-2
Demo
$("#xTable input[id^='drawing-n-']").on('change', function(e) {
var data = $(this).val();
console.log(data);
});
<table id="xTable" border="1" data-mini="true">
<tbody>
<tr>
<th>Drawing Number</th>
<th>Description</th>
<th>Sheet Number</th>
<th>Issue</th>
</tr>
<tr>
<td><input name="drawing-n-1" id="drawing-n-1" type="text" /></td>
<td><input name="drawing-d-1" type="text" /></td>
<td><input name="drawing-s-1" type="text" /></td>
<td><input name="drawing-i-1" type="text" /></td>
<td><input name="drawing-n-2" id="drawing-n-2" type="text" /></td>
<td><input name="drawing-d-2" type="text" /></td>
<td><input name="drawing-s-2" type="text" /></td>
<td><input name="drawing-i-2" type="text" /></td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

event delegation
$("tbody").on("change", "input", function () {
console.log(this.name, this.value)
});

How to load HTML table in div container? JQuery/JavaScript

I have navigation bar with two items so far. This can have more item potentially but for now I just need two. When user opens the page I want to load the content of the first item in my navigation bar. Each item has separate table. So on load first table should be loaded on the page. If user click on the different link I want that to show on the screen. I'm not sure what is the best approach/solution for this problem. Here is my HTML code:
<div class="container">
<section class="mainBox">
<h3>Home Page</h3>
<nav class="xNavigation">
Info 1 |
Info 2 |
</nav>
<div id="dataContainer">
//Here I want to load the tables
</div>
</section>
</div>
I already have built the tables on the page:
<table class="tab1Class" id="tab1Tbl">
<caption>Info 1</caption>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>DOB</th>
</tr>
<tr>
<td><input type="text" name="lname" id="lname" value="" size="20" maxlength="30" readonly /></td>
<td><input type="text" name="fname" id="fname" value="" size="20" maxlength="30" readonly /></td>
<td><input type="text" name="dob" id="dob" value="" size="10" maxlength="10" readonly /></td>
</tr>
</table>
<table class="tab2Class" id="tab2Tbl">
<caption>Info 2</caption>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>DOB</th>
</tr>
<tr>
<td><input type="text" name="lname2" id="lname2" value="" size="20" maxlength="30" readonly /></td>
<td><input type="text" name="fname2" id="fname2" value="" size="20" maxlength="30" readonly /></td>
<td><input type="text" name="dob2" id="dob2" value="" size="10" maxlength="10" readonly /></td>
</tr>
</table>
On page load I want to load first table. After that based on the users choice I want to load second table. In that case I'm not sure if table should be removed from the container or set to hide?
Here is my idea but that did not work:
function openTab(tblID){
$('.xNavigation a').each(function(i){
if(this.id == tblID){
$('#'+tblID).show();
}else{
$(this.id).hide();
}
});
}
If anyone can help with this problem please let me know.

Instead of adding unique ids for the tables, you could give them a data-id that matches the nav item's id and toggle based on that:
JS Fiddle
Simplify the JS
$('.xNavigation a').on('click', function() {
var id = $(this).prop('id');
$('#dataContainer > table[data-id=' + id + ']').show();
$('#dataContainer > table:not([data-id=' + id + '])').hide();
});
Start off by putting both tables where they belong, but hide the tables you don't want shown like:
CSS
#dataContainer > table:not([data-id="tab1"]) {
display: none;
}
HTML
<div class="container">
<section class="mainBox">
<h3>Home Page</h3>
<nav class="xNavigation">
Info 1 |
Info 2 |
</nav>
<div id="dataContainer">
<table class="tab1Class" data-id="tab1">
<caption>Info 1</caption>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>DOB</th>
</tr>
<tr>
<td>
<input type="text" name="lname" id="lname" value="" size="20" maxlength="30" readonly />
</td>
<td>
<input type="text" name="fname" id="fname" value="" size="20" maxlength="30" readonly />
</td>
<td>
<input type="text" name="dob" id="dob" value="" size="10" maxlength="10" readonly />
</td>
</tr>
</table>
<table class="tab2Class" data-id="tab2">
<caption>Info 2</caption>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>DOB</th>
</tr>
<tr>
<td>
<input type="text" name="lname2" id="lname2" value="" size="20" maxlength="30" readonly />
</td>
<td>
<input type="text" name="fname2" id="fname2" value="" size="20" maxlength="30" readonly />
</td>
<td>
<input type="text" name="dob2" id="dob2" value="" size="10" maxlength="10" readonly />
</td>
</tr>
</table>
</div>
</section>
</div>

Put your tables inside the div #dataContainer. No need to load them there, just show/hide the ones you want.
Give all tables the css class 'tabTable', and give the first one an extra class called 'active'
Each table already has a unique id, so nothing to do here, but it is important that they have one.
Use css to hide all elements with the tabTable class
Give all links that will cause tabs to change the class of tabLink and the attribute of data-opens="[id-of-table]" where [id-of-table] is the unique id of the table it opens.
Use the below JS
Here's a JSfiddle
JS
$(document).ready(function () {
$(document).on('click', '.xNavigation a.tabLink', function (evt) {
evt.preventDefault();
var opens = $(evt.target).data('opens');
$('.tabTable').removeClass('active');
var el = $('#' + opens).addClass('active');
});
});
CSS
.tabTable { display: none }
.tabTable.active {display: table} /* Cause we're using tables not divs */
HTML
<div class="container">
<section class="mainBox">
<h3>Home Page</h3>
<nav class="xNavigation">
Info 1 |
Info 2 |
</nav>
<div id="dataContainer">
<table class="tabTable active" id="tab1Tbl">
<caption>Info 1</caption>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>DOB</th>
</tr>
<tr>
<td><input type="text" name="lname" id="lname" value="" size="20" maxlength="30" readonly /></td>
<td><input type="text" name="fname" id="fname" value="" size="20" maxlength="30" readonly /></td>
<td><input type="text" name="dob" id="dob" value="" size="10" maxlength="10" readonly /></td>
</tr>
</table>
<table class="tabTable" id="tab2Tbl">
<caption>Info 2</caption>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>DOB</th>
</tr>
<tr>
<td><input type="text" name="lname2" id="lname2" value="" size="20" maxlength="30" readonly /></td>
<td><input type="text" name="fname2" id="fname2" value="" size="20" maxlength="30" readonly /></td>
<td><input type="text" name="dob2" id="dob2" value="" size="10" maxlength="10" readonly /></td>
</tr>
</table>
</div>
</section>
</div>

1.) Place both tables inside a hidden div.
2.) Call openTab with the table-id (tab1Tbl or tab2Tbl).
openTab(tabId):
1.) If there is a table in #dataContainer move him to the hidden div.
2.) Get the table with #tabId from the hidden div and move it to #dataContainer.