How to limit the additions field? - javascript

If someone here is willing to help me I would really appreciate
how to limit the addition of columns in the following html code, let say only up to 5 only?
<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="friends"
<table width="100%" cellpadding="10" cellspacing="0" id="my_friends">
<tr>
<th colspan="2" style="text-align: center;"><?php echo $text_enter_friend; ?></th>
</tr>
<tr>
<td class="left" width="30%"><span class="required">*</span> <?php echo $entry_friend; ?></td>
<td class="left"><input type="text" name="friend" value="<?php echo $friend; ?>" size="30" maxlength="45" />
<?php if ($error_friend) { ?>
<span class="error"><?php echo $error_friend; ?></span>
<?php } ?></td>
</tr>
<?php if ($friends) { ?>
<?php foreach ($friends as $result) { ?>
<tr>
<td style="vertical-align: top;"><?php echo $entry_friend; ?></td>
<td style="vertical-align: top;"><input type="text" name="friends[]" value="<?php echo $result; ?>" size="30" maxlength="45" /></td>
</tr>
<?php } ?>
<?php } ?>
</table>
<table width="100%" cellpadding="10" cellspacing="0">
<tr>
<td></td>
<td class="right"><a onclick="addFriend();" class="button"><span><?php echo $button_add_friend; ?></span></a><a onclick="removeFriend();" class="button"><span><?php echo $button_remove; ?></span></a></td>
</tr>
<tr>
<td colspan="2" class="center">
<p><?php echo $text_message; ?></p>
<p><a onclick="$('#friends').submit();" class="button"><span><?php echo $button_submit; ?></span></a></p>
<p><?php echo $text_addresses; ?></p>
</td>
</tr>
</table>
</div>
</form>
<script type="text/javascript"><!--
function addFriend() {
var tbl = document.getElementById('my_friends');
var iteration = tbl.tBodies[0].rows.length;
newRow = tbl.tBodies[0].insertRow(-1);
var newCell = newRow.insertCell(0);
newCell.innerHTML = '<?php echo $entry_friend; ?>';
var newCell1 = newRow.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'friends[]';
el.size = 30;
el.maxlength = 45;
newCell1.appendChild(el);
// if (newCell > 2) tbl.addCell(newCell + 1);
}
function removeFriend() {
var tbl = document.getElementById('my_friends');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
//--></script>
Thanks in advance

The table#my_friends has by default 2 rows. So all what you have to count the rows.
function addFriend() {
var tbl = document.getElementById('my_friends');
var iteration = tbl.tBodies[0].rows.length;
if(iteration>=7)return;//leave the function if already 5 rows have been added
//rest of the function

Related

How to add Value in jQuery

I want to add value to td in jquery. I have this code but not working.
Return all values for single td. I need that input [name="text-194] contain further values not all.
<table id="mytable" style="width: 100%;" border="1">
<tbody>
<?php
$counter = 1;
foreach ($result_list as $key => $row) { ?>
<tr>
<td class="jakas"><p><?php echo $counter; ?></p></td>
<td class="numer" value="<?php echo $row->numer; ?>"><p><?php echo $row->numer; ?></p></td>
<td class="nazwa" value="<?php echo $row->nazwa; ?>"><p><?php echo $row->nazwa; ?></p></td>
<td class="input" value="<?php htmlspecialchars($row->nazwa); ?>">
<?php echo do_shortcode('[contact-form-7 id="73" title="plik"]'); ?></td>
<?php echo '<input type="text" name="idtest" value="' . htmlspecialchars($row->nazwa) . '">'; ?>
</tr>
<?php $counter++; ?>
<script>
(function ($) {
$(document).ready(function () {
var value = '<?=htmlspecialchars($row->nazwa)?>';
console.log(value);
$('input[name="text-194"]').val($('input[name="text-194"').val() + value);
});
})(jQuery);
</script>
<?php
}
?>

how to do calculations of a php loop of <input> with displaying them in loop of javascript?

Hello I'm here because facing really big problem in displaying the calculations of loop of input tags.
What i mean is that there is 5 rows having input fields and end of each row there is span area to display row calculations individually for each row but i can't do it so
here is the code of page
<!DOCTYPE html>
<html>
<head>
<title>Invoice</title>
<script src="invoice.js"></script>
</head>
<body>
<form action="fppdf.php" method="post" id="myform">
<center>
<table>
<tr>
<td colspan="4">
<table id="myTable">
<tr class="bg">
<th >SI.NO.</th>
<th>Description of Goods</th>
<th>HSN Code</th>
<th>UOM</th>
<th>QTY.</th>
<th>Weight</th>
<th>Rate</th>
<th>Taxable Amount</th>
</tr>
<?php
//$n=$_GET['no'];
for ($i=0; $i < 2; $i++) {
?>
<tr>
<td><?php echo $i; ?></td>
<td><input type="text" id="description" name="description[]"></td>
<td><input type="text" id="hsn" name="hsn[]"></td>
<td><input type="text" id="uom" name="uom[]"></td>
<td><input type="number" id="qty" name="qty[]"></td>
<td><input type="number" id="weight" name="weight[]"></td>
<td><input type="number" id="rate" name="rate[]" ></td>
<td><span id="tax_amt" name="tax_amt[]" ></span></td>
</tr>
<?php } ?>
</table>
</td>
</tr>
<tr>
<td colspan="4">
<table class="ltable">
<tr><td>Total Amount Before Tax :</td><td> <span id="sub"></span></td></tr>
<tr><td>Add CGST : <input type="number" name="cgst" step="0.01" id="9cgst" onblur="taxamt()"> </td><td><span id="cgst9"></span></td></tr>
<tr><td>Add SGST : <input type="number" name="sgst" step="0.01" id="9sgst" > </td><td><span id="sgst9"></span></td></tr>
<tr><td>Tax Amount GST : <span id="gst9"></span> </td><td> <span id="gst18"></span></td></tr>
<tr><td>Total Amount After Tax </td><td> <span id="tot"></span></td></tr>
<tr>
<td><input type="Submit" class="Submit" value="Submit"></td>
<td><a onclick="taxamt()" class="calculate">calculate</a></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</form>
</body>
</html>
and here is the JS file
//var my = [];
function taxamt() {
// body...
var wt = document.getElementById('weight').value;
var rate = document.getElementById('rate').value;
var qty = document.getElementById('qty').value;
var t =0;
var i =0;
var r =0;
// for(i=0; i < 2;i++){
r =(wt*rate)*qty;
// my.push(r);
document.getElementById("tax_amt").innerHTML = r +"₹";
// t+=r;
// }
document.getElementById("sub").innerHTML = t +"₹" ;
//TAX CALCULATION
var cgst9 = document.getElementById("9cgst").value;
var sgst9 = document.getElementById("9sgst").value;
var gst9 = parseInt(cgst9)+parseInt(sgst9);
var cgst = (t)*parseInt(cgst9)/100;
var sgst = (t)*parseInt(sgst9)/100;
var gst = cgst + sgst;
document.getElementById("cgst9").innerHTML = cgst + " ₹" ;
document.getElementById("sgst9").innerHTML = sgst + " ₹" ;
document.getElementById("gst18").innerHTML = gst + " ₹" ;
document.getElementById("gst9").innerHTML = gst9 + "%";
var tot_gst = t+gst;
document.getElementById("tot").innerHTML = tot_gst+" ₹" ;
}
how can i show the calculations properly on same page as like its output is correct but in other page after i submit the form .
ID are unique, use your php loop to create unique id you'll use in the JS loop :
<?php
for ($i=0; $i < 2; $i++) {
?>
<tr>
<td><?php echo $i; ?></td>
<td><input type="text" id="description<?php echo $i; ?>" name="description[]"></td>
<td><input type="text" id="hsn<?php echo $i; ?>" name="hsn[]"></td>
<td><input type="text" id="uom<?php echo $i; ?>" name="uom[]"></td>
<td><input type="number" id="qty<?php echo $i; ?>" name="qty[]"></td>
<td><input type="number" id="weight<?php echo $i; ?>" name="weight[]"></td>
<td><input type="number" id="rate<?php echo $i; ?>" name="rate[]" ></td>
<td><span id="tax_amt<?php echo $i; ?>" name="tax_amt[]" ></span></td>
</tr>
<?php } ?>
And in the JS :
total=0;
for(i=0; i < 2;i++){
wt = document.getElementById('weight'+i).value;
rate = document.getElementById('rate'+i).value;
qty = document.getElementById('qty'+i).value;
r =(wt*rate)*qty;
total+=r;
document.getElementById('tax_amt'+i).innerHTML = r +'₹';
}
document.getElementById('sub').innerHTML = total +'₹';
It could be cleaner using class and a each loop (see here for a start), but the loop increment version will do the job.

Selecting an appending ID attribute with jQuery

Why does the last 'In Stock' field replaces every other 'In Stock' field when I'm trying to place value on the quantity?
<form action="add_sales.php" method="POST">
<table class="table table-striped table-bordered table-hover results table-fixed">
<thead>
<tr>
<th class="text-center">#</th>
<th>Product Name</th>
<th>Description</th>
<th>Price</th>
<th>In Stock</th>
<th style="width: 20%">Quantity</th>
</tr>
<tr class="warning no-result">
<td colspan="8"><i class="fa fa-warning"></i> No Product Found</td>
</tr>
</thead>
<tbody>
<?php
$query = "SELECT * FROM products";
$exec = mysqli_query($connection, $query);
$a = 1;
$b = 1;
while ($row = mysqli_fetch_array($exec)) {
$product_id = $row['product_id'];
$product_name = $row['product_name'];
$product_price = $row['sell_price'];
$description = $row['description'];
$product_quantity = $row['quantity'];
}
?>
<tr>
<td class="text-center"><?php echo $product_id; ?><input type="hidden" name="product_id[]" value="<?php echo $product_id; ?>"></td>
<td><?php echo $product_name; ?></td>
<td><?php echo $description; ?></td>
<td><?php echo $product_price; ?></td>
<td><input type="number" name="hehe" value="<?php echo $product_quantity; ?>" id="<?php echo "qtyResult" . $a++; ?>" disabled></td>
<td><input type="number" name="qtyBuy[]" id="<?php echo "qtyBuy" . $b++; ?>" onkeyup="updateStock(this, event)"></td>
</tr>
<?php } ?>
</tbody>
</table>
<div class="form-group">
<input type="submit" name="addCart" value="Add Items to Cart" class="btn btn-info pull-right">
</div>
</form>
Here is my jQuery script. I think the problem is in the var inStock's value. When I change the var inStock's value to a fixed number, it's working fine.
function updateStock(obj, event) {
var inputQty = obj.value;
var inStock = "<?php echo $product_quantity; ?>";
$(obj).closest('tr').find('input[id^="qtyResult"]').val(inStock - inputQty);
}
Because $product_quantity will be set to the last value in the loop.
If you view source and look at the javascript function, you will see it reads:
function updateStock(obj, event) {
var inputQty = obj.value;
var inStock = "234"; //or whatever the last value was
$(obj).closest('tr').find('input[id^="qtyResult"]').val(inStock - inputQty);
}
As the values can change after the page has loaded (and therefor after php has quit) you should grab the current value from the dom when you need it:
function updateStock(obj, event) {
var inputQty = obj.value;
var quantityInput = $(obj).closest('tr').find('input[id^="qtyResult"]');
quantityInput.val(quantityInput.val() - inputQty);
}

unable to auto refresh two tables in HTML

I would like to ask, why I can't able to refresh two html tables? only 1? is there something wrong with the Javascript code? I already tried to declare 2 variables and tried to create to script for each and still no luck and I tried to change the variables name to unique one but still no luck. My full code below:
<!-- SALES.HTML -->
<div class="col-sm-5 shadow">
<p>
<h3><center>Hyukies</center></h3>
<center>Catbalogan, City</center>
<center><span class="glyphicon glyphicon-time"></span> <?php include('time.php'); ?></center> <br />
<div id="transactions_left">
<?php include_once('salestable.php')?>
</div>
</p>
<div class="row">
<div class="col-sm-12"><b>
<p>
<?php include_once('sales_count.php')?>
<script>
var table = $("#salestableid");
var refresh = function() {
table.load("salestable.php", function() {
setTimeout(refresh, 1);
});
};
refresh();
var table1 = $("#sales_countid");
var refresh1 = function() {
table.load("sales_count.php", function() {
setTimeout(refresh1, 1);
});
};
refresh1();
</script>
<button type="button" class="btn btn-danger btn-md" data-toggle='modal' data-target='#cancel'>Cancel</a>
<button type="button" class="btn btn-warning btn-md" data-toggle='modal' data-target='#hold'>Hold</button>
<button type="button" class="btn btn-success btn-md pull-right" data-toggle='modal' data-target='#payment' >Payment</button>
<br /><br />
<center>Thank you and have a Nice day!</center>
</p>
</div>
</div>
</div>
<!-- End of Page SALES.HTML -->
<!-- SALESTABLE.PHP -->
<?php require_once("../includes/db_connection.php"); ?>
<table class="table table-hover" id='salestableid'>
<thead>
<tr class= "default" style="background-color: #e18728">
<th><font color = "white">Action</font></th>
<th width="200"><font color = "white">Product</th>
<th><font color = "white">Quantity</th>
<th width="75"><font color = "white">Price</th>
<th width ="90"><font color = "white">Total</th>
</tr>
</thead>
<tbody>
<tr>
<?php
$user_query = mysqli_query($connection, "SELECT saleslog.itemid, saleslog.qty, saleslog.date, saleslog.total, saleslog.id, items.`name`, items.description, items.retailprice FROM saleslog LEFT JOIN items ON items.id = saleslog.itemid")or die(mysqli_error());
while($row = mysqli_fetch_array($user_query)){
$id = $row['id'];
?>
<tr>
<td></td>
<td><?php echo $row['name']; ?></td>
<td>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<?php echo $row['qty']; ?></td>
<td>&nbsp<?php echo number_format($row['retailprice'],2); ?></td>
<?php
$total = $row['qty'] * $row['retailprice'];
?>
<td><?php echo number_format($total,2); ?></td>
</tr>
<?php } ?>
</tr>
</tbody>
</table>
<!-- End of Page SALESTABLE.PHP -->
<!--SALES_COUNT.PHP -->
<?php require_once("../includes/db_connection.php"); ?>
<?php
$count_client= mysqli_query($connection, "SELECT * FROM saleslog");
$count = mysqli_num_rows($count_client);
?>
<?php
$totalsales= mysqli_query($connection, "SELECT SUM(total) AS totalpritems FROM saleslog");
while($totalperitems = mysqli_fetch_array($totalsales)){
$total_sales = $totalperitems['totalpritems'];
}
?>
<table class='table' style="border-style: dotted" id="sales_countid">
<tr class='' style="border-style: dotted">
<td width="50" >Total Items: </td>
<td width="50"align="right"><?php echo $count; ?></td>
<td width="50" >Total: </td>
<td width="50"align="right" >P <?php echo number_format($total_sales,2); ?></td>
</tr>
<tr class='' style="border-style: dotted">
<td width="50">Discount: </td>
<td width="50"align="right">0.00 </td>
<td width="50">Tax: </td>
<td width="50"align="right">0.00 </td>
</tr>
<tr style="border-style: dotted">
<td width>Total Payable: </td>
<td align="right">P <?php echo number_format($total_sales,2); ?></td>
<td></td>
<td></td>
</tr>
</table>
<!--End of Page SALES_COUNT.PHP -->
In your refresh code for table1, you refresh table instead.
table1.load(...) instead of table.load(...) in the code below.
var table1 = $("#sales_countid");
var refresh1 = function() {
table.load("sales_count.php", function() {
setTimeout(refresh1, 1);
});
};

How i can get value of specific cell if row is checked?

I have an HTML table. I need to get specific cell value if column is checked! For each row I have a checkBox.
<table id="tabellaOrdinaFarmaci" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Codice Farmaco</th>
<th>Nome Farmaco</th>
<th>Quantità </th>
<th>Quantità di alert</th>
<th>Stato</th>
<th>Quantità da ordinare</th>
<th></th>
</tr>
</thead>
</thead>
<tbody>
<?php
foreach ($query as $row):
$quantitaDaOrdinare = $row->alert - $row->quantita;
if ($quantitaDaOrdinare > 0) {
?>
<tr id="<?php echo $row->aic; ?>" >
<td ><?php echo $row->aic; ?></td>
<td name="nomeFarmac"o><?php echo $row->denominazione ?></td>
<td><?php echo $row->quantita; ?></td>
<td><?php echo $row->alert; ?></td>
<td><?php echo $row->stato; ?></td>
<td>
<input type="text" class="form-control auto" name="codiceFarmaco" value="<?php echo $quantitaDaOrdinare ?>"/>
</td>
<td> <label>
<input type="checkbox" name="checkBox" value="<?php echo$row->aic; ?> ">
</label></td>
</tr>
<?php
} else {
}
endforeach;
?>
</tbody>
I need (using javascript or jquery) to get, if a button is clicked, every value of cell that have name="nomeFarmaco" for every row that is checked! I try to call this function whe
function getValue(){
var nome = $('input[name="checkBox"]:checked').map(function() {
return $(this).parent().parent().parent().find('name="nomeFarmaco').val();
}).get();
return nome;}
but nome is an empty array! any ideas? thanks in advance!
You can put a custom attribute for the check box and set the value in this attribute.
Like this :
<input type="checkbox" name="checkBox" value="<?php echo$row->aic; ?> " customattr="<?php echo $row->denominazione ?>">
And you javascript function will be :
function getValue(){
var nome = $('input[name="checkBox"]:checked').attr('customattr');
return nome;
}
I think this is typo?
<td name="nomeFarmac"o><?php echo $row->denominazione ?></td>
Change it to:
<td name="nomeFarmaco"><?php echo $row->denominazione ?></td>
And you are targetting a <td> and .val() won't work. Should be .text()
var name = [];
$('input[name="checkBox"]').click(function(){
if($(this).is(':checked')) {
name.push($(this).parent().parent().siblings('td[name="nomeFarmaco"]').text());
} else {
var index = name.indexOf(name);
name.splice(index, 1);
}
console.log(name);
});

Categories