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>
Related
So I need to calculate the sum of input values for each input cell and show it dynamically to the last cell of the row. Refer following image
In the above image the number of products can vary so rows generated are not fixed
Now as shown in the image I need to update the value of final amount for each row dynamically using input available for each row's cells
I am attaching HTML code for the table:
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Product Category</th>
<th scope="col">Sub Category</th>
<th scope="col">Master Category</th>
<th scope="col">Product Weight</th>
<th scope="col">Labour</th>
<th scope="col">Price</th>
<th scope="col">SGST (In %)</th>
<th scope="col">CGST (In %)</th>
<th scope="col">Discount</th>
<th scope="col">Final Amount</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of _selectedProductsData;index as i">
<th scope="row">{{i+1}}</th>
<td>{{item.productCategory}}</td>
<td>{{item.subCategory}}</td>
<td>{{item.masterCategory}}</td>
<td>{{item.productWeight}} gms</td>
<td>
<input class="form-control labourInput" type="number" id="{{item.productGuid}}-labour"
placeholder="Enter Labour">
</td>
<td>
<input class="form-control priceInput" type="number" id="{{item.productGuid}}-price"
placeholder="Enter Price">
</td>
<td>
<input class="form-control sgstInput" type="number" id="{{item.productGuid}}-SGST"
placeholder="Enter SGST">
</td>
<td>
<input class="form-control cgstInput" type="number" id="{{item.productGuid}}-CGST"
placeholder="Enter CGST">
</td>
<td>
<input class="form-control discountInput" type="number"
id="{{item.productGuid}}-discount" placeholder="Enter Discount">
</td>
<td>
{{calculateTotalAmountOfEachProduct(item.productGuid)}}
</td>
</tr>
</tbody>
</table>
each row (product) has its own productGuid
I've created method calculateTotalAmountOfEachProduct(productGuid:string) but it does not change the value it always shows 0 even when input value is changed
Following is the code for the same:
calculateTotalAmountOfEachProduct(productGuid:string):number {
let labourInput = Number((<HTMLInputElement>document.getElementById(`${productGuid}-labour`)).value)
let priceInput = Number((<HTMLInputElement>document.getElementById(`${productGuid}-price`)).value)
let sgstInput = Number((<HTMLInputElement>document.getElementById(`${productGuid}-SGST`)).value)
let cgstInput = Number((<HTMLInputElement>document.getElementById(`${productGuid}-CGST`)).value)
let discountInput = Number((<HTMLInputElement>document.getElementById(`${productGuid}-discount`)).value)
return labourInput+priceInput+sgstInput+cgstInput+discountInput
}
I am not sure how to achieve this in angular.
There are multiple ways of achieving what you are asking, you could do it using local references on each input, and then listening for the input event for changes in the values like the following:
This is just an example:
<table>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Labour</th>
<th scope="col">Price</th>
<th scope="col">SGST (In %)</th>
<th scope="col">CGST (In %)</th>
<th scope="col">Discount</th>
<th scope="col">Final Amount</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let d of data; let i = index">
<th>{{ i + 1 }}</th>
<th><input type="number" (input)="d.labor = getValue($event)" #labor [value]="d.labor" /></th>
<th><input type="number" (input)="d.price = getValue($event)" #price [value]="d.price" /></th>
<th><input type="number" (input)="d.sgst = getValue($event)" #sgst [value]="d.sgst" /></th>
<th><input type="number" (input)="d.cgst = getValue($event)" #cgst [value]="d.cgst" /></th>
<th><input type="number" (input)="d.discount = getValue($event)" #discount [value]="d.discount" /></th>
<th>
<!-->the plus sign is for casting from string to number<-->
<label
>{{ +labor.value + +price.value + +sgst.value + +cgst.value + +discount.value }}
</label>
</th>
</tr>
</tbody>
</table>
component
#Component({...})
export class DemoComponent {
data = [...] // some data
getValue(event: Event): number {
return Number((event.target as HTMLInputElement).value);
}
}
Here's the demo
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);
I want to save ( store ) some data from HTML input forms to DB.Json file when i click Insert button from html input form !
This is what i have HTML :
<table id="datatable" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
<th>Birthday</th>
<th>Action</th>
</tr>
</thead>
<tr>
<td><input type="text" name="first_name" id="first_name"></td>
<td><input type="text" name="last_name" id="last_name"></td>
<td><input type="text" name="age" id="age"></td>
<td><input type="text" name="birthday" id="birthday"></td>
<td><button type="button" onclick="insert1()">Insert</button></td>
</tr>
now when i fill all fields on html index and click the insert button need to save these data's on json file
First of all, place your <tr> inside <tbody> (it's always a good practice).
Now about your issue. You can't create a separate DB.json file with javascript, but you can create a JSON object and store values in that.
Then just build your Json Objectby getting balues by every input id
function insert1() {
myJson = {
first_name: $("#datatable").find("#first_name").val(),
last_name: $("#datatable").find("#last_name").val(),
age: $("#datatable").find("#age").val(),
birthday: $("#datatable").find("#birthday").val(),
};
console.log("myJson", myJson);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="datatable">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
<th>Birthday</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="first_name" id="first_name"></td>
<td><input type="text" name="last_name" id="last_name"></td>
<td><input type="text" name="age" id="age"></td>
<td><input type="text" name="birthday" id="birthday"></td>
<td><button type="button" onclick="insert1()">Insert</button></td>
</tr>
</tbody>
</table>
you can use axios to write in json file
simply it's an ajax wrapper
axios.post("json file path", jsonObject).then(
res => console.log(res); /// successfully writing in file
);
On select of the dropdown field: database I want to hide specific rows, but only the fields under database. How can I hide only part of the row while keeping others in place? I tried to use JQUERY and attach an ID to the row but the whole row was deleting, and I want to keep the right side.
I know I can do style visibility: hidden, but I want the rows to disappear and move up if the fields are not needed.
<tr>
<th>* Database</th>
<th class="th_background" style="border-right-style: groove;"><select id="database" class="form-control" name="database" onchange="database_details()">
<option value="oracle" selected="selected">Oracle</option>
<option value="mssql">Sql Server</option>
<option value="teraData">TeraData</option>
<option value="epic">Generic ODBC(Chronicles)</option>
<option value="sas">SAS</option>
</select>
</th>
<th class="th_background"><input type="radio" name="refreshTde"
value="yes" checked> <span data-toggle="tooltip"
title="This option creates new TDE or replaces existing TDE file with full data.">Full
Refresh <i class="fa fa-question-circle"></i></span></th>
<th class="th_background"><input type="radio" name="refreshTde"
value="no"> <span data-toggle="tooltip"
title="This option appends existing TDE. Should have same data items in the SQL.">Incremental
Refresh <i class="fa fa-question-circle"></i></span></th>
</tr>
<tr>
<th>* Service ID</th>
<th class="th_background"><input type="text" id="sidText"
name="sid" class="form-control" style="width: 100%" placeholder="Enter SID"></th>
<th colspan="2" style="background-color: #0072bc;"><span
style="color: white;">* SQL Query to Generate TDE</span></th>
I just want to hide and collapse this part:
<th>* Service ID</th>
<th class="th_background"><input type="text" id="sidText"
name="sid" class="form-control" style="width: 100%" placeholder="Enter SID"></th>
http://jsfiddle.net/wf7j5tn8/
If I'm understanding your question correctly, you should be able to just add a class to the elements you want to hide, then use that class to apply 'display: none' to those elements.
Here's your fiddle updated with what I mean.
And here's the relevant code from that fiddle:
HTML
<th class="hidden">* Service ID</th>
<th class="th_background hidden"><input type="text" id="sidText"
name="sid" class="form-control" style="width: 100%" placeholder="Enter
SID">
</th>
CSS
.hidden {
display: none;
}
You can attach classes to the rows, or just use whatever queryselector will work for you.
var options = document.querySelectorAll('option')
var headers = document.querySelectorAll('th')
options[3].style.display = "none"
headers[2].style.display = "none"
<link rel="stylesheet" href="http://www.w3schools.com/stdtheme.css" type="text/css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" type="text/css">
<table class="w3-table-all" style="width:100%">
<tbody><tr>
<th>Number</th>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>1</td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>3</td>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
<tr>
<td>4</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</tbody></table>
<select id="database" class="form-control" name="database" onchange="database_details()">
<option value="oracle" selected="selected">Oracle</option>
<option value="mssql">Sql Server</option>
<option value="teraData">TeraData</option>
<option value="epic">Generic ODBC(Chronicles)</option>
<option value="sas">SAS</option>
</select>
Exact Solution might be this
<th id="dataHide">* Service ID</th> <!-- add id dataHide to your th -->
//add these to js function
$("input#sidText").css("visibility", "hidden");
$("#dataHide").css("visibility","hidden");
I think this is what you want: http://jsfiddle.net/wf7j5tn8/7/
The other way is that you disable the field, I would not want to hide a feature from users, rather just disable it
$("input#sidText").prop('disabled','disabled');
HTML
<tr id="dataHide"> <!-- id assigned here to hide the the row -->
<th>* Service ID</th>
<th class="th_background"><input type="text" id="sidText" name="sid" class="form-control" style="width: 100%" placeholder="Enter SID"></th>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;">* SQL Query to Generate TDE</span></th>
</tr>
js/jQuery
function database_details() {
$("#dataHide").hide(); //hides the id (#) dataHide assigned to the TR, hence removing the whole row.
//give this id (dataHide) to any element you want to hide on change of select dropdown
}
This will work. Hope it solves your problem.
I have prepared table with server side script for column search, everything works fine, but stuck with one issue for responsive table,
Below is my table,
<table class="table table-striped table-bordered table-hover dt-responsive nowrap" width="100%" id="3table">
<thead>
<tr>
<th> ID</th>
<th>Number</th>
<th>Number1</th>
<th> Number2</th>
<th>Plant</th>
<th>Part</th>
<th>Description</th>
<th>Quantity</th>
<th>Date</th>
<th>To</th>
<th>Date3</th>
<th>Transport</th>
<th>Docket</th>
</tr>
</thead>
<thead>
<tr>
<td><input type="text" data-column="1" class="form-control" placeholder="Search"></td>
<td><input type="text" data-column="2" class="form-control" placeholder="Search"></td>
<td><input type="text" data-column="3" class="form-control" placeholder="Search"></td>
<td><input type="text" data-column="4" class="form-control" placeholder="Search"></td>
<td><input type="text" data-column="5" class="form-control" placeholder="Search"></td>
<td><input type="text" data-column="6" class="form-control" placeholder="Search"></td>
<td><input type="text" data-column="7" class="form-control" placeholder="Search"></td>
<td><input type="text" data-column="8" class="form-control" placeholder="Search"></td>
<td><input type="text" data-column="9" class="form-control" placeholder="Search"></td>
<td><input type="text" data-column="10" class="form-control" placeholder="Search"></td>
<td><input type="text" data-column="11" class="form-control" placeholder="Search"></td>
<td><input type="text" data-column="12" class="form-control" placeholder="Search"></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
I had kept another with for search box, then sending search value with below jquery code
// Apply the search
$('.form-control').on( 'keyup click', function () { // for text boxes
var i =$(this).attr('data-column'); // getting column index
var v =$(this).val(); // getting search input value
var table = $('#3table').DataTable();
table.columns(i).search(v).draw();
});
Now when i change resolution, search boxes are not changed resolution as other columns and rows, All search boxes are not wrapping, but showing in 1 row only. if i remove 2nd , then my datatable is completely responsive,means i can see + sign for first column for columns which are getting hidden.
How can i make search boxes responsive as well?
CAUSE
You have two thead elements, there should be only one.
SOLUTION
Combine two header rows under one thead element.
<table class="table table-striped table-bordered table-hover dt-responsive nowrap" width="100%" id="3table">
<thead>
<tr>
<th> ID</th>
<th>Number</th>
<th>Number1</th>
<th> Number2</th>
<th>Plant</th>
<th>Part</th>
<th>Description</th>
<th>Quantity</th>
<th>Date</th>
<th>To</th>
<th>Date3</th>
<th>Transport</th>
<th>Docket</th>
</tr>
<tr>
<th><input type="text" data-column="1" class="form-control" placeholder="Search"></th>
<th><input type="text" data-column="2" class="form-control" placeholder="Search"></th>
<th><input type="text" data-column="3" class="form-control" placeholder="Search"></th>
<th><input type="text" data-column="4" class="form-control" placeholder="Search"></th>
<th><input type="text" data-column="5" class="form-control" placeholder="Search"></th>
<th><input type="text" data-column="6" class="form-control" placeholder="Search"></th>
<th><input type="text" data-column="7" class="form-control" placeholder="Search"></th>
<th><input type="text" data-column="8" class="form-control" placeholder="Search"></th>
<th><input type="text" data-column="9" class="form-control" placeholder="Search"></th>
<th><input type="text" data-column="10" class="form-control" placeholder="Search"></th>
<th><input type="text" data-column="11" class="form-control" placeholder="Search"></th>
<th><input type="text" data-column="12" class="form-control" placeholder="Search"></th>
</tr>
</thead>
<tbody></tbody>
</table>
NOTES
There are other issues with your code:
ID should not start from a number, consider giving your table another ID
Your code for search boxes should be changed to:
// Prevent sorting when search boxes are clicked
$('#3table thead').on( 'click', '.form-control', function (e) { // for text boxes
e.stopPropagation();
});
// Perform column search
$('#3table thead').on( 'keyup change', '.form-control', function (e) {
var i = $(this).attr('data-column'); // getting column index
var v = $(this).val(); // getting search input value
var table = $('#3table').DataTable();
table.columns(i).search(v).draw();
});
Use orderCellsTop: true option to use top header row for sorting.
DEMO
See this jsFiddle for code and demonstration.
Responsive columns with
className="none"
from Gyrocode.com
UPDATED DEMO : jsFiddle