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);
}
Related
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
}
?>
Hi guys im having a bit of a problem on how to get the value of the table row everytime i click an add button. what im trying to achieve is that to pass the value of the row to another php file for sql query. at the moment i have a table using a while loop and displaying a list of names from the database with a "ADD" button per row. When ever i click the add button regardless of which row i always get the value of the last row. can someone please point of on which part of the code i made a mistake?
here is my code
<form action="addFriend.php" method="post"> <table class="table table-bordered">
<?php
$i = 1;
while($row = mysqli_fetch_array($records))
{
?>
<tr>
<td><?php echo $i; ?></td>
<td><input type="text" name="addedUser" value="<?php echo $row["username"]; ?>" readonly></td>
<td>
<button type="submit" name="row_<?php echo $i; ?>" id="row_user" value="<?php echo $row["username"]; ?>" class="btn btn-info">ADD</button>
<?php $i++; ?>
</td>
</tr>
<?php
}
?>
</table>
</form>
Try Below code. As you want only $row["username"] and it is already stored in button value. Add form in while loop and give same name for button so that you can get username in addFriend.php
<table class="table table-bordered">
<?php
$i = 1;
while($row = mysqli_fetch_array($records))
{
?>
<tr>
<td><?php echo $i; ?></td>
<td><input type="text" name="addedUser" value="<?php echo $row["username"]; ?>" readonly></td>
<td>
<form action="addFriend.php" method="post">
<button type="submit" name="row" id="row_user" value="<?php echo $row["username"]; ?>" class="btn btn-info">ADD</button>
</form>
<?php $i++; ?>
</td>
</tr>
<?php
}
?>
</table>
Now in addFriend.php you can get value by $_POST['row'];
Try Below script
<form action="addFriend.php" method="post"> <table class="table table-bordered">
<?php
$i = 1;
while($row = mysqli_fetch_array($records))
{
?>
<tr>
<td><?php echo $i; ?></td>
<td><input type="text" name="**addedUser[]**" value="<?php echo $row["username"]; ?>" readonly></td>
<td>
<button type="submit" name="row_<?php echo $i; ?>" id="row_user" value="<?php echo $row["username"]; ?>" class="btn btn-info">ADD</button>
<?php $i++; ?>
</td>
</tr>
<?php
}
?>
</table>
</form>
In addFriend.php
print form data using print_r($_REQUEST);
Here is my code:
<section class="panel">
<header class="panel-heading">
<a data-toggle="modal" data-target="#modal_edit" onclick="modal_edit('<?php echo base_url() ?>leave/save')" class="btn btn-default pull-right" href=""><i class="fa fa-calendar-minus-o"></i> Add Leave</a>
<!-- <a class="btn btn-default pull-right" href="<?php echo base_url() ?>leave/apply_leave"><i class="fa fa-calendar-minus-o"></i> Appsssly Leave</a> -->
<h2 class="panel-title">Employee Leave History</h2>
</header>
<div class="panel-body">
<table class="table table-bordered table-striped mb-none" id="datatable-tabletools" data-swf-path="assets/vendor/jquery-datatables/extras/TableTools/swf/copy_csv_xls_pdf.swf">
<thead>
<tr>
<th>#</th>
<th>Employee Name</th>
<th>Leave Type </th>
<th>Subject</th>
<th class="hidden-phone">From date - To date</th>
<th class="hidden-phone">Reason</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php $count = 1 ?>
<?php foreach ($leave as $leave): ?>
<tr class="gradeX">
<td><?php echo $count++ ?></td>
<td id="name"><?php echo $leave->first_name . ' ' . $leave->last_name ?>
<input type="button" id="employee_id" value="<?php echo $leave->employee_id ?>"/>
</td>
<td><?php echo $leave->name ?></td>
<td><?php echo $leave->subject ?></td>
<td><?php echo $leave->from_date . ' - ' . $leave->to_date ?></td>
<td><?php echo $leave->reason ?></td>
<td>
<select id="status" data-plugin-selectTwo class="form-control populate placeholder" >
<option value="Pending">Pending</option>
<option value="Granted">Granted</option>
<option value="Rejected">Rejected</option>
</select>
</td>
</tr>
<?php endforeach; ?>
<!-- //onchange="update_status('<?php echo base_url().'status/leave/'.$employee_id ?>')" onchange="myFunction();" -->
</tbody>
</table>
</div>
<div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$("#status").ready(function () {
$(this).change(function () {
//var y =$('#status').val();
//alert($('#status option:selected').val() );
//alert($("#status").select());
// var x = $('#employee_id').val();
// alert(this.x)
console.log(1);
$.ajax({
url :'<?php echo base_url() ?>leave/status',
data : {
status : $(this).val(),
employee_id : $('#employee_id').val(),
// name : $('#name').val(),
},
dataType: 'json',
success : function(response) {
alert(response);
}
});
});
});
</script>
I have foreach loop and there is a drop-down list with values. If i have 4 loops then I want to update leaves for only 1-st loop, means id = 1, using ajax it works perfectly.
Now I want to update the leave for id = 2 but the problem is, jquery is not getting the id = 2 value, it selects the first id value means id =1 .
now I would like to update the id = 2 to update their leave as well.
You can't use same id multiple times.
First change in your html
<?php foreach ($leave as $leave): ?>
<tr class="gradeX">
<td><?php echo $count++ ?></td>
<td id="name"><?php echo $leave->first_name . ' ' . $leave->last_name ?>
<input type="button" class="employee_id" value="<?php echo $leave->employee_id ?>"/>
</td>
<td><?php echo $leave->name ?></td>
<td><?php echo $leave->subject ?></td>
<td><?php echo $leave->from_date . ' - ' . $leave->to_date ?></td>
<td><?php echo $leave->reason ?></td>
<td>
<select id="<?php echo $leave->employee_id ?>" class="status" data-plugin-selectTwo class="form-control populate placeholder" >
<option value="Pending">Pending</option>
<option value="Granted">Granted</option>
<option value="Rejected">Rejected</option>
</select>
</td>
</tr>
<?php endforeach; ?>
In Javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".status").change(function () {
var employee_id = $(this).prop('id');
var status = $(this).val();
$.ajax({
url :'<?php echo base_url() ?>leave/status',
data : {'status' : status, 'employee_id' : employee_id},
dataType: 'json',
success : function(response) {
alert(response);
}
});
});
});
</script>
I hope this will solve your problem.
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);
});
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