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>
Related
**This is the code i currently come up with I wanted to populate price and tax files from data- attributes **
<table class="table g-5 gs-0 mb-0 fw-bolder text-gray-700" id="tab_logic">
<!--begin::Table head-->
<thead>
<tr class="border-bottom fs-7 fw-bolder text-gray-700 text-uppercase">
<th class="min-w-50px w-50px">#</th>
<th class="min-w-300px w-475px">Item</th>
<th class="min-w-100px w-100px">QTY</th>
<th class="min-w-100px w-100px">Price</th>
<th class="min-w-100px w-100px">Tax</th>
<th class="min-w-100px w-100px text-end">Total</th>
<th class="min-w-75px w-75px text-end">Action</th>
</tr>
</thead>
<!--end::Table head-->
<!--begin::Table body-->
<tbody>
<tr class="border-bottom border-bottom-dashed" id='addr1'>
<td class="pt-8 text-nowrap rowid" >1</td>
<td class="pe-7">
<select class="form-control form-control-solid itemname" name="itemname[]">
#foreach($items as $item)
<option data-rate="{{$item->item_price }}" data-tax="{{$item->item_tax }}">{{$item->item_name}}</option>
#endforeach
</select>
</td>
<td class="ps-0"><input type="number" class="form-control form-control-solid qty" min="1" name="quantity[]" placeholder="0" /></td>
<td><input type="number" class="form-control form-control-solid price" name="price[]" min="1" placeholder="0.00" /></td>
<td><input type="number" class="form-control form-control-solid text-end tax" name="tax[]" min="0" placeholder="0.00" /></td>
<td><input type="text" class="form-control form-control-solid text-end total" name="total[]" min="1" placeholder="0.00" /></td>
<td class="pt-5 text-end">
<button class="btn btn-sm btn-icon btn-active-color-primary" id="removeRow">Remove</button>
</td>
</tr>
</tbody>
</table>
Add dynamic rows to the table
<script>
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){b=i-1;
$('#addr'+i).html($('#addr'+b).html()).find('td:first-child').html(i+1);
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$(document).on('click', '#removeRow', function () {
if(i>1){
$(this).parent().parent().remove();
i--;
}
calc();
});
</script>
Populate price and tax fields from data attributes
<script>
$(document).ready(function() {
$('tr .itemname').change(function(){
var selected = $('option:selected', this);
// this should now output the correct product name and its rate.
console.log(selected.data('tax'), selected.data('rate') );
// now to add it to rate field within this TR
$(this).parent().parent().find('.price').val( selected.data('rate') );
$(this).parent().parent().find('.tax').val( selected.data('tax') );
});
});
</script>
When select the item first row data populate correctly. However when dynamically add a new row to table and select item its not getting the price and tax values.
I´m not quite sure if this will actually fix it but there is 1 obvious error in your code.
this line
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
appends the tr´s to the table but it should append the tr´s to tbody, so change it to
$('#tab_logic tbody').append('<tr id="addr'+(i+1)+'"></tr>');
i guess your .parent().parent()... works for the first item correctly because it´s in tbody and for the new added not
I enter data from text field to html table rows by using JavaScript. Then I need to save them in a mysql table one by one. so I want to know how to save them to database.
I put the coding below.
function addRow() {
var table = document.getElementById("tbody");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var items = document.getElementById("item").value;
var suppliers = document.getElementById("supplier").value;
var quantities = document.getElementById("quantity").value;
var grnprices = document.getElementById("grnprice").value;
if (items == "", suppliers == "", quantities == "", grnprices == "") {
alert("Please fill the Required Field");
} else {
var values = parseInt(document.getElementById('rawno').value, 10);
values = isNaN(values) ? 0 : values;
values++;
document.getElementById('rawno').value = values;
var total = quantities * grnprices;
row.insertCell(0).innerHTML = values;
row.insertCell(1).innerHTML = items;
row.insertCell(2).innerHTML = suppliers;
row.insertCell(3).innerHTML = quantities;
row.insertCell(4).innerHTML = "Rs. " + grnprices;
row.insertCell(5).innerHTML = "Rs. " + total;
row.insertCell(6).innerHTML = '<button type ="button" class="btn btn-danger" onClick="Javacsript:deleteRow(this)"> <i class="fa fa-trash-o"></i></button>';
}
}
<table class="table table-striped">
<thead>
<tr>
<th scope="col" width="200">Item</th>
<th scope="col" width="200">Supplier</th>
<th scope="col" width="200">Quantity</th>
<th scope="col" width="200">GRN Price</th>
<th scope="col" width="50"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" min="0" class="form-control" name="item" id="item">
</td>
<td>
<input type="number" min="0" class="form-control" name="supplier" id="supplier">
</td>
<td>
<input type="number" min="1" class="form-control" name="quantity" id="quantity">
</td>
<td>
<input type="number" min="0" class="form-control" name="grnprice" id="grnprice">
</td>
<td>
<input type="button" class="btn btn-info" id="add" value="Add" onclick="Javascript:addRow()">
</td>
<td>
<input type="hidden" name="rawno" id="rawno">
</td>
</tr>
</tbody>
</table>
</div>
<table class="table" id="myTableData">
<thead>
<tr>
<th>No</th>
<th>Item</th>
<th>Supplier</th>
<th>Quantity</th>
<th>GRN Price</th>
<th>Total</th>
<th></th>
</tr>
</thead>
<tbody id="tbody">
<tr></tr>
</tbody>
</table>
<button type="button" class="btn btn-success" onclick="grnConfirmation()">Save</button>
Can anyone show an example.
First of all, you need to group all the input data which you want to save in database to a form which pointed to the controller method. Then the controller will do all the job.
Assuming you write the front-end in blade file : create.blade.php
<form method="POST" action="ItemInfoController#store">
<input type="text" min="0" class="form-control" name="item" id="item">
<input type="number" min="0" class="form-control" name="supplier" id="supplier">
<input type="number" min="1" class="form-control" name="quantity" id="quantity">
<input type="number" min="0" class="form-control" name="grnprice" id="grnprice">
<input type="submit" value="submit">
</form>
In ItemInfoController.php :
public function store(Request $request) {
// This will add the data from input to the database.
// You can change the query builder as you need.
DB::table('item')->insert(['item' => $request->item,
'supplier' => $request->supplier,
'quantity' => $request->quantity]);
}
If you want to use Eloquent you can just change the DB query with the model you use.
Example : ItemInfo::create($request);
I have added new rows dynamically with jQuery and applied a function but I want to apply this differently for each row. right now its applying commonly for every rows.
HTML code:
<button type="button" id="addBankRow" >add</button>
<table class="table table-bordered" id="dynamic_field_bank">
<thead>
<tr>
<th width="10%">Deposit Date</th>
<th width="10%">Deposit Method</th>
<th width="25%">Bank Title</th>
<th width="25%">Account No</th>
<th width="20%">Deposit Amount</th>
<th width="10%">#</th>
</tr>
</thead>
<tbody>
<tr class="bank_deposit">
<td><p>12/10/17</p></td>
<td>
<select class="form-control" id="deposit_method">
<option>Bank</option>
<option>Vault</option>
</select>
</td>
<td><input id="bank_title" name="bank_title" required="required" type="text"></td>
<td>
<select class="form-control" id="bank_ac_no">
<option>151035654646001</option>
<option>151035654646002</option>
<option>151035654646003</option>
</select>
</td>
<td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0"></td>
<td>
</td>
</tr>
</tbody>
</table>
Jquery Codes:
var i=1;
$('#addBankRow').click(function(){
i++;
$('#dynamic_field_bank').append('<tr id="row'+i+'" class="dynamic-added" ><td><p>12/10/17</p></td><td><select class="form-control" id="deposit_method"><option>Bank</option><option>Vault</option></select></td><td><input id="bank_title" name="bank_title" required="required" type="text"></td><td><select class="form-control" id="bank_ac_no"><option>151035654646001</option><option>151035654646002</option><option>151035654646003</option></select></td><td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0"></td><td>X</td></tr>');
});
$(document).on('click', '.btn_remove', function(e){
e.preventDefault();
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("tbody").on('change', "#deposit_method", function() {
if ($(this).val() == 'Vault'){
$('#bank_title, #bank_ac_no').hide();
}
else if ($(this).val() == 'Bank'){
$("tr.bank_deposit").each(function (){
$('#bank_title, #bank_ac_no').show();
});
}
});
When I am changing the deposit method I want to hide/show the two fields in each row but its applying in every row.
see the demo with codes:
https://jsfiddle.net/wasid/33qp9ewn/3/
You can add an attribute (like row-id) for inputs to determine which row has been processed. I modified HTML and Javascript codes. Also, you can take a look modifed codes as Fiddle Demo
HTML
<button type="button" id="addBankRow" >add</button>
<table class="table table-bordered" id="dynamic_field_bank">
<thead>
<tr>
<th width="10%">Deposit Date</th>
<th width="10%">Deposit Method</th>
<th width="25%">Bank Title</th>
<th width="25%">Account No</th>
<th width="20%">Deposit Amount</th>
<th width="10%">#</th>
</tr>
</thead>
<tbody>
<tr class="bank_deposit">
<td><p>12/10/17</p></td>
<td>
<select class="form-control" id="deposit_method" row-id="0">
<option>Bank</option>
<option>Vault</option>
</select>
</td>
<td><input id="bank_title" name="bank_title" required="required" type="text" row-id="0"></td>
<td>
<select class="form-control" id="bank_ac_no" row-id="0">
<option>151035654646001</option>
<option>151035654646002</option>
<option>151035654646003</option>
</select>
</td>
<td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0" row-id="0"></td>
<td>
</td>
</tr>
</tbody>
</table>
Javascript;
var i=1;
$('#addBankRow').click(function(){
i++;
$('#dynamic_field_bank').append('<tr id="row'+i+'" class="dynamic-added" ><td><p>12/10/17</p></td><td><select class="form-control" id="deposit_method" row-id="'+i+'"><option>Bank</option><option>Vault</option></select></td><td><input id="bank_title" name="bank_title" required="required" type="text" row-id="'+i+'"></td><td><select class="form-control" id="bank_ac_no" row-id="'+i+'"><option>151035654646001</option><option>151035654646002</option><option>151035654646003</option></select></td><td><input id="deposit_amount" name="deposit_amount" required="required" type="number" min="0" row-id="'+i+'"></td><td>X</td></tr>');
});
$(document).on('click', '.btn_remove', function(e){
e.preventDefault();
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$("tbody").on('change', "#deposit_method", function() {
var rowId = $(this).attr("row-id");
if ($(this).val() == 'Vault'){
$("#bank_title[row-id='"+rowId+"'], #bank_ac_no[row-id='"+rowId+"']").hide();
}
else if ($(this).val() == 'Bank'){
$("#bank_title[row-id='"+rowId+"'], #bank_ac_no[row-id='"+rowId+"']").show();
}
});
I am trying to do Sum on oninput method. Means as the button press the function will be called and show sum of two input in a paragraph <p> tag.
I have my javascript function like this:
quote:function(){
var button = document.getElementById('insert');
var table = document.getElementById('table');
$("#insert").click(function(){
var position=Math.round(table.rows.length - 3);
var row = table.insertRow(position);
var i=1;
row.innerHTML = '<td><input type="integer" name="qty[]" class="form-control" id="qty_' +position +'" oninput="myFunction(demo'+position+', event)"></td><td><input type="text" name="discription[]" class="form-control"></td><td><input type="text" name="price[]" class="form-control" placeholder="0.00" id="price_'+ position+'" oninput="myFunction(demo'+position+', event)"></td><td><input type="text" name="discount[]" class="form-control" placeholder="0.00"><td><input type="text" name="discountper[]" class="form-control" placeholder="0.00%"></td></td><td><p id="demo'+position+'"></p></td><td><input type="checkbox" name="taxed[]" class="form-control"></td> <td><a class="btn btn-circle red-haze btn-sm" href="javascript:void(0);" id="remCF"><i class="fa fa-times"></i></a></td>';
$("#remCF").live('click',function(){
$(this).parent().parent().remove();
});
});
},
After append it looks like this.
I would like to calculate Total Amount using quantity * price.
But i am not able to do that. It seems like Rows are appending fine. But when i try to call the function i am unable to specify the text are in the myFunction.
here is how myFuntion looks like:
function myFunction(place, event) {
var x =parseInt(document.getElementById(event.target.id).value); <!----now the problem is here i am not able to specify what QTY is clicked and which input is clicked -->
var y= parseInt(document.getElementById(event.target.id).value); <!----now the problem is here i am not able to specify what PRICE is clicked and which input is clicked -->
var z=x*y;
document.getElementById(place).innerHTML = z;
}
I would like to perform calculation row wise.
And if for reference if you want to know how my HTML looks then here is how it looks like.
<table class="table table-striped table-bordered table-hover" id="sample_3">
<thead>
<tr>
<th style="width:7%;">
Qty
</th>
<th style="width:50%;">
Description
</th>
<th style="width:10%;">
Unit Price
</th>
<th style="width:10%;">
Discount(Rs/$)
</th>
<th style="width:10%;">
Discount%
</th>
<th style="width:7%;">
Total
</th>
<th style="width:2%;">
Taxed
</th>
<th style="width:2%;">
Action
</th>
</tr>
</thead>
<tbody id="table">
<tr class="odd gradeX" id="p_scents" name="p_scnt">
<td>
<input type="integer" name="qty[]" class="form-control" value="1" id="myInput1" oninput="myFunction('demo', event)" >
</td>
<td>
<input type="text" name="discription[]" class="form-control">
</td>
<td>
<input type="text" name="price[]" class="form-control" placeholder="0.00" id="myInput2" oninput="myFunction('demo', event)">
</td>
<td>
<input type="text" name="discount[]" class="form-control" placeholder="0.00">
</td>
<td>
<input type="text" name="discountper[]" class="form-control" placeholder="0.00%">
</td>
<td>
<p id="demo"></p>
</td>
<td>
<div align="center"><input type="checkbox" name="taxed[]" class="form-control"></div>
</td>
<td></td>
</tr><!-- to add new column -->
<tr>
<td colspan="4" >
<div align="right">
<b>Sub Total:</b>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="6" >
<a id="insert">Add a New Service</a><br>
<a id="ajax-demo" data-toggle="modal">
Predifined Services </a><td>
</tr>
</tbody>
</table>
here is the Jsfiddle link:
https://jsfiddle.net/5xaaneor/2/
Thank you!
I've following HTML table:
<table id="blacklistgrid_1" class="table table-bordered table-hover table-striped">
<thead>
<tr id="jumbo">
<th style="vertical-align:middle">Products</th>
<th style="vertical-align:middle">Pack Of</th>
<th style="vertical-align:middle">Quantity</th>
<th style="vertical-align:middle">Volume</th>
<th style="vertical-align:middle">Unit</th>
<th style="vertical-align:middle">Rebate Amount</th>
</tr>
</thead>
<tbody class="apnd-test">
<tr id="reb1_1">
<td><input type="text" name="pack[1]" id="pack_1" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[1]" id="quantity_1" value="" class="form-control" size="8"/></td>
<td><input type="text" name="volume[1]" id="volume_1" value="" class="form-control" size="8"/></td>
<td><input type="text" name="amount[1]" id="amount_1" value="" class="form-control" size="9"/></td>
</tr>
</tbody>
<tfoot>
<tr id="reb1_2">
<td><button style="float:right; margin-bottom: 20px" class="products" type="button" class="btn btn-default" onclick=""> Add</button></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
Now I want to get the id of first row from . The id in this case is reb1_1. For getting it I tried below code but it didn't work.
$(document).ready(function() {
$('.products').click(function () {
var row = $(this).closest('table tbody:tr:first').attr('id');
alert(row);
});
});
Thank you.
first go to table tbody then find tr then filter first row like below
var row = $(this).closest('table').find(' tbody tr:first').attr('id');
or can try
var row = $(this).closest('table').find(' tbody tr:eq(0)').attr('id');
reference :first and :eq
Make changes as shown in demo :-
http://jsfiddle.net/avmCX/38/
$(document).ready(function() {
$('.products').click(function () {
var row = $(this).closest('table').find('tbody tr:first').attr('id');
alert(row);
});
});
For more info have a look here :-
http://api.jquery.com/first/
change your function to this:
$(document).ready(function() {
$('.products').click(function () {
var id = $(this).closest("table").find("tbody>tr").first().attr("id");
alert(id);
});
});
this will show you the id.