subtract two values using jquery / javascript - javascript

<?php $j=1; ?>
<table class="table">
<thead>
<tr>
<th>Sl No</th>
<th>Item</th>
<th>Current Quantity</th>
<th>Procuring Quantity</th>
<th>Updated Quantity</th>
</tr>
</thead>
<?php
$res=$_POST['supply'];
$result=explode("&",$res);
for($i=0;$i<count($result);$i++){ ?>
<tbody>
<tr class="info">
<?php
$name=$result[$i];
$query=mysql_query("select * from item where item_name='$name'");
$row=mysql_fetch_array($query);
?>
<td><?php echo $j;?></td>
<td><input type="text" name="name[]" id="contact_name" required="required" class="form-control" value="<?php echo $result[$i]; ?>" readonly></td>
<td><input type="text" name="current[]" required="required" class="form-control" value="<?php echo $row['item_qua'];?>"></td>
<td><input type="text" name="procuring[]" id="procuring" required="required" class="form-control"></td>
<td><input type="text" name="updated[]" id="updated" required="required" class="form-control"></td>
</tr>
<?php $j++; } ?>
</tbody>
</table>
I want to subtract Procuring Quantity by Current Quantity.I want result in Updated Quantity. (Current Quantity - Procuring Quantity= Updated Quantity).

Try this : Read current qunatity from previous input and get procuring qunatity from current input. do substraction and add to updated quantity.
NOTE - You have put id for current, procuring and updated quantity and after finishing loop your html will have duplicate id. Please remove that part or assign logic to make unique id.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
// bind change event to procuring quantity
$('input[name="procuring[]"]').change(function(){
var $parentTR = $(this).closest('.info');
// read value for current quantity.
var current = $parentTR.find('input[name="current[]"]').val();
// read value for procuring quantity.
var procuring = $(this).val();
// do substraction and set value in 5th column for updated quantity.
var updated = parseFloat(current) - parseFloat(procuring);
$parentTR.find('input[name="updated[]"]').val(updated );
});
});
</script>
Demo

You can do this by getting the value of the input box by .val() and also give id to current[] , i am giving the id as current. Use the code below to do this
<td><input type="text" name="name[]" id="contact_name" required="required" class="form-control" value="<?php echo $result[$i]; ?>" readonly></td>
<td><input type="text" name="current[]" id="current" required="required" class="form-control" value="<?php echo $row['item_qua'];?>"></td>
<td><input type="text" name="procuring[]" id="procuring" required="required" class="form-control"></td>
<td><input type="text" name="updated[]" id="updated" required="required" class="form-control"></td>
<script>
$(document).ready(function(){
$("input").keyup(function(){
var current = $("#current").val();
var procuring = $("#procuring").val();
$("#updated").val(current - procuring);
});
});
</script>
I hope this helps you

Related

submitting only filled textbox values and discard empt textbox ih form php

I have form which lists all the in stock products from database with price.User will add quantity , it calculated the amounts and submits the form. in the list there are 5 products. Each time user can fill any one or all the 5. While submiting, i want to get only quantity filled values to database. I am not getting how to do it
Here is my code
<tr>
<td><?php echo $Myrow['product']; ?></td>
<input type="hidden" name="product_id[]" value="<?php echo Myrow['id']; ?>" />
<td><input type="text" name="rte[]" value="<?php echo $Myrow['rate']; ?>" readonly="readonly" class="price form-control" /></td>
<td><input type="text" name="Qty[]" class="Qty form-control" /></td>
<td><input type="text" id="amount" name="amount[]" class="amount form-control" /></td>
</tr>
<?php } ?>
</tbody>
How can is submit only non-emptied values. Please help
I think this could help you
$product_id=$_POST['product_id'];
$qty=$_POST['qty'];
foreach ($qty as $key => $value) {
if($value){
.... here you can save $product_id[$key], qty and other
}
}

How to get the NodeValue from <td> type input

I am using this HTML and I am trying to parse it to get the nodeValue of all the elements in the table columns.
<table id="custinfo">
<tr>
<td><label>First Name</label></td>
<td><input type="text" name="firstname" ></td>
</tr>
<tr>
<td><label>Last Name</label></td>
<td><input type="text" name="lastname" ></td>
</tr>
<tr>
<td><label>Phone Number</label></td>
<td><input type="text" name="email" ></td>
</tr>
</table>
Here is the PHP It's only working for the labels but not for the input types.
$Dom= new DOMDocument();
libxml_use_internal_errors(true);
$Dom->loadHTMLFile('Pre_order.html');
$info=$Dom->getElementById('custinfo');
$inforows=$info->getElementsByTagName("tr");
$input_tags = $Dom->getElementsByTagName('input');
$fnamecol=$inforows->item(0)->getElementsByTagName("td");
$fname=$fnamecol->item(1)->nodeValue; //this is returning null Instead of returning the input text value.
After actually adding values to the input elements, try the following
$input_tags->item(1)->getAttribute('value')
(Btw, check the case of $Dom and $dom in your examples.)
Here's some sample code that works when executed at http://sandbox.onlinephpfunctions.com/ :
<?php
$htmlString = <<<HTML
<table id="custinfo">
<tr>
<td><label>First Name</label></td>
<td><input type="text" name="firstname" value="Jane"></td>
</tr>
<tr>
<td><label>Last Name</label></td>
<td><input type="text" name="lastname" value="Doe"></td>
</tr>
<tr>
<td><label>Phone Number</label></td>
<td><input type="text" name="email" value="212-555-1212"></td>
</tr>
</table>
HTML;
$dom= new DOMDocument();
$dom->loadHTML($htmlString);
$input_tags = $dom->getElementsByTagName('input');
echo $input_tags->item(1)->getAttribute('value'); // "Doe"
Use simple_dom_parser.php library instead (Download library: https://sourceforge.net/projects/simplehtmldom/files/ & docs: http://simplehtmldom.sourceforge.net/)
require_once('simple_dom_parser.php');
// Create DOM from file
$html = file_get_html('Pre_order.html');
// Find all labels
foreach($html->find('label') as $label)
echo $label->plaintext . '<br>';
// Find all inputs
foreach($html->find('input') as $input)
echo $input->name . '<br>';

JavaScript - How can I run the javascript in all my html rows

I am creating invoice form, I have written a Java Script to calculate Tax and Discount price as the user the value, But it is just working in one row how can I enable it to work on all the rows
Javascript to calculate discount and tax
Html form
The better option is to do this calculation in PHP itself but if you want to do this in Javascript the you can do something like this:
Try creating a JS function that takes in all the values and the id of output input field and make sure that the id of output field is distinct.
JS Code
function calculate(unit_price, quantity, discount, tax, output_id) {
var subtotal = "do subtotal calc here";
document.getElementById(output_id).value = subtotal;
}
PHP/HTML Code
<?php
// mySQL Code goes here
while($row = mysql_fetch_array($result, MYSAL_ASSOC))
?>
<div class="centered">
<table border="1">
<tr>
<form id = "invoiceform" action="final.php" method="post">
<td><input type="text" id="Sl_no" value="<?php echo $s; ?>"></td> <!-- DO NOT INCREASE $S HERE YET-->
<td><input type="text" id="partno" value="<?php echo $p[$j]; ?>"></td>
<td><input type="text" id="description" value="<?php $row['Description']; ?>"></td>
<td><input type="text" id="unit_price" value="<?php echo $row['Unit_Price']; ?>"></td>
<td><input type="text" id="quantity" value=""></td>
<td><input type="text" id="discount" value=""></td>
<td><input type="text" id="tax" value=""></td>
<td><input type="text" id="<?php echo 'subtotal_'.$s;?>" value=""></td>
<script>
calculate(<?php echo $row['Unit_Price']; ?>, <?php echo $row['Quantity']; ?>, <?php echo $row['Discount']; ?>, <?php echo $row['Tax']; ?>, <?php echo 'subtotal_'.$s; s++;?>);
</script>
</tr>
</table>
</div>
P.S. Try making all the field ids distinct the way i made subtotal id distinct because a HTML page is supposed to have distinct IDs on elements

how can I get a value from the nth element of the closest 'tr'?

I have a dynamic table that contains price, quantity and subtotal on each row. I am trying to write a javascript method that automatically multiples the price and quantity values on each keyup and outputs them as the subtotal.
$('input.value').keyup( function() {
var row = $(this).closest('tr');
var val1 = row.find(':nth-child(1)').value;
var val2 = row.find(':nth-child(2)').value;
console.log(val1);
console.log(val2);
output = row.find(':nth-child(3)');
output.value = val1 * val2;
});
This is as far as I've gotten so far, the console log just shows "undefined" as the values for val1, and val2. Why is this? Am I misunderstanding how .find() works?
I have tried searching on both stack exchange and google, and I can't seem to find a good example of using nth-child based on the currently selected row.
Here is a simplified version of the table row. Each table row has an id based on it's row number.
<tr id = "row_#">
<td>
<?php echo $this->Form->text("Items.{$key}.quantity", array('value' => $item['quantity'], 'class' => 'value')); ?>
</td>
<td>
<?php echo $this->Form->text("Items.{$key}.price", array('value' => $item['price'], 'class' => 'value')); ?>
</td>
<td>
<?php echo $this->Form->text("Items.{$key}.total", array('value' => number_format( $item['price']*$item['quantity'], 2), 'class' => 'subtotal')); ?>
</td>
</tr>
I am using jquery, and cakephp 2.7
In your code, row.find(':nth-child(1)') selects a <td> element -- the first child of the <tr>. But it seems that you want to select <input> elements in each row to get their values.
In my example, below, I've given each input a class that identifies it as a "quantity", "price", or "total" field. I find the closest row to the current <input>. Then I find the value for each input within that row, calculate the total, and set the value of the "total" <input> to that number.
I'm using jQuery's selector context, which is internally equivalent to find().
$('input.value').keyup(function() {
var $row = $(this).closest('tr');
$output = jQuery('input.total', $row),
quantity = jQuery('input.quantity', $row).val(),
price = jQuery('input.price', $row).val(),
total = quantity * price;
$output.val(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" class="value quantity" /></td>
<td><input type="text" class="value price" /></td>
<td><input type="text" class="total" /></td>
</tr>
<tr>
<td><input type="text" class="value quantity" /></td>
<td><input type="text" class="value price" /></td>
<td><input type="text" class="total" /></td>
</tr>
<tr>
<td><input type="text" class="value quantity" /></td>
<td><input type="text" class="value price" /></td>
<td><input type="text" class="total" /></td>
</tr>
</table>
You can use nth-child selectors rather than classes, if you prefer. But remember that "nth" children are the <td> elements, not the <input> elements. You'll need to select the <input> within each "nth" <td> child. Something like:
$row.find('td:nth-child(1) input').val()
See the example below:
$('input.value').keyup(function() {
var $row = $(this).closest('tr');
$output = $row.find('td:nth-child(3) input'),
quantity = $row.find('td:nth-child(1) input').val(),
price = $row.find('td:nth-child(2) input').val(),
total = quantity * price;
$output.val(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" class="value" /></td>
<td><input type="text" class="value" /></td>
<td><input type="text" /></td>
</tr>
<tr>
<td><input type="text" class="value" /></td>
<td><input type="text" class="value" /></td>
<td><input type="text" /></td>
</tr>
<tr>
<td><input type="text" class="value" /></td>
<td><input type="text" class="value" /></td>
<td><input type="text" /></td>
</tr>
</table>
jQuery has no value property....use val() and assuming selectors are valid it should work
var val1 = row.find(':nth-child(1)').val();

Edit Quantity Using Javascript price will adjust

I'm currently doing an project on online shopping cart, whereby customers can edit the quantity before checkout. I wanted to make it such that when customer edit the quantity, the price of the item and total price of all items will be adjusted. I know I can achieve that though javascript. Can't really work and understand it. It will be nice if someone would help me. Thank you so so much!
Ps: I am not sure if my codes are correct, but here's what I tried:
<script type="text/javascript">
function update(form){
var quantity = document.getElementById('#quantity');
var price = quantity * ($list['price']);
document.getElementById("price").value = price;
​}
</script>`
I have not done for the total price yet because the price itself isn't working. I know there's something I miss out. Hope someone can enlighten me.
My HTML:
`//database query
<td align='middle'><input type="number" onChange="update(this)" id="quantity" name="quantity" min="1" max='<?php echo $list['quantity'] ?>' value='1'></td>
<td><input type="text" id="price" value='<?php echo $list['price'] ?>' readonly></td>
<td><input type="text" name="amount" id="amount" readonly></td>`
I may have made stupid mistakes,so it will be nice if someone would explain about how javascript works if I got the wrong concepts. Thanks so much for helping!!:)
see demo here
look this line
quantity = document.getElementById('#quantity');
in this line remove '#'
quantity = document.getElementById(**'quantity'**);
and use parseint to convert to integer
var price = quantity * ($list['price']);
$list['price'] is false
to get price you need to do like this:
document.getElementById('price').value;
final code is :
form.php
//database query
<td align='middle'><input type="number" onChange="update(this)" id="quantity" name="quantity" min="1" max='<?php echo $list['quantity'] ?>' value='1'></td>
<td><input type="text" id="price" value='<?php echo $list['price'] ?>' readonly></td>
<td><input type="text" name="amount" id="amount" readonly></td>`
script.js
<script type="text/javascript">
function update(form){
var quantity = document.getElementById('quantity').value;
var price = document.getElementById("price").value;
price = parseInt(price);
quantity = parseInt(quantity);
var amount= quantity * price ;
document.getElementById("amount").value = amount;
}
</script>`
demo here
index.php
<form>
<table>
<thead>
<tr>
<th>quantity</th>
<th>price</th>
<th>amount</th>
</tr>
</thead>
<tbody>
<!-- if u use php
<?php foreach($i=0; $i<$count; $i++){ ?>
<tr>
<td><input type="number" id="quantity_$i" name="quantity_$i" min="1" max='20' value='1'
onChange="iteration = 1; update(iteration)" >
</td>
<td><input type="text" id="price_$i" value='25' readonly='readonly' ></td>
<td><input type="text" name="amount_$i" id="amount_$i" readonly value='25'></td>
</tr>
<?php } ?>
-->
<tr>
<td><input type="number" id="quantity_1" name="quantity_1" min="1" max='20' value='1'
onChange="iteration = 1; update(iteration)" >
</td>
<td><input type="text" id="price_1" value='25' readonly='readonly' ></td>
<td><input type="text" name="amount_1" id="amount_1" readonly value='25'></td>
</tr>
<tr>
<td><input type="number" id="quantity_2" name="quantity_2" min="1" max='20' value='1'
onChange="iteration = 2; update(iteration)" >
</td>
<td><input type="text" id="price_2" value='15' readonly='readonly' ></td>
<td><input type="text" name="amount_2" id="amount_2" readonly value='15'></td>
</tr>
</tbody>
</table>
</form>
script.js
function update(iteration){
// alert(iteration);
var quantity = document.getElementById('quantity_' + iteration).value;
// alert('quantity_' + iteration);
var price = document.getElementById('price_' + iteration).value;
price = parseInt(price);
quantity = parseInt(quantity);
var amount= quantity * price ;
document.getElementById('amount_' + iteration).value = amount;
}

Categories