We Keep Coding

How to make the data available for all the rows in a table

My problem is the fetching is correctly works on first row
<script type="text/javascript">
$(document).ready(function () {
$("#tb3").on('input change', function () {
$('#tb3 > tbody > tr').each(function () {
var code = $(this).find('#Product_Code').val();
//var data = $("#tb3 tr:eq(1)").clone(true).appendTo("#tb3");
//var code = data.find("Product_Code").val('');
$.ajax({
type: "POST",
url: "<?php echo base_url();?>TipUp_Loan/fetch",
data: {
code: code
},
datatype: 'json',
success: function (data) {
var json = data,
obj = JSON.parse(json);
$("#Product_Name").val(obj.itemname);
$("#Rate").val(obj.salrate);
//alert(obj);
}
});
});
});
});
</script>
table code:
<table>
<thead>
<tr>
<th></th>
<th>Product Code</th>
<th>Product Name</th>
<th>Qty</th>
<th>Rate</th>
<th>Amount</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:80px" type="text" id="Product_Code" class="form-control input-xs Product_Code " onkeyup="fetch()" name="Product_Code[]" required>
</td>
<td ><input style="width:300px" type="text" id="Product_Name" class="form-control input-xs" name = "Prdtname[]" > </td>
<!--value="<?php echo $row['Product_Name']; ?>"-->
<td><input style="width:80px" type="text" id="Qty" onkeyup="movetoNext(this, 'addMore3')" class="form-control input-xs" name="Qty[]" required></td>
<td><input style="width:100px" type="text" id="Rate" class="form-control input-xs" value="" name="rate[]" required></td>
<td><input style="width:150px" type="text" id="Value" class="form-control input-xs" name="amount[]" ></td>
<th><span class="glyphicon glyphicon-plus"></span></th>
</tr>
</tbody>
</table>
Fetch code:
public function fetch()
{
$this->load->model('User_model');
$result = $this->User_model->fetch_name($_POST["code"]);
echo json_encode($result);
//echo 'hello'.$code;
}
Model code:
public function fetch_name($code)
{
$query = $this->db->query("select * FROM itemmaster where itcode = $code")->row_array();
return $query;
}
I am trying to fetch the product details by product code when the user hits tab key..what i have to alter to make the fetching available to all the rows of a table..Thanks in advance

You can use onchange like below
<input style="width:80px" type="text" id="Product_Code" class="form-control input-xs Product_Code " onchange="fetchdetails(this)" name="Product_Code[]" required>
fetchdetails function:
function fetchdetails(e) {
var code = e.value;
$.ajax({
type: "POST",
url: "<?php echo base_url();?>TipUp_Loan/fetch",
data: {
code: code
},
datatype: 'json',
success: function (data) {
var json = data,
obj = JSON.parse(json);
var prodName = $(e).closest('tr').find('#Product_Name');
$(prodName).val(obj.itemname);
var rate = $(e).closest('tr').find('#Rate');
$(rate).val(obj.salrate);
}
});
}
You can use it for dynamic rows, it will fetch the current row and populate the records.

How to Search data in tag input and displaying data to table with javascript?

I have an issues for searching and displaying data to table with javascript. i have data with format json but all it can't displayed on table just 1st row, while on console log.data five rows displayed. how to solved this problem. thanks you so much for you guys i hope here this solved.
This is the data:
var data =[
{header_id:"TR100001" detail_id:"2" item_code:"SPH001" price:"4000" weight:"2"},
{header_id:"TR100001" detail_id:"3" item_code:"SPH002" price:"4500" weight:"2"},
{header_id:"TR100001" detail_id:"4" item_code:"SPH003" price:"30000"weight:"2"},
{header_id:"TR100001" detail_id:"5" item_code:"SPH004" price:"45000"weight:"2"}];
This's View:
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table id="buy_transaction" class="table table-bordered table-hover table-striped sticky-header">
<thead class="bg-success">
<tr>
<th width="1">&#9745</th>
<th width="5"><b>Detail</b></th>
<th><b>Item Code</b></th>
<th><b>Price</b></th>
<th><b>Weight</b></th>
</tr>
</thead>
<tbody id="dataTable2">
<table id="buy_transaction">
<tbody id="dataTable2">
<td><input type="checkbox" class="chk" name="chk[]" value="<?php echo $detail->detail_id; ?>"></td>
<td><input type="text" id="detail_id" name="detail_id[]" class="detail_id form-control" value="<?php echo $detail->detail_id ;?>" size="1"> </td>
<td><input type="text" width="10" class="item_code form-control" id="item_code" name="item_code[]" value="<?php echo $detail->item_code; ?>"></td>
<td><input type="text" class="header_id1 form-control" id="header_id" name="header_id[]" value="<?php echo $detail->header_id; ?>" readonly ></td>
<td><input type="text" class="price form-control" id="price" name="price[]" value="<?php echo $detail->price; ?>" readonly ></td>
<td><input type="text" class="weight form-control" id="weight" name="weight[]" placeholder="0" value="<?php echo $detail->weight; ?>"></td>
</table>
</div>
</div>
</div>
This's Javascript Code :
<script type="text/javascript">
function getdHeaderid(header_id){
var header_id = header_id.val();
$.ajax({
type : "post",
data : {header_id:header_id},
url : "<?php echo base_url();?>index.php/transaction/selltransaction/get_dtHeaderid",
dataType:"json",
cache :false,
success: function(data){
console.log(data);
for(var i=0; i< data.length; i++){
var obj=data[i];
$(".header_id").val(obj.header_id);
$(".detail_id").val(obj.detail_id);
$(".item_code").val(obj.item_code);
$(".price").val(obj.price);
$(".weight").val(obj.weight);
}
}
});
}
$(document).ready(function() {
$('.header_id').on('keyup', function() {
getdHeaderid($(this));
});
});
</script>

Your question wording is pretty hard to understand, but taking my best guess as to what you're looking for - you want a table row for each element from data. If so, here is how you can do that.
var data = [{
header_id: "TR100001",
detail_id: "2",
item_code: "SPH001",
price: "4000",
weight: "2"
},
{
header_id: "TR100001",
detail_id: "3",
item_code: "SPH002",
price: "4500",
weight: "2"
},
{
header_id: "TR100001",
detail_id: "4",
item_code: "SPH003",
price: "30000",
weight: "2"
},
{
header_id: "TR100001",
detail_id: "5",
item_code: "SPH004",
price: "45000",
weight: "2"
}
];
function getdHeaderid(header_id) {
// make ajax call...
// ...
// success callback (data) {
var tableHTML = [];
for (var i = 0; i < data.length; i++) {
var obj = data[i];
var newRow = $(".clone-row").clone(true);
newRow.removeClass("clone-row");
newRow.find(".header_id").val(obj.header_id);
newRow.find(".detail_id").val(obj.detail_id);
newRow.find(".item_code").val(obj.item_code);
newRow.find(".price").val(obj.price);
newRow.find(".weight").val(obj.weight);
tableHTML.push(newRow);
}
$("#dataTable2 tr:not(.clone-row)").remove();
$("#dataTable2").append(tableHTML);
// } end success callback
}
getdHeaderid();
.clone-row {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="buy_transaction">
<tbody id="dataTable2">
<tr class="clone-row">
<td><input type="checkbox" class="chk" name="chk[]" value="<?php echo $detail->detail_id; ?>"></td>
<td><input type="text" name="detail_id[]" class="detail_id form-control" value="<?php echo $detail->detail_id ;?>" size="1"> </td>
<td><input type="text" width="10" class="item_code form-control" id="item_code" name="item_code[]" value="<?php echo $detail->item_code; ?>"></td>
<td><input type="text" class="header_id1 form-control" id="header_id" name="header_id[]" value="<?php echo $detail->header_id; ?>" readonly></td>
<td><input type="text" class="price form-control" id="price" name="price[]" value="<?php echo $detail->price; ?>" readonly></td>
<td><input type="text" class="weight form-control" id="weight" name="weight[]" placeholder="0" value="<?php echo $detail->weight; ?>"></td>
</tr>
</tbody>
</table>

Your table only has a single row within which you can assign data. Also, you should wrap your table data tags with the <tr></tr> tags, to indicate that this is a distinct row in the table. When iterating through your data, you should be creating new rows, for each set of data in your json. Something like this:
var table = document.getElementById("buy_transaction");
for(var i = 0; i<data.length; i++) {
var obj = data[i];
var row = table.insertRow(i);
// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(1);
var cell4 = row.insertCell(1);
var cell5 = row.insertCell(1);
// Add some text to the new cells:
cell1.innerHTML(obj.header_id);
cell2.innerHTML(obj.detail_id);
cell3.innerHTML(obj.item_code);
cell4.innerHTML(obj.price);
cell5.innerHTML(obj.weight);
};
This way you're for each iteration of the for loop, you're creating a new row for your table and you're inserting the proper values.

Add tax to grandtotal based on checkbox with javascript php

I have a transaction form that could use tax or no tax if the transaction use tax than the user click the checkbox and it will give a value to taxes textbox (besides the checkbox)
And calculate/sum subtotal + taxes = grandtotal
the tax is fix 10% of subtotal
here is my code
<?php
$con = mysqli_connect('localhost', 'root', '', 'a.karat');
if(isset($_POST['product_id']))
{
$prno=$_POST['prno'];
$i=1;
$sql = mysqli_query($con,"select * from detail_pr where prNo='$prno'");
while ($r = mysqli_fetch_array($sql)) {
echo
'<tr>
<td><input type="checkbox" name="check[]" id="check'.$i.'" value="'.$i.'"></td>
<td><label for="productCode"></label>
<input type="text" name="productCode'.$i.'" id="productCode'.$i.'" readonly value="'.$r["productCode"].'" size="12" ></td>
<td><label for="productName"></label>
<input type="text" name="productName'.$i.'" id="productName'.$i.'" readonly value="'.$r["productName"].'"size="35" ></td>
<td><label for="qty"></label>
<input type="number" onkeyup="calc(this);" name="qty'.$i.'" id="qty'.$i.'" readonly value="'.$r["qty"].'" size="10" ></td>
<td><input type="number" onkeyup="calc(this);" name="price'.$i.'" id="price'.$i.'" size="10" min="1" max="99" onchange="calc(this);" ></td>
<td><input type="number" onkeyup="calc(this);" name="discount'.$i.'" id="discount'.$i.'" size="10" min="0" max="99" onchange="calc(this);"></td>
<td><input type="number" name="total'.$i.'" id="total'.$i.'" size="15" min="1" max="99" onchange="calc(this);" ></td>
</tr>';
$i++;
}
}
?>
<form name="form1" id="form1 >
<table width="400" border="0" align="right">
<tr>
<th scope="row">Sub Total</th>
<td>:</td>
<td><input name="subtotal" id="subtotal" type="text" onFocus="startCalc();" onBlur="stopCalc();"></td>
</tr>
<tr>
<th scope="row">tax 10% <input name="tax" id="tax" type="checkbox" value="10" ></th>
<td>:</td>
<td><input name="taxes" id="tax1" type="taxes"></td>
</tr>
<tr>
<th scope="row">Grand Total</th>
<td>:</td>
<td><input name="grandtotal" id="grandtotal" type="text"></td>
</tr>
</table>
</form>
<script>
function calc(id) {
var row = id.parentNode.parentNode;
var quant = row.cells[3].getElementsByTagName('input')[0].value;
var price = row.cells[4].getElementsByTagName('input')[0].value;
var disc = row.cells[5].getElementsByTagName('input')[0].value;
if (disc == null || disc == '') {
res = parseFloat(quant) * parseFloat(price);
} else {
var res = (parseFloat(quant) * parseFloat(price)) - (parseFloat(quant) * parseFloat(price) * (parseFloat(disc) / 100));
}
row.cells[6].getElementsByTagName('input')[0].value = res;
}
</script>
<script>
document.querySelector('#form1').addEventListener('change', function( event ) {
if (event.target.id && event.target.id !== 'subtotal') {
var allTotals = document.querySelectorAll('input[name^="total"]'),
allTotalSum = 0;
Array.prototype.forEach.call(allTotals, function( element ) {
if (element.value) { allTotalSum += parseFloat(element.value); }
});
document.querySelector('#subtotal').value = allTotalSum;
}
});
how to calculate subtotal + taxes = grandtotal?

thanks for the respond
i finally found my answer
<script>
var tax = document.getElementsByName('tax')[0];
var taxes = document.getElementsByName('taxes')[0];
var subtotal = document.getElementsByName('subtotal')[0];
var grandtotal = document.getElementsByName('grandtotal')[0];
function updateInput() {
taxes.value = subtotal.value * (tax.value / 100);
var sum = (parseInt(subtotal.value) + parseInt(taxes.value)) ;
grandtotal.value = sum.toFixed(0);
}
subtotal.addEventListener('change', updateInput);
tax.addEventListener('change', updateInput);
taxes.addEventListener('change', updateInput);
taxes.addEventListener('keyup', updateInput);
</script>

Value passed from textbox to textarea is automatically deleted

I am trying to pass a value entered in a textbox to a text area. However when I run my code the value appears in the textarea and it disapears.
Html code:
Customer Name
<input type="text" id="name1TXT" />
<textarea rows="6" cols="50" id="productList">
</textarea>
Javascript:
function transferData() {
var customer = document.getElementById("name1TXT").value;
if (customer != "")
document.getElementById('productList').value += customer + ","
document.getElementById('name1TXT').value = "";
}
Does anyone know why this would happen?
Edit
Here is all of my code.
<!DOCTYPE html>
<title></title>
<style>
.calcFrm {
}
</style>
<table style="width:300px;" border="1">
<tr>
<td>Customer Name</td>
<td><input type="text" id="name1TXT" /></td>
</tr>
<tr>
<td>Coating</td>
<td>
<select class="coating1DDL">
<option value="1">Galvanized</option>
<option value="2">Powder Coat</option>
<option value="3">None</option>
</select>
</td>
</tr>
<tr>
<td>Weight</td>
<td><input type="text" id="weight1TXT" onkeyup="sum1();"/></td>
</tr>
<tr>
<td>Length</td>
<td><input type="text" id="length1TXT" onkeyup="sum1();"/></td>
</tr>
<tr>
<td>Pieces</td>
<td><input type="text" id="pcs1TXT" onkeyup="sum1();"/></td>
</tr>
<tr>
<td>Pounds</td>
<td><input type="text" id="pounds1TXT" onkeyup="sum1();"readonly="readonly" /></td>
</tr>
<tr>
<td>Tons</td>
<td><input type="text" id="tons1TXT" onkeyup="convertPounds1();" readonly="readonly" /></td>
</tr>
</table>
<table style="width:300px;" border="1" class="tonsFrm2">
<tr>
<td>Customer Name</td>
<td><input type="text" id="name2TXT" /></td>
</tr>
<tr>
<td>Coating</td>
<td>
<select class="coating2DDL">
<option>Galvanized</option>
<option>Powder Coat</option>
<option>None</option>
</select>
</td>
</tr>
<tr>
<td>Weight</td>
<td><input type="text" id="weight2TXT" onkeyup="sum2();"/></td>
</tr>
<tr>
<td>Length</td>
<td><input type="text" id="length2TXT" onkeyup="sum2()"/></td>
</tr>
<tr>
<td>Pieces</td>
<td><input type="text" id="pcs2TXT" onkeyup="sum2();"/></td>
</tr>
<tr>
<td>Pounds</td>
<td><input type="text" id="pounds2TXT" readonly="readonly" onkeyup="sum2();" /></td>
</tr>
<tr>
<td>Tons</td>
<td><input type="text" id="tons2TXT" readonly="readonly" onkeyup="convertPounds2();" /></td>
</tr>
</table>
<table style="width:300px;" border="1" class="tonsFrm3">
<tr>
<td>Customer Name</td>
<td><input type="text" id="text3TXT" /></td>
</tr>
<tr>
<td>Coating</td>
<td>
<select class="coating3DDL">
<option>Galvanized</option>
<option>Powder Coat</option>
<option>None</option>
</select>
</td>
</tr>
<tr>
<td>Weight</td>
<td><input type="text" id="weight3TXT" onkeyup="sum3();"/></td>
</tr>
<tr>
<td>Length</td>
<td><input type="text" id="length3TXT" onkeyup="sum3();"/></td>
</tr>
<tr>
<td>Pieces</td>
<td><input type="text" id="pcs3TXT" onkeyup="sum3();"/></td>
</tr>
<tr>
<td>Pounds</td>
<td><input type="text" id="pounds3TXT" readonly="readonly" onkeyup="sum3();"/></td>
</tr>
<tr>
<td>Tons</td>
<td><input type="text" id="tons3TXT" readonly="readonly" onkeyup="convertPounds3();" /></td>
</tr>
</table>
<button onclick="transferData()">Submit</button>
<button type="reset" value="Reset">Reset</button>
<button type="button">Add New Form</button>
<br />
Pounds Total
<input type="text" id="TotalPoundsTxt" readonly="readonly" onkeyup="totalPounds();" />
Tons Total
<input type="text" id="TotalTonsTXT" readonly="readonly" onkeyup="totalTons();" />
<br />
<textarea rows="6" cols="50" id="productList">
</textarea>
<br />
<button type="button">Save Input</button>
Javascript:
//number correlate with form in order
//functions for first form
function sum1() {
var txtFirstNumberValue = document.getElementById('weight1TXT').value;
var txtSecondNumberValue = document.getElementById('length1TXT').value;
var txtThirdNumberValue = document.getElementById('pcs1TXT').value;
var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue) * parseInt(txtThirdNumberValue);
if (!isNaN(result)) {
document.getElementById('pounds1TXT').value = result;
}
}
function convertPounds1() {
var txtFirstNumberValue = document.getElementById('pounds1TXT').value;
var result = parseInt(txtFirstNumberValue) / 2000;
if (!isNaN(result)) {
document.getElementById('tons1TXT').value = result;
}
}
function galvCalc1() {
var galvOption = document.getElementById('').value
}
//functions for second form
function sum2() {
var txtFirstNumberValue = document.getElementById('weight2TXT').value;
var txtSecondNumberValue = document.getElementById('length2TXT').value;
var txtThirdNumberValue = document.getElementById('pcs2TXT').value;
var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue) * parseInt(txtThirdNumberValue);
if (!isNaN(result)) {
document.getElementById('pounds2TXT').value = result;
}
}
function convertPounds2() {
var txtFirstNumberValue = document.getElementById('pounds2TXT').value;
var result = parseInt(txtFirstNumberValue) / 2000;
if (!isNaN(result)) {
document.getElementById('tons2TXT').value = result;
}
}
//Functions for third form
function sum3() {
var txtFirstNumberValue = document.getElementById('weight3TXT').value;
var txtSecondNumberValue = document.getElementById('length3TXT').value;
var txtThirdNumberValue = document.getElementById('pcs3TXT').value;
var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue) * parseInt(txtThirdNumberValue);
if (!isNaN(result)) {
document.getElementById('pounds3TXT').value = result;
}
}
function convertPounds3() {
var txtFirstNumberValue = document.getElementById('pounds3TXT').value;
var result = parseInt(txtFirstNumberValue) / 2000;
if (!isNaN(result)) {
document.getElementById('tons3TXT').value = result;
}
}
function totalPounds(){
var firstpoundvalue = document.getElementById('pounds1TXT').value;
var secondpoundvalue = document.getElementById('pounds2TXT').value;
var thirdpoundvalue = document.getElementById('pounds3TXT').value;
var result = parseInt(firstpoundvalue) + parseInt(secondpoundvalue) + parseInt(thirdpoundvalue);
if (!isNaN(result)) {
document.getElementById('TotalPoundsTxt').value = result;
}
}
function totalTons() {
var firsttonvalue = document.getElementById('tons1TXT').value;
var secondtonvalue = document.getElementById('tons2TXT').value;
var thirdtonvalue = document.getElementById('tons3TXT').value;
var result = parseInt(firsttonvalue) + parseInt(secondtonvalue) + parseInt(thirdtonvalue);
if (!isNaN(result)) {
document.getElementById('TotalTonsTXT').value = result;
}
}
function transferData() {
var customer = document.getElementById("name1TXT").value;
if (customer != "")
document.getElementById('productList').value += customer + ",";
}
</script>

I cannot comment but I created as JSBin and seems to be working. I wasn't for sure how you are calling the transferData function to see the textarea clear so I just added an onBlur event to the input textbox.
I also added a semicolon to the line clearing the name1TXT value.
I still think everything is working regarding your code. By that I mean there aren't any odd bugs. But what exactly are you trying to accomplish? There appears to be 3 Customer Name boxes but when you click submit only 1 is being output into the textarea. It only grabs Customer1 and puts his/her name into the textarea and this process is repeating with each Submit. Are you trying to add all 3 customers? If so, then you will need more logic in your transferData function

you should use value like this
document.getElementById("writeArea").value = txt;
or like this in jQuery:
$('#myTextarea').val('');

Calculate table rows and populate the grand total field

I have table like below :
<table>
<thead>
<th>Product Type</th>
<th>Quantity</th>
<th>Unit</th>
<th>Total</th>
</thead>
<tr>
<td>Gas</td>
<td><input type="text" name="qty" /></td>
<td>
<select id="unit" name="unit">
<option value="30.42">Liter</option>
<option value="25.30">Ton</option>
<option value="45.10">Kg</option>
</td>
<td><input type="text" readonly="readonly" name="total" /></td>
</tr>
<tr>
<td>Diesel</td>
<td><input type="text" name="qty" /></td>
<td>
<select id="unit" name="unit">
<option value="20.42">Liter</option>
<option value="18.30">Ton</option>
<option value="25.10">Kg</option>
</td>
<td><input type="text" readonly="readonly" name="total" /></td>
</tr>
<tr>
<td>Fuel</td>
<td><input type="text" name="qty" /></td>
<td>
<select id="unit" name="unit">
<option value="30.42">Liter</option>
<option value="25.30">Ton</option>
<option value="45.10">Kg</option>
</td>
<td><input type="text" readonly="readonly" name="total" /></td>
</tr>
I would like to calculate ( qty * unit ) each row based qty and unit and put the result total column.
At the end of the calculation, I want to sum whole total fields and put the Grand Total field.
I tried like below which is always returning NaN but when I checked the value by typeof returning number!!! :
$(document).ready(function() {
$('input[name^=qty], select[name^=unit]').change(function(){
var total = 0;
var $row = $(this).parent();
var qty = parseFloat($row.find('input[name=qty]').val());
var price = parseFloat($row.find("select[name='unit'] option:selected").val());
total = parseFloat(qty * price);
$row.find('.amount').text(parseFloat(qty * price));
})
});

There are several errors here, including using text() on an input field, and using parent() instead of closest("tr").
I've also added classes to your elements to make the selectors easier. Try this:
$('.qty, .unit').change(function(){
var total = 0;
var $row = $(this).closest("tr");
var qty = parseFloat($row.find('.qty').val());
var price = parseFloat($row.find(".unit").val());
total = parseFloat(qty * price);
$row.find('.total').val(parseFloat(qty * price));
})
Example fiddle
UPDATE
Added blank default to selects:
$('.qty, .unit').change(function(){
var total = 0;
var $row = $(this).closest("tr");
var qty = parseFloat($row.find('.qty').val());
var price = parseFloat($row.find(".unit").val());
total = qty * price;
if (isNaN(total)) {
$row.find('.total').val("");
}
else {
$row.find('.total').val(total);
}
})
Fiddle

Instead of var $row = $(this).parent(); try
var $row = $(this).closest("tr");
The code you have is looking at the td and you need to find the tr. Closest looks for the closest match up the DOM tree.

Try this,not tested
$(document).ready(function() {
$('input[name^=qty], select[name^=unit]').change(function(){
var total = 0;
var $row = $(this).parent().prev(); //changed here
var qty = parseFloat($row.find('input[name=qty]').val());
var price = parseFloat($row.find("select[name='unit'] option:selected").val());
total = parseFloat(qty * price);
$row.find('.amount').text(parseFloat(qty * price));
})
});