We Keep Coding

autofill input after subtract

Hi i have this simple code with three inputs
totalofservices, totalontarget & totalofftarget
i would like the flow of the code to be like this
a. user key in total of services
b. user key in total on target (it should not be larger than total of services)
c. Total off target is fill up automatically ( totalof services - totalontarget)
this what i tried so far which is currently not working
https://jsfiddle.net/03oqrczh/4/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.totalofservices').keyup(function() {
var tr = $(this).closest('tr');
tr.find(".totalontarget").val($(this).val());
tr.find(".totalofftarget").val("0");
});
});
$('.totalontarget').keyup( getDiff);
function getDiff(){
var num1=1*$('#totalofservices').val() || 0;
var num2=1*$('#totalontarget').val() || 0;
$('.total').val( num1-num2);
}
</script>
<table>
<tr>
<td>Zone 1</td>
<td><input style='text-align:center' class='form-control totalofservices' type='text' size='20' name='totalofservices[]'>
</td>
<td><input style='text-align:center' class='totalontarget form-control' type='text' size='20' name='totalontarget[]'></td>
<td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20' name='totalofftarget[]'></td>
</tr>
<tr>
<td>Zone 2</td>
<td><input style='text-align:center' class='totalofservices form-control' type='text' size='20' name='totalofservices[]'>
</td>
<td><input style='text-align:center' class='totalontarget form-control' type='text' size='20' name='totalontarget[]'></td>
<td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20' name='totalofftarget[]'></td>
</tr>
<tr>
<td>Zone 3</td>
<td><input style='text-align:center' class='totalofservices form-control' type='text' size='20' name='totalofservices[]'>
</td>
<td><input style='text-align:center' class='totalontarget form-control' type='text' size='20' name='totalontarget[]'></td>
<td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20' name='totalofftarget[]'></td>
</tr>
</table>

Updated the code below so that input values are calculated and set correctly. Key up event handler for totalontarger element was not working properly. I fixed that too.
Replace your script block with this:
<script>
$(document).ready(function() {
$('.totalofservices').keyup(function() {
var tr = $(this).closest('tr');
tr.find(".totalontarget").val(0);
tr.find(".totalofftarget").val("0");
});
$('.totalontarget').keyup(function() {
var tr = $(this).closest('tr');
var num1=tr.find(".totalofservices").val();
var num2=tr.find(".totalontarget").val();
if( num2 > num1 ) {
alert( 'Total of Target must be less than Total on Services' );
}
else {
tr.find(".totalofftarget").val(num1-num2);
}
});
});
</script>
https://jsfiddle.net/cjf7m2ms/

$(document).ready(function() {
$('.totalontarget').keyup(function() {
var tr = $(this).closest('tr');
tr.find(".totalofftarget").val(
parseInt(tr.find('.totalofservices').val()) - parseInt($(this).val())
);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table>
<tr>
<td>Zone 1</td>
<td><input style='text-align:center' class='form-control totalofservices' type='text' size='20' name='totalofservices[]'>
</td>
<td><input style='text-align:center' class='totalontarget form-control' type='text' size='20' name='totalontarget[]'></td>
<td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20' name='totalofftarget[]'></td>
</tr>
<tr>
<td>Zone 2</td>
<td><input style='text-align:center' class='totalofservices form-control' type='text' size='20' name='totalofservices[]'>
</td>
<td><input style='text-align:center' class='totalontarget form-control' type='text' size='20' name='totalontarget[]'></td>
<td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20' name='totalofftarget[]'></td>
</tr>
<tr>
<td>Zone 3</td>
<td><input style='text-align:center' class='totalofservices form-control' type='text' size='20' name='totalofservices[]'>
</td>
<td><input style='text-align:center' class='totalontarget form-control' type='text' size='20' name='totalontarget[]'></td>
<td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20' name='totalofftarget[]'></td>
</tr>
</table>
I am not quite sure about the flow you've mentioning. Let me know if I got it wrong. Now it's calculating once the totalontarget is keyup.

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();

Removing form array element

I have a form which has same products but with different attributes.
The form looks something similar to this:
<form>
<table>
<tr>
<td> Line-1 </td>
<td> <input type='text' name='ítem[1][Size]'</td>
<td> <input type='text' name='ítem[1][Color]'</td>
<td> <input type='text' name='ítem[1][Price]'</td>
</tr>
<tr>
<td> Line-2 </td>
<td> <input type='text' name='ítem[2][Size]'</td>
<td> <input type='text' name='ítem[2][Color]'</td>
<td> <input type='text' name='ítem[2][Price]'</td>
</tr>
<tr>
<td> Line-3 </td>
<td> <input type='text' name='ítem[3][Size]'</td>
<td> <input type='text' name='ítem[3][Color]'</td>
<td> <input type='text' name='ítem[3][Price]'</td>
</tr>
<tr>
<td> Line-4 </td>
<td> <input type='text' name='ítem[4][Size]'</td>
<td> <input type='text' name='ítem[4][Color]'</td>
<td> <input type='text' name='ítem[4][Price]'</td>
</tr>
</table>
</form>
PHP Sample Code:
for($i = 0;$i < count($_POST);$i++){
var_dump($_POST[$i]);
}
Error:
Notice: Undefined offset: 0 in C:\xampp\htdocs\test\testing.php on line 5
If I was to remove item[2] dynamically using js, on submit php would throw an error because it cant find number 2. How could go about this?
Perhaps I'm not doing it right?

In your PHP Code, use foreach as has been suggested:
foreach($_POST['item'] as $item){
echo $item['Size'] . "<br />";
echo $item['Color'] . "<br />";
echo $item['Price'] . "<br />";
echo "<hr />"
}
EDIT:
Another question how would i go about re-changing row numbers once I
deleted row number 2?
This is done in JS or JQuery. Something like:
var i = 1;
$.each($("tr"), function(){
$(this).next("input[name*='Size']").attr("name", "item[" + i + "][Size]");
$(this).next("input[name*='Color']").attr("name", "item[" + i + "][Color]");
$(this).next("input[name*='Price']").attr("name", "item[" + i + "][Price]");
i++;
});

Cascading onchange calculation in javascript

I have list of materials and rate for each material. When user enters quantity for a material, onchange event triggers and calculates material cost as rate*quantity. This I am able to do. I want the sum of all material cost also. I can do that by adding another javascript function in onchange as onchange="mymultiply(100, 'rate_1','quantity_1');mysummation('cost_1','cost_2',...,'sum_cost')". But how to cascade it?
I want a javascript function to trigger when readonly value (cost_1/cost_2 etc) is changed by onchange in quantity_1/quantity_2 etc. onchange works on user input only. Is there a workaround.
So the sample form looks like this.
<table>
<tr><th>material</th><th>rate</th><th>quantity</th><th>cost</th></tr>
<tr>
<td>Material 1</td>
<td><input type='text' id='rate_1' readonly='true' value='100' /></td>
<td><input type='text' id='quantity_1' onchange="mymultiply('rate_1','quantity_1','cost_1');" /></td>
<td><input type='text' id='cost_1' readonly='true' onchange="mysummation('cost_1','cost_2','cost_3','sum_cost');" /></td>
</tr>
<tr> Row 2 data</tr>
<tr> Row 3 data</tr>
</table>
<input type='text' id='sum_cost' readonly='true' />
Javascript looks something like this...
function mymultiply(rate, quantity, cost){
document.getElementById(cost).value=document.getElementById(quantity).value*document.getElementById(rate).value;
}
function mysummation(cost_1, cost_2, cost_3, sum){
document.getElementById(sum).value=document.getElementById(cost_1).value+document.getElementById(cost_2).value+document.getElementById(cost_3).value;
}

Can you try it
Script
<script>
function mymultiply(quantity){
var rate1=document.getElementById('rate_1').value;
document.getElementById('cost_1').value= parseInt(quantity)*parseInt(rate1);
document.getElementById('cost_2').value= parseInt(quantity)*200;
document.getElementById('cost_3').value= parseInt(quantity)*300;
document.getElementById('sum_cost').value= parseInt(document.getElementById('cost_1').value)+parseInt(document.getElementById('cost_2').value)+parseInt(document.getElementById('cost_3').value);
}
</script>
HTML
<table>
<tr><th>material</th><th>rate</th><th>quantity</th><th>cost1</th><th>cost2</th><th>cost3</th></tr>
<tr>
<td>Material 1</td>
<td><input type='text' id='rate_1' readonly='true' value='100' /></td>
<td><input type='text' id='quantity_1' onKeyUp="mymultiply(this.value);" /></td>
<td><input type='text' id='cost_1' readonly='true' /></td>
<td><input type='text' id='cost_2' readonly='true' /></td>
<td><input type='text' id='cost_3' readonly='true' /></td>
</tr>
<tr> Row 2 data</tr>
<tr> Row 3 data</tr>
</table>
Totla Value<input type='text' id='sum_cost' readonly='true' />
I think you want to trigger one function from another function Try this
$(selector).trigger("change");
or
while u calling its
function mymultiply(rate, quantity, cost){
mysummation('100', '200', '300', '600');//call another function also
}

Jquery adding 3 input tags to a table

EDIT:
$(document).ready(function(){
$("#add").click(function(){
var currentValue = parseInt($("#hide").val())+1;
$("#Recipe_table").append("<tr><td><input type='text' name='name[]'/></td><td><input type='text' name='quantity[]'/></td><td><input type='text' name='measure[]'/></td></tr>");
$("#hide").val(currentValue);});
$("#remove").click(function(){
var currentValue = parseInt($("#hide").val())-1;
if ($("table tr").length != 1) {
$('#Recipe_table tr:last').remove();}});
});
Add and Deletion works.
My question is, I dont want to delete all rows or ill end up deleting my headers aswell until there was no table in the first place.
Secondly, The value doesnt decrement when i remove, i simply copied above since it works and adds the value of the hidden field.
Plus, Is there a better way of setting the value, The above approach just increments without hesitation like for example.
Plus how i prevent it from not reverting back to its original value when i submit and back one page.

I don't think the solution you got for counting the number of <td> is a good solution,
use
numberOfTds = $("#table").children('tr').children('td').length;

You have to close your elements
<table id='table'>
<th colspan='3'> Table</th>
<tr>
<td><input type='text' name='name1[]'/></td>
<td><input type='text' name='name2[]'/></td>
<td><input type='text' name='name3[]'/></td>
</tr>
</table>

You haven't closed your cell or table tags. Here's the corrected html. I had to assume where you wanted your final input tag...
<html>
<body>
<table id='table'>
<th colspan='3'> Table</th>
<tr>
<td><input type='text' name='name1[]'/></td>
<td><input type='text' name='name2[]'/></td>
<td><input type='text' name='name3[]'/></td>
</tr>
</table>
<input type='hidden' id='put int on how many rows added'/>
</body>
</html>

You look like a beginner to HTML, CSS and JS(JQuery) so a few rules. Structure your code like so:
<table id='table'>
<th colspan='3'>Table</th>
<tr>
<td><input type='text' name='name1'/></td>
<td><input type='text' name='name2'/></td>
<td><input type='text' name='name3'/></td>
</tr>
</table>
<input type='hidden' name="name4" value="The Text you Want to Store"/>
..but you still need to learn HTML before you can effectively use JS. With JQuery to can get the values of the table elements using:
$('[name="name1"]').val();
and set the value using:
$('[name="name1"]').val("NewValue");
Look at the website w3schools.com for HTML and JS help and jquery.com for learning jquery

Close your </td> tags
<table id='table'>
<th colspan='3'> Table</th>
<tr><td><input type='text' name='name1[]'/></td>
<td><input type='text' name='name2[]'/></td>
<td><input type='text' name='name3[]'/></td>
</tr>
Edit: this will also work
<table id='table'>
<th colspan='3'> Table</th>
<tr><td/><input type='text' name='name1[]'/>
<td/><input type='text' name='name2[]'/>
<td/><input type='text' name='name3[]'/>
</tr>

This is an example how the rows can be added dynamically
HTML
<table id='table'>
<th colspan='3'> Table</th>
<tr><td><input type='text' name='name1[]'/></td>
<td><input type='text' name='name2[]'/></td>
<td><input type='text' name='name3[]'/></td>
</tr>
</table>
<input type="button" id="btn" value="add"/>
Script
$(document).ready(function(){
$("#btn").click(function(){
$("#table").append(" <tr><td><input type='text' name='name1[]'/></td><td><input type='text' name='name2[]'/></td> <td><input type='text' name='name3[]'/></td></tr>");
});
});
Demo
Edit
<input type='hidden' id='hide'/>
var currentValue= parseInt($("#hide").val())+1;;
$("#hide").val(currentValue);