Summation using for loop - javascript

I want to find the total from the input field and set the total value to the particular text field.
Here is my Html:
<table id="table" border="1">
<tr>
<td></td>
<td colspan="4">Injuried</td>
<td colspan="4">Killed</td>
<td colspan="4">Died</td>
</tr>
<tr>
<td></td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
</tr>
<tr>
<td>number</td>
<td><input type="text" size="5" /></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text"size="5" /></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
</tr>
<tr>
<td>number</td>
<td><input type="text" size="5" /></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text"size="5" /></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
</tr>
</table>
Here I want to add each adult,young,children field in each row and set the value to the corresponded total column.I used for loop for this purpose. But It Shows some error while adding.
Here is my sample code.
http://jsfiddle.net/3gxnya5a/


You can use a simple loop like
$(document).ready(function () {
$('#table').on('keyup', 'input', function () {
//loop through each 4th td in each rows as they are the sum elements
$("#table tr").slice(2).find("td:nth-child(4n + 1)").each(function () {
var sum = 0;
//add up the previous 4 values
$(this).prevAll(':lt(3)').find('input').each(function () {
sum += (+this.value || 0)
});
$(this).find('input').val(sum)
})
})
})
$(document).ready(function() {
$('#table').on('keyup', 'input', function() {
$("#table tr").slice(2).find("td:nth-child(4n + 1)").each(function() {
var sum = 0;
$(this).prevAll(':lt(3)').find('input').each(function() {
sum += (+this.value || 0)
});
$(this).find('input').val(sum)
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table" border="1">
<tr>
<td></td>
<td colspan="4">Injuried</td>
<td colspan="4">Killed</td>
<td colspan="4">Died</td>
</tr>
<tr>
<td></td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
</tr>
<tr>
<td>number</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
</tr>
<tr>
<td>number</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
</tr>
</table>


Already answered, but I felt worth adding an alternative.
If you add attributes to the columns you want to add, your code won't / is less likely to break when you add columns/move them around, eg:
<table id='theTable'>
<tbody>
<tr>
<td><input type="text" size="5" class='data-add' /></td>
<td><input type="text" size="5" class='data-add' /></td>
<td><input type="text" size="5" /></td>
<td><input type="text" size="5" class='data-total'/></td>
then
$("#theTable>tbody>tr").each(function() {
var sum = 0;
$(".data-add", this).each(function() {
sum += (+this.value || 0); // stolen from Arun to ignore invalid values etc
});
$(".data-total", this).val(sum);
});

Related

Highlight a word input fields in a table of crosswords puzzle js/jquery

$(".clues_container_h").append("<div class='enuns'><p id='enunH-" + i + "'>" + i + enun_h_arr[i] + "</p></div>");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
//part of the table:
<table id="navigate" class="tblnavigate">
<tbody>
<tr>
<td class="numbers"></td>
<td class="numbers">1</td>
<td class="numbers">2</td>
<td class="numbers">3</td>
<td class="numbers">4</td>
<td class="numbers">5</td>
<td class="numbers">6</td>
<td class="numbers">7</td>
<td class="numbers">8</td>
<td class="numbers">9</td>
<td class="numbers">10</td>
<td class="numbers">11</td>
</tr>
<tr>
<td class="numbers">1</td>
<td><input id="cell-0" autocomplete="off" name="cell-0" onkeypress='validate(event)' type="text" maxlength="1"></td>
<td><input id="cell-1" autocomplete="off" name="cell-1" onkeypress='validate(event)' type="text" maxlength="1"></td>
<td><input id="cell-2" autocomplete="off" name="cell-2" onkeypress='validate(event)' type="text" maxlength="1"></td>
<td><input id="cell-3" autocomplete="off" name="cell-3" onkeypress='validate(event)' type="text" maxlength="1"></td>
<td><input id="cell-4" autocomplete="off" name="cell-4" onkeypress='validate(event)' type="text" maxlength="1"></td>
<td><input id="cell-5" autocomplete="off" name="cell-5" onkeypress='validate(event)' type="text" maxlength="1"></td>
<td><input id="cell-6" autocomplete="off" name="cell-6" onkeypress='validate(event)' type="text" maxlength="1"></td>
<td><input id="cell-7" autocomplete="off" name="cell-7" onkeypress='validate(event)' type="text" maxlength="1"></td>
<td><input id="cell-8" autocomplete="off" name="cell-8" onkeypress='validate(event)' type="text" maxlength="1"></td>
<td><input id="cell-9" autocomplete="off" name="cell-9" onkeypress='validate(event)' type="text" maxlength="1"></td>
<td><input id="cell-10" autocomplete="off" name="cell-10" onkeypress='validate(event)' type="text" maxlength="1"></td>
</tr>
</table>
If i click on any input (square) all the inputs (that belongs to the word) would change background color. How can i achieve this?

How to focus on next row input in the same column by hitting enter key

I am saving Paper result I want to save it fast like we do in ms excel by pressing enter key do focus
on next bottom cell
<tr>
<td>1</td>
<td>Muhammad Umar Abdur Rahman</td>
<td>
<input type="text" value="0" name="ReadingMarks257" onkeydown="Next(event)" class="input">
</td>
<td>
<input type="text" value="0" name="WritingMarks257" onkeydown="Next(event)" class="input">
</td>
<td>
<input type="text" value="0" name="PaperMarks257" onkeydown="Next(event)" class="input">
</tr>
<tr>
<td>2</td>
<td>Muhammad Abu Bakkar</td>
<td>
<input type="text" value="0" name="ReadingMarks258" onkeydown="Next(event)" class="input">
</td>
<td>
<input type="text" value="0" name="WritingMarks258" onkeydown="Next(event)" class="input">
</td>
<td>
<input type="text" value="0" name="PaperMarks258" onkeydown="Next(event)" class="input">
</td>
</tr>
I have already tried
function Next(e) {
if (e.which === 13) {
var Element = $(this).closest('tr').next().find('.input');
Element.focus();
} else {
$("#Msg").html('another Pressed');
}
}

You can use nextElementSibling.focus():
function Next(e) {
if (e.which === 13) {
e.target.nextElementSibling.focus();
}
else {
$("#Msg").html('another Pressed');
}
}

Hey #NibrasAffairs use :first selector.
$('.input').keydown(function (e) {
if (e.which === 13) {
$(this).closest('tr').next().find('input[type=text]:first').focus();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table class="half">
<tr>
<td>2</td>
<td>Muhammad Abu Bakkar</td>
<td><input type="text" value="0" name="ReadingMarks258"
class="input"></td>
<td><input type="text" value="0" name="WritingMarks258"
class="input"></td>
<td><input type="text" value="0" name="PaperMarks258" class="input"></td>
</tr>
<tr>
<td>2</td>
<td>Muhammad Abu Bakkar</td>
<td><input type="text" value="0" name="ReadingMarks258"
class="input"></td>
<td><input type="text" value="0" name="WritingMarks258"
class="input"></td>
<td><input type="text" value="0" name="PaperMarks258" class="input"></td>
</tr>
<tr>
<td>2</td>
<td>Muhammad Abu Bakkar</td>
<td><input type="text" value="0" name="ReadingMarks258"
class="input"></td>
<td><input type="text" value="0" name="WritingMarks258"
class="input"></td>
<td><input type="text" value="0" name="PaperMarks258" class="input"></td>
</tr>
</table>

Javascript calculated field disappearing when being submitted to mysql

I have a Client Data Entry Form, it is quite large but works great. Except for one problem I added a script to calculate the total of up to 5 fields Max. The script works, it does the calculation and the total appears. When I submit the form the data isn't being submitted to mysql.
Here is the script:
<script>
var calculateForm = function () {
document.getElementById("total_paid").value = (Number(document.getElementById("amount1").value) + Number(document.getElementById("amount2").value) + Number(document.getElementById("amount3").value) + Number(document.getElementById("amount4").value) + Number(document.getElementById("amount5").value));
};
</script>
Here is part of the form:
<div class="rent_own_info">
<fieldset name="rent_own">
<legend>Rent / Own</legend>
<table><tbody>
<tr>
<td>Address</td>
<td>Postal Code</td>
<td>Months</td>
<td>Amount</td>
<td>Landlord / Township</td>
</tr>
<tr>
<td><input type="text" name="address1" id="address1"></td>
<td><input type="text" name="pcode1" id="pcode1" size="10"></td>
<td><input type="text" name="months1" id="months1" size="10"></td>
<td><input type="text" name="amount1" id="amount1" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid1" id="paid1"></td>
</tr>
<tr>
<td><input type="text" name="address2" id="address2"></td>
<td><input type="text" name="pcode2" id="pcode2" size="10"></td>
<td><input type="text" name="months2" id="months2" size="10"></td>
<td><input type="text" name="amount2" id="amount2" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid2" id="paid2"></td>
</tr>
<tr>
<td><input type="text" name="address3" id="address3"></td>
<td><input type="text" name="pcode3" id="pcode3" size="10"></td>
<td><input type="text" name="months3" size="10"></td>
<td><input type="text" name="amount3" id="amount3" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid3" id="paid3"></td>
</tr>
<tr>
<td><input type="text" name="address4" id="address4"></td>
<td><input type="text" name="pcode4" id="pcode4" size="10"></td>
<td><input type="text" name="months4" size="10"></td>
<td><input type="text" name="amount4" id="amount4" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid4" id="paid4"></td>
</tr>
<tr>
<td><input type="text" name="address5" id="address5"></td>
<td><input type="text" name="pcode5" id="pcode5" size="10"></td>
<td><input type="text" name="months5" size="10"></td>
<td><input type="text" name="amount5" id="amount5" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid5" id="paid5"></td>
</tr>
<tr>
<td><input type="hidden" name="" id=""></td>
<td><input type="hidden" name="" id="" size="10"></td>
<td><input type="text" name="" size="10" value="Total Paid"></td>
<td><input type="text" name="total_paid" id="total_paid" value="" size="10"></td>
<td><input type="hidden" name="" id=""></td>
</tr>
</tbody></table>
</fieldset>
</div>
I have checked the apache2 and the mysql logs and no errors.
Any help would be greatly appreciated.
Thanx ZZ

set focus to next nextbox on enter key pressed

HTml
<form action="#">
<table cellpadding="0" cellspacing="0" width="100%" class="formTbl">
<tr>
<td width="20%"><label>ExportDate</label></td>
<td width="30%"><input name="TxtExportDate" type="text" id="TxtExportDate" readonly="readonly" />
<img src="Images/icon-calender.png" id="imgEExpDate" />
<span id="cvExportDate" style="color:Red;display:none;"></span>
</td>
<td width="20%"><label>UniqueExportId</label></td>
<td width="30%"><input name="TxtUniqueExportId" type="text" id="TxtUniqueExportId" /></td>
</tr>
<tr>
<td><label>Exporter Of Record</label></td>
<td><input name="TxtExporterOfRecord" type="text" id="TxtExporterOfRecord" /></td>
<td><label>Destination</label></td>
<td><input name="TxtDestination" type="text" id="TxtDestination" /></td>
</tr>
<tr>
<td><label>Transport Mode</label></td>
<td><input name="TxtTransportMode" type="text" id="TxtTransportMode" /></td>
<td><label>Carrier</label></td>
<td><input name="TxtCarrier" type="text" id="TxtCarrier" /></td>
</tr>
<tr>
<td><label>AESNo</label></td>
<td><input name="TxtAESNo" type="text" id="TxtAESNo" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvAESNo" style="display:none;"></span></td>
<td><label>AESDate</label></td>
<td><input name="TxtAESDate" type="text" id="TxtAESDate" readonly="readonly" />
<img src="Images/icon-calender.png" id="imgAESDate" />
<span id="cvAESDate" style="color:Red;display:none;"></span>
</td>
</tr>
<tr>
<td><label>Status</label></td>
<td><input name="txtStatus" type="text" id="txtStatus" /></td>
<td colspan="2"></td>
</tr>
<tr>
<td><label>Reference 1</label></td>
<td><input name="TxtReference1" type="text" id="TxtReference1" /></td>
<td><label>Reference 2</label></td>
<td><input name="TxtReference2" type="text" id="TxtReference2" /></td>
</tr>
<tr>
<td><label>Reference 3</label></td>
<td><input name="TxtReference3" type="text" id="TxtReference3" /></td>
<td><label>Reference 4</label></td>
<td><input name="TxtReference4" type="text" id="TxtReference4" /></td>
</tr>
<tr>
<td><label>Reference 5</label></td>
<td><input name="TxtReference5" type="text" id="TxtReference5" /></td>
<td><label>Reference 6</label></td>
<td><input name="TxtReference6" type="text" id="TxtReference6" /></td>
</tr>
<tr>
<td><label>Reference 7</label></td>
<td><input name="TxtReference7" type="text" id="TxtReference7" /></td>
<td><label>Reference 8</label></td>
<td><input name="TxtReference8" type="text" id="TxtReference8" /></td>
</tr>
<tr>
<td><label>Direct ID</label></td>
<td><input name="TxtDirectId" type="text" id="TxtDirectId" /></td>
<td><label>Produced Date</label></td>
<td><input name="TxtProducedDate" type="text" id="TxtProducedDate" readonly="readonly" />
<img src="Images/icon-calender.png" id="imgProduceDate" />
<span id="cvProducedDate" style="color:Red;display:none;"></span>
</td>
</tr>
<tr>
<td><label>Goods Issued Date</label></td>
<td><input name="TxtGoodsIssuedDate" type="text" id="TxtGoodsIssuedDate" readonly="readonly" />
<img src="Images/icon-calender.png" id="imgGoodIssueDate" />
<span id="cvGoodsIssuedDate" style="color:Red;display:none;"></span>
</td>
<td><label>Shipping Date</label></td>
<td><input name="TxtShippingDate" type="text" id="TxtShippingDate" readonly="readonly" />
<img src="Images/icon-calender.png" id="imgShippingDate" />
<span id="cvShippingDate" style="color:Red;display:none;"></span>
</td>
</tr>
<tr>
<td><label>Part No</label></td>
<td><input name="TxtPartNo" type="text" id="TxtPartNo" /></td>
<td><label>Alternate Part</label></td>
<td><input name="TxtAlternatePart" type="text" id="TxtAlternatePart" /></td>
</tr>
<tr>
<td><label>Unit Of Measuremnt</label></td>
<td><input name="TxtUnitOfMeasuremnt" type="text" id="TxtUnitOfMeasuremnt" /></td>
<td><label>Export Qty</label></td>
<td><input name="TxtExportQty" type="text" id="TxtExportQty" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvExportQty" style="display:none;"></span></td>
</tr>
<tr>
<td><label>Part Description</label></td>
<td><input name="TxtDescription" type="text" id="TxtDescription" /></td>
<td><label>Claim Code</label></td>
<td><input name="TxtClaimCode" type="text" id="TxtClaimCode" /></td>
</tr>
<tr>
<td><label>Avail Qty</label></td>
<td><input name="TxtAvailQty" type="text" id="TxtAvailQty" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvAvailQty" style="display:none;"></span></td>
<td><label>Cont Qty</label></td>
<td><input name="TxtContQty" type="text" id="TxtContQty" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvContQty" style="display:none;"></span></td>
</tr>
<tr>
<td><label>ScheduledB</label></td>
<td><input name="TxtScheduledB" type="text" maxlength="10" id="TxtScheduledB" /></td>
<td><label>HIT</label></td>
<td><input name="TxtHIT" type="text" id="TxtHIT" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvHIT" style="display:none;"></span></td>
</tr>
<tr>
<td><label>FTA Duty</label></td>
<td><input name="TxtFTADuty" type="text" id="TxtFTADuty" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvFTADuty" style="display:none;"></span></td>
<td><label>FTA Rate</label></td>
<td><input name="TxtFTARate" type="text" id="TxtFTARate" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvFTARate" style="display:none;"></span></td>
</tr>
<tr>
<td><label>US Duty</label></td>
<td><input name="TxtUSDuty" type="text" id="TxtUSDuty" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvUSDuty" style="display:none;"></span></td>
<td><label>US Rate</label></td>
<td><input name="TxtUSRate" type="text" id="TxtUSRate" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvUSRate" style="display:none;"></span></td>
</tr>
<tr>
<td>
<label>
Share Partner Code</label>
</td>
<td>
<input name="TxtSharePartnerCode" type="text" id="TxtSharePartnerCode" />
</td>
<td><label> Contract Number </label> </td>
<td>
<input name="txtContractNumber" type="text" maxlength="15" id="txtContractNumber" class="TextBox" autocomplete="Off" />
</td>
</tr>
<tr>
<td></td>
<td colspan="3">
<input type="submit" name="BtnAdd" value="Save" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("BtnAdd", "", true, "AddExport", "", false, false))" id="BtnAdd" class="blueBtn" />
<input type="submit" name="BtnCancel" value="Cancel" id="BtnCancel" class="blueBtn" />
</td>
</tr>
</table>
<input type="submit" value="submit"/>
</form>
Javascript
$("input").bind("keydown", function(event) {
if (event.which === 13) {
event.stopPropagation();
event.preventDefault();
$(this).nextAll("input").eq(0).focus();
}
});
I have update this fiddle
http://jsfiddle.net/andrewwhitaker/GRtQY/
with this
fiddle
http://jsfiddle.net/mparvez1986/L8Ax7/
but updated fiddle is not working, please help

That's because .nextAll() only selects the next siblings and in your first fiddle inputs are siblings which is not case in the second fiddle. The better option in your case is using the .index() method:
var $inputs = $("input").on("keydown", function(event) {
if (event.which === 13) {
event.stopPropagation();
event.preventDefault();
// `i` is the index of the current element
// in the cached jQuery collection
var i = $inputs.index(this);
$inputs.eq(i+1).focus();
}
});
http://jsfiddle.net/6S7Kc/

Jquery Sum by Group from Table/Input Data

I'm looking to Group my Table data and Sum by the group (like sum price by product). In a second Table.
I want group or filter by Item column, and sum the result of the Price column.
So Oranges (having two lines) should be one line with Sum price.
See this example below:
<table width="400" border="1">
<tr>
<td>Item</td>
<td>Location</td>
<td>Quantity</td>
<td>Price</td>
</tr>
<tr>
<td><input name="item" type="text" id="item" value="Orange" /></td>
<td><input name="location" type="text" id="location" value="Tree" /></td>
<td><input name="quantity" type="text" id="quantity" value="3" /></td>
<td><input name="price" type="text" id="price" value="3.00" /></td>
</tr>
<tr>
<td><input name="item" type="text" id="item2" value="Apple" /></td>
<td><input name="location" type="text" id="location" value="Tree" /></td>
<td><input name="quantity" type="text" id="quantity" value="1" /></td>
<td><input name="price" type="text" id="price" value="1.00" /></td>
</tr>
<tr>
<td><input name="item" type="text" id="item" value="Orange" /></td>
<td><input name="location" type="text" id="location" value="Tree" /></td>
<td><input name="quantity" type="text" id="quantity" value="4" /></td>
<td><input name="price" type="text" id="price" value="4.00" /></td>
</tr>
<tr>
<td><input name="item" type="text" id="item" value="Grapes" /></td>
<td><input name="location" type="text" id="location" value="Vine" /></td>
<td><input name="quantity" type="text" id="quantity" value="10" /></td>
<td><input name="price" type="text" id="price" value="10.00" /></td>
</tr>
</table>
<p> </p>
<table width="400" border="1">
<tr>
<td>Orange</td>
<td>7</td>
<td>7.00</td>
</tr>
<tr>
<td>Apple</td>
<td>1</td>
<td>1.00</td>
</tr>
<tr>
<td>Grapes</td>
<td>10</td>
<td>10.00</td>
</tr>
</table>

First change id "price" to class, then
$(document).ready(function(){
var sum = 0;
$('.price').each(function(){
sum += $(this).val();
});
alert("The sum is " + sum);
});
You can modify above code to get sum in button click event too.

Categories