I am trying to activate keyup event on an input element, the problem is it didn't trigger once I press a key, I have to do another key event to activate it, which is not normal!
Here's my code:
$(".conv").keyup(function(){
var itemId = new Array();
$(".itemId").each(function() {
itemId.push($(this).text());
});
if (itemId.length == 0 || isEmpty($(this).val())) {
$(this).val('0.00');
return false;
}
if (!$.isNumeric($(this).val())) {
alert("Only numeric values are allowed in '" + $(this).parent().parent().find('th').text() + "' field.");
return false;
}
calcShipping();
});
I tried to use on like this, but also not working:
$('body').on("keyup", ".plus", function(){
var itemId = new Array();
$(".itemId").each(function() {
itemId.push($(this).text());
});
if (itemId.length == 0) {
$(this).val('0.00');
return false;
}
calcShipping();
});
Calculate shipping function:
var calcShipping = function() {
if (isEmpty($(".totalCost2").text())) {
$(".totalCost2").text(parseInt($(".totalCost").text()));
}
var plus = 0;
var conv = parseInt($(".conv").val());
var tCost = parseInt($(".totalCost2").text());
var tQty = 0;
var tFinal = 0;
var tLast = 0;
var qty = 0;
var totalCost = 0;
var cost = new Array();
var qtyCost = new Array();
$("#txtItems2").attr('disabled','disabled');
$("#btnReset2").attr('disabled','disabled');
$("#uploadItems").attr('disabled','disabled');
$("#startUpload").attr('disabled','disabled');
$(".plus").each(function(){
if (isEmpty($(this).val())) {
$(this).val('0.00');
}
if (!$.isNumeric($(this).val())) {
alert("Only numeric values are allowed in '" + $(this).parent().parent().find('th').text() + "' field.");
return false;
}
plus += parseInt($(this).val());
});
$(".qty").each(function() {
qtyCost.push(parseInt($(this).text()));
tQty += parseInt($(this).text());
});
$(".cost").each(function() {
cost.push($(this).text());
});
tFinal = plus + tCost;
tLast = tFinal/tQty;
var qty = 0;
$(".cost").each(function(){
qty = parseInt($(this).parent().parent().find($(".qty")).text());
$(this).text(tLast * qty * conv);
qty = 0;
});
for (var i = 0; i < cost.length; i++)
{
totalCost += (cost[i] * qtyCost[i]);
}
$(".totalCost").text(totalCost.toFixed(2));
}
Any advice?
Try the following
$('.conv').on("input", function() {
//do what you need to do here
});
Something like this
I found the problem, I have to recalculate the ".cost" after modifying it, not before, like this:
$(".cost").each(function(){
qty = parseInt($(this).parent().parent().find($(".qty")).text());
var newCost = tLast * qty * conv;
$(this).text(newCost);
qty = 0;
});
$(".cost").each(function() {
cost.push($(this).text());
});
Related
I am trying to implement 2 different isotope grids filter + pagination on one page and have issues setting up the second one.
As you can see on my pen, the first one is working and not the second one. I used the same id and class for both grid and think the issue is there but I couldn't manage to update my javascript to make it work!
Could someone help me with that?
Thanks
https://codepen.io/tcosteur/pen/oNWoNWP
here is my js:
function cbChange(obj) {
var cbs = document.getElementsByClassName("filter-item");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
}
obj.checked = true;
}
$(document).ready(function() {
// filter items on button click
$('.filter-button-group').on('click', 'li', function() {
var filterValue = $(this).attr('data-filter');
$('.grid').isotope({
filter: filterValue
});
$('.filter-button-group li').removeClass('active');
$(this).addClass('active');
});
})
var itemSelector = ".item";
var $checkboxes = $('.filter-item');
var $container = $('#products').isotope({
itemSelector: itemSelector
});
//Ascending order
var responsiveIsotope = [
[480, 4],
[720, 6]
];
var itemsPerPageDefault = 8;
var itemsPerPage = defineItemsPerPage();
var currentNumberPages = 1;
var currentPage = 1;
var currentFilter = '*';
var filterAttribute = 'data-filter';
var filterValue = "";
var pageAttribute = 'data-page';
var pagerClass = 'isotope-pager';
// update items based on current filters
function changeFilter(selector) {
$container.isotope({
filter: selector
});
}
//grab all checked filters and goto page on fresh isotope output
function goToPage(n) {
currentPage = n;
var selector = itemSelector;
var exclusives = [];
// for each box checked, add its value and push to array
$checkboxes.each(function(i, elem) {
if (elem.checked) {
selector += (currentFilter != '*') ? '.' + elem.value : '';
exclusives.push(selector);
}
});
// smash all values back together for 'and' filtering
filterValue = exclusives.length ? exclusives.join('') : '*';
// add page number to the string of filters
var wordPage = currentPage.toString();
filterValue += ('.' + wordPage);
changeFilter(filterValue);
}
// determine page breaks based on window width and preset values
function defineItemsPerPage() {
var pages = itemsPerPageDefault;
for (var i = 0; i < responsiveIsotope.length; i++) {
if ($(window).width() <= responsiveIsotope[i][0]) {
pages = responsiveIsotope[i][1];
break;
}
}
return pages;
}
function setPagination() {
var SettingsPagesOnItems = function() {
var itemsLength = $container.children(itemSelector).length;
var pages = Math.ceil(itemsLength / itemsPerPage);
var item = 1;
var page = 1;
var selector = itemSelector;
var exclusives = [];
// for each box checked, add its value and push to array
$checkboxes.each(function(i, elem) {
if (elem.checked) {
selector += (currentFilter != '*') ? '.' + elem.value : '';
exclusives.push(selector);
}
});
// smash all values back together for 'and' filtering
filterValue = exclusives.length ? exclusives.join('') : '*';
// find each child element with current filter values
$container.children(filterValue).each(function() {
// increment page if a new one is needed
if (item > itemsPerPage) {
page++;
item = 1;
}
// add page number to element as a class
wordPage = page.toString();
var classes = $(this).attr('class').split(' ');
var lastClass = classes[classes.length - 1];
// last class shorter than 4 will be a page number, if so, grab and replace
if (lastClass.length < 4) {
$(this).removeClass();
classes.pop();
classes.push(wordPage);
classes = classes.join(' ');
$(this).addClass(classes);
} else {
// if there was no page number, add it
$(this).addClass(wordPage);
}
item++;
});
currentNumberPages = page;
}();
// create page number navigation
var CreatePagers = function() {
var $isotopePager = ($('.' + pagerClass).length == 0) ? $('<div class="' + pagerClass + '"></div>') : $('.' + pagerClass);
$isotopePager.html('');
if (currentNumberPages > 1) {
for (var i = 0; i < currentNumberPages; i++) {
var $pager = $('');
$pager.html(i + 1);
$pager.click(function() {
var page = $(this).eq(0).attr(pageAttribute);
goToPage(page);
});
$pager.appendTo($isotopePager);
}
}
$container.after($isotopePager);
}();
}
// remove checks from all boxes and refilter
function clearAll() {
$checkboxes.each(function(i, elem) {
if (elem.checked) {
elem.checked = null;
}
});
currentFilter = '*';
setPagination();
goToPage(1);
}
setPagination();
goToPage(1);
//event handlers
$checkboxes.change(function() {
var filter = $(this).attr(filterAttribute);
currentFilter = filter;
setPagination();
goToPage(1);
});
$('#clear-filters').click(function() {
clearAll()
});
$(window).resize(function() {
itemsPerPage = defineItemsPerPage();
setPagination();
goToPage(1);
});
I am currently making an autocomplete function that retrieves a bunch of information encoded by JSON and allows the user to search through it. There is a slight delay in the search results, and I think that a for loop inside of another for loop is the cause of this issue. Below is the Javascript file:
var username = [];
var businessname = [];
var fname = [];
var lname = [];
var fullname = [];
var clientid = [];
var bankArray = [];
var data_for_post = [];
var focusedArrayElement = "";
var started = false;
var currentSelectedList = 0;
var searchString = "";
$(document).keydown(function(event) {
switch(event.keyCode) {
case 40:
if (!$("#results li:first").hasClass("selected") && !started) {
$("#results li:first").addClass("selected");
started = true;
} else {
if($("#results li.selected").next().length > 0) {
$("#results li.selected").next().addClass("selected");
$("#results li.selected:first").removeClass("selected");
}
}
assign = $(".selected").text();
$(".autocomplete").val(assign);
break;
case 38:
$("#results li.selected").prev().addClass("selected");
$("#results li.selected:last").removeClass("selected");
if(!$("#results").siblings('.selected').length > 0) {
started = false;
}
assign = $(".selected").text();
$(".autocomplete").val(assign);
break;
case 13:
assign = $(".selected").text();
console.log(assign);
$("#results").empty();
$("#inner").text(assign);
break;
}
});
$(document).ready(function() {
$.ajax({
type: "GET",
dataType: "json",
url: "autocomplete.php?search=1",
success: function(data) {
$.each(data.client, function(key, value) {
username.push(value.username);
businessname.push(value.businessname);
fname.push(value.fname);
lname.push(value.lname);
clientid.push(value.clientid);
for(var i = 0; i < fname.length; i++) {
fullname[i] = fname[i] + " " + lname[i];
}
});
bankArray = [username, businessname, fullname, clientid];
console.log(bankArray);
}
});
$(".autocomplete").on("keyup change", function(e) {
console.log(e.keyCode);
if(e.keyCode != 38 && e.keyCode != 40) {
$("#results").empty();
}
currentSearchString = $(".autocomplete").val();
if(currentSearchString) {
//$("#results").css('border-top', '1px solid black');
for(var i = 0; i < bankArray.length; i++) {
for(var j = 0; j < bankArray[i].length; j++) {
focusedArrayElement = bankArray[i][j].toLowerCase();
usernames = bankArray[0];
businessnames = bankArray[2];
fullnames = bankArray[3];
if(focusedArrayElement.indexOf(currentSearchString.toLowerCase()) > -1) {
focused_businessname = bankArray[1][j];
focused_fullname = bankArray[2][j];
focused_clientid = bankArray[3][j];
postedData = focused_fullname + " -- " + focused_businessname;
if (!$(".clientid." + focused_clientid).length) {
$("#results").append("<li id='" + (j + 1) + "' class='clientid " + focused_clientid + "'>" + postedData + "</li>");
}
}
}
}
}
else {
$("#results").empty();
started = false;
}
});
});
The basic principle is that when the document readies, an ajax call pushes all of the JSON data into a multidimensional array with different categories of information. From here, a first for loop searches through each array in the bankArray, and the second searches through each element of the current array. If the current search string in the input field matches the focused element from the array, it appends that information to a div below.
I feel as if the code is inefficient in how it deals with the JSON data and checks through it. If anyone has any suggestions on how to optimize the code, that would be great.
Hello Auto completion is not working well in my application.When we type a name it displays only a blank list[ Screenshots attached ].
Controller Code
public function list_UserByName($letters)
{
if(strpos($letters, ","))
{
$letters1 = explode(",",$letters);
$lecount = count($letters1);
$letters = $letters1[$lecount-1];
}
$letters = preg_replace("/[^a-z0-9 ]/si","",$letters);
$response=$this->user_model->getAutoUserList($letters);
}
Model Code
public function getAutoUserList($letters)
{
$letters = preg_replace("/[^a-z0-9 ]/si","",$letters);
//AND user_type='C' AND user_status='A'
$query="select * from gm_users where uname Like '%$letters%'";
$result_query =$this->db->query($query);
foreach($result_query->result() as $result)
{
//echo "###".$result."|";
//$pinlevel =$this->functions->get_pinlevel($result->pinLevel);
//echo $result->userId."###".$result->uname." [ ".$pinlevel." ] "."|";
echo $result->userId."###".$result->uname."".$result->address." ".$result->city."|";
}
}
billing.php
<input type="text" autocomplete="off" size="20" name="txtname" id="txtname" onkeyup="ajax_showOptions(this,'getCountriesByLetters',event);" value=""/>
ajax-dynamic-list.js
/************************************************************************************************************
(C) www.dhtmlgoodies.com, April 2006
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var ajaxBox_offsetX = 25;
var ajaxBox_offsetY = 5;
var ajax_list_externalFile = site_url+'/catalog/list_UserByName'; // Path to external file
var minimumLettersBeforeLookup = 1; // Number of letters entered before a lookup is performed.
var ajax_list_objects = new Array();
var ajax_list_cachedLists = new Array();
var ajax_list_activeInput = false;
var ajax_list_activeItem;
var ajax_list_optionDivFirstItem = false;
var ajax_list_currentLetters = new Array();
var ajax_optionDiv = false;
var ajax_optionDiv_iframe = false;
var ajax_list_MSIE = false;
if(navigator.userAgent.indexOf('MSIE')>=0 && navigator.userAgent.indexOf('Opera')<0)ajax_list_MSIE=true;
var currentListIndex = 0;
function ajax_getTopPos(inputObj)
{
var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null){
returnValue += inputObj.offsetTop;
}
return returnValue;
}
function ajax_list_cancelEvent()
{
return false;
}
function ajax_getLeftPos(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
return returnValue;
}
// Edited
function ajax_option_setValue_bkp(e,inputObj)
{
if(!inputObj)inputObj=this;
var tmpValue = inputObj.innerHTML;
//alert(inputObj.id);
document.getElementById('saleUserId').value=inputObj.id;
if(ajax_list_MSIE)tmpValue = inputObj.innerText;else tmpValue = inputObj.textContent;
if(!tmpValue)tmpValue = inputObj.innerHTML;
val = ajax_list_activeInput.value.split(',');
vals = '';
count = val.length - 1;
for(i=0;i<count;i++)
{
vals = vals + val[i] + ',';
}
ajax_list_activeInput.value = vals + tmpValue;
if(document.getElementById(ajax_list_activeInput.name + '_hidden'))document.getElementById(ajax_list_activeInput.name + '_hidden').value = inputObj.id;
ajax_options_hide();
}
function ajax_option_setValue(e,inputObj)
{
if(!inputObj)inputObj=this;
var tmpValue = inputObj.innerHTML;
//alert(inputObj.id);
document.getElementById('saleUserId').value=inputObj.id;
if(ajax_list_MSIE)tmpValue = inputObj.innerText;else tmpValue = inputObj.textContent;
if(!tmpValue)tmpValue = inputObj.innerHTML;
ajax_list_activeInput.value = tmpValue;
if(document.getElementById(ajax_list_activeInput.name + '_hidden'))document.getElementById(ajax_list_activeInput.name + '_hidden').value = inputObj.id;
ajax_options_hide();
}
function ajax_options_hide()
{
if(ajax_optionDiv)ajax_optionDiv.style.display='none';
if(ajax_optionDiv_iframe)ajax_optionDiv_iframe.style.display='none';
}
function ajax_options_rollOverActiveItem(item,fromKeyBoard)
{
if(ajax_list_activeItem)ajax_list_activeItem.className='optionDiv';
item.className='optionDivSelected';
ajax_list_activeItem = item;
if(fromKeyBoard){
if(ajax_list_activeItem.offsetTop>ajax_optionDiv.offsetHeight){
ajax_optionDiv.scrollTop = ajax_list_activeItem.offsetTop - ajax_optionDiv.offsetHeight + ajax_list_activeItem.offsetHeight + 2 ;
}
if(ajax_list_activeItem.offsetTop<ajax_optionDiv.scrollTop)
{
ajax_optionDiv.scrollTop = 0;
}
}
}
function ajax_option_list_buildList(letters,paramToExternalFile)
{
ajax_optionDiv.innerHTML = '';
ajax_list_activeItem = false;
if(ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length<=1){
ajax_options_hide();
return;
}
ajax_list_optionDivFirstItem = false;
var optionsAdded = false;
for(var no=0;no<ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length;no++){
if(ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()][no].length==0)continue;
optionsAdded = true;
var div = document.createElement('DIV');
var items = ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()][no].split(/###/gi);
if(ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length==1 && ajax_list_activeInput.value == items[0]){
ajax_options_hide();
return;
}
div.innerHTML = items[items.length-1];
div.id = items[0];
div.className='optionDiv';
div.onmouseover = function(){ ajax_options_rollOverActiveItem(this,false) }
div.onclick = ajax_option_setValue;
if(!ajax_list_optionDivFirstItem)ajax_list_optionDivFirstItem = div;
ajax_optionDiv.appendChild(div);
}
if(optionsAdded){
ajax_optionDiv.style.display='block';
if(ajax_optionDiv_iframe)ajax_optionDiv_iframe.style.display='';
ajax_options_rollOverActiveItem(ajax_list_optionDivFirstItem,true);
}
}
function ajax_option_list_showContent(ajaxIndex,inputObj,paramToExternalFile,whichIndex)
{
if(whichIndex!=currentListIndex)return;
var letters = inputObj.value;
var content = ajax_list_objects[ajaxIndex].response;
var elements = content.split('|');
//alert(content);
ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()] = elements;
ajax_option_list_buildList(letters,paramToExternalFile);
}
function ajax_option_resize(inputObj)
{
ajax_optionDiv.style.top = (ajax_getTopPos(inputObj) + inputObj.offsetHeight + ajaxBox_offsetY) + 'px';
ajax_optionDiv.style.left = (ajax_getLeftPos(inputObj) + ajaxBox_offsetX) + 'px';
if(ajax_optionDiv_iframe){
ajax_optionDiv_iframe.style.left = ajax_optionDiv.style.left;
ajax_optionDiv_iframe.style.top = ajax_optionDiv.style.top;
}
}
function ajax_showOptions(inputObj,paramToExternalFile,e)
{
document.getElementById('saleUserId').value='';
if(e.keyCode==13 || e.keyCode==9)return;
if(ajax_list_currentLetters[inputObj.name]==inputObj.value)return;
if(!ajax_list_cachedLists[paramToExternalFile])ajax_list_cachedLists[paramToExternalFile] = new Array();
ajax_list_currentLetters[inputObj.name] = inputObj.value;
if(!ajax_optionDiv){
ajax_optionDiv = document.createElement('DIV');
ajax_optionDiv.id = 'ajax_listOfOptions';
document.body.appendChild(ajax_optionDiv);
if(ajax_list_MSIE){
ajax_optionDiv_iframe = document.createElement('IFRAME');
ajax_optionDiv_iframe.border='0';
ajax_optionDiv_iframe.style.width = ajax_optionDiv.clientWidth + 'px';
ajax_optionDiv_iframe.style.height = ajax_optionDiv.clientHeight + 'px';
ajax_optionDiv_iframe.id = 'ajax_listOfOptions_iframe';
document.body.appendChild(ajax_optionDiv_iframe);
}
var allInputs = document.getElementsByTagName('INPUT');
for(var no=0;no<allInputs.length;no++){
if(!allInputs[no].onkeyup)allInputs[no].onfocus = ajax_options_hide;
}
var allSelects = document.getElementsByTagName('SELECT');
for(var no=0;no<allSelects.length;no++){
allSelects[no].onfocus = ajax_options_hide;
}
var oldonkeydown=document.body.onkeydown;
if(typeof oldonkeydown!='function'){
document.body.onkeydown=ajax_option_keyNavigation;
}else{
document.body.onkeydown=function(){
oldonkeydown();
ajax_option_keyNavigation() ;}
}
var oldonresize=document.body.onresize;
if(typeof oldonresize!='function'){
document.body.onresize=function() {ajax_option_resize(inputObj); };
}else{
document.body.onresize=function(){oldonresize();
ajax_option_resize(inputObj) ;}
}
}
if(inputObj.value.length<minimumLettersBeforeLookup){
ajax_options_hide();
return;
}
ajax_optionDiv.style.top = (ajax_getTopPos(inputObj) + inputObj.offsetHeight + ajaxBox_offsetY) + 'px';
ajax_optionDiv.style.left = (ajax_getLeftPos(inputObj) + ajaxBox_offsetX) + 'px';
if(ajax_optionDiv_iframe){
ajax_optionDiv_iframe.style.left = ajax_optionDiv.style.left;
ajax_optionDiv_iframe.style.top = ajax_optionDiv.style.top;
}
ajax_list_activeInput = inputObj;
ajax_optionDiv.onselectstart = ajax_list_cancelEvent;
currentListIndex++;
if(ajax_list_cachedLists[paramToExternalFile][inputObj.value.toLowerCase()]){
ajax_option_list_buildList(inputObj.value,paramToExternalFile,currentListIndex);
}else{
var tmpIndex=currentListIndex/1;
ajax_optionDiv.innerHTML = '';
var ajaxIndex = ajax_list_objects.length;
ajax_list_objects[ajaxIndex] = new sack();
var search_key = inputObj.value.replace(" ","+");
//search_key1 = search_key.replace(",",",");
var url = ajax_list_externalFile + '/' +search_key;
ajax_list_objects[ajaxIndex].requestFile = url; // Specifying which file to get
ajax_list_objects[ajaxIndex].onCompletion = function(){ ajax_option_list_showContent(ajaxIndex,inputObj,paramToExternalFile,tmpIndex); }; // Specify function that will be executed after file has been found
ajax_list_objects[ajaxIndex].runAJAX(); // Execute AJAX function
}
}
function wordcount(string) {
var a = string.split(/\s+/g); // split the sentence into an array of words
return a.length;
}
function ajax_option_keyNavigation(e)
{
if(document.all)e = event;
if(!ajax_optionDiv)return;
if(ajax_optionDiv.style.display=='none')return;
if(e.keyCode==38){ // Up arrow
if(!ajax_list_activeItem)return;
if(ajax_list_activeItem && !ajax_list_activeItem.previousSibling)return;
ajax_options_rollOverActiveItem(ajax_list_activeItem.previousSibling,true);
}
if(e.keyCode==40){ // Down arrow
if(!ajax_list_activeItem){
ajax_options_rollOverActiveItem(ajax_list_optionDivFirstItem,true);
}else{
if(!ajax_list_activeItem.nextSibling)return;
ajax_options_rollOverActiveItem(ajax_list_activeItem.nextSibling,true);
}
}
/*if(e.keyCode==13 || e.keyCode==9){ // Enter key or tab key
if(ajax_list_activeItem && ajax_list_activeItem.className=='optionDivSelected')ajax_option_setValue(false,ajax_list_activeItem);
if(e.keyCode==13)return false; else return true;
}
if(e.keyCode==27){ // Escape key
ajax_options_hide();
}*/
}
//document.documentElement.onclick = autoHideList;
function autoHideList(e)
{
if(document.all)e = event;
if (e.target) source = e.target;
else if (e.srcElement) source = e.srcElement;
if (source.nodeType == 3) // defeat Safari bug
source = source.parentNode;
if(source.tagName.toLowerCase()!='input' && source.tagName.toLowerCase()!='textarea')ajax_options_hide();
}
Am a beginner in php as well as Codeigniter
Just echo your data in your controller
change
$response=$this->user_model->getAutoUserList($letters);
To
echo $this->user_model->getAutoUserList($letters);
change
onkeyup="ajax_showOptions(this,'getCountriesByLetters',event);
to
onkeyup="ajax_showOptions(this,'list_UserByName',event);
there is a question on this topic on stackoverflow, but an entire different process.
My Codeigniter autocomplete with ajax
looking for a bit of help with my jQuery, (i know its not the best)
Currently have a form, split into 2 sides,
on the left I have a list of assests on the right is the liabilities
somewhat of a balance sheet for account, see the image below
the jquery in use just now, is a bit of a mess.. (sorry)
this code will calculate the field totals on each keyup request, which seems to work ok,
jQuery('#ass_cash, #ass_liquid, #ass_lifeinsu, #ass_covvalue, #ass_la1, #ass_la2, #ass_la3, #ass_realestate, #ass_auto1total, #ass_auto2total, #lib_mortgage, #lib_bankloan1, #lib_bankloan2, #lib_loansinsucomp, #lib_loanscreditunion, #lib_creditcards, #lib_od1, #lib_od2, #lib_od3, #lib_rent, #lib_mortgagemthpmt, #lib_bankloan1mthpmt, #lib_bankloan2mthpmt, #lib_loansinsucompmthpmt, #lib_loanscreditunionmthpmt, #lib_creditcardsmthpmt, #lib_od1mthpmt, #lib_od2mthpmt, #lib_od3mthpmt, #lib_rentmthpmt').keyup( function(){
// ASSESTS
var ass_cash = jQuery("#ass_cash").val();
var ass_liquid = jQuery("#ass_liquid").val();
var ass_lifeinsu = jQuery("#ass_lifeinsu").val();
var ass_covvalue = jQuery("#ass_covvalue").val();
var ass_la1 = jQuery("#ass_la1").val();
var ass_la2 = jQuery("#ass_la2").val();
var ass_la3 = jQuery("#ass_la3").val();
var ass_realestate = jQuery("#ass_realestate").val();
var ass_auto1total = jQuery("#ass_auto1total").val();
var ass_auto2total = jQuery("#ass_auto2total").val();
var ass_total = jQuery("#ass_total").val();
if(ass_cash==''){ ass_cash = 0; }
if(ass_liquid==''){ ass_liquid = 0; }
if(ass_lifeinsu==''){ ass_lifeinsu = 0; }
if(ass_covvalue==''){ ass_covvalue = 0; }
if(ass_la1==''){ ass_la1 = 0; }
if(ass_la2==''){ ass_la2 = 0; }
if(ass_la3==''){ ass_la3 = 0; }
if(ass_realestate==''){ ass_realestate = 0; }
if(ass_auto1total==''){ ass_auto1total = 0; }
if(ass_auto2total==''){ ass_auto2total = 0; }
var asssubtotal = parseInt(ass_cash) + parseInt(ass_liquid) + parseInt(ass_lifeinsu) + parseInt(ass_covvalue);
asssubtotal = asssubtotal + parseInt(ass_la1) + parseInt(ass_la2) + parseInt(ass_la3) + parseInt(ass_realestate);
asssubtotal = asssubtotal + parseInt(ass_auto1total) + parseInt(ass_auto2total);
var asstotal = jQuery('#ass_total');
asstotal.val(asssubtotal);
// LIABILITIES
var lib_mortgage = jQuery("#lib_mortgage").val();
var lib_bankloan1 = jQuery("#lib_bankloan1").val();
var lib_bankloan2 = jQuery("#lib_bankloan2").val();
var lib_loansinsucomp = jQuery("#lib_loansinsucomp").val();
var lib_loanscreditunion = jQuery("#lib_loanscreditunion").val();
var lib_creditcards = jQuery("#lib_creditcards").val();
var lib_od1 = jQuery("#lib_od1").val();
var lib_od2 = jQuery("#lib_od2").val();
var lib_od3 = jQuery("#lib_od3").val();
var lib_rent = jQuery("#lib_rent").val();
if(lib_mortgage==''){ lib_mortgage = 0; }
if(lib_bankloan1==''){ lib_bankloan1 = 0; }
if(lib_bankloan2==''){ lib_bankloan2 = 0; }
if(lib_loansinsucomp==''){ lib_loansinsucomp = 0; }
if(lib_loanscreditunion==''){ lib_loanscreditunion = 0; }
if(lib_creditcards==''){ lib_creditcards = 0; }
if(lib_od1==''){ lib_od1 = 0; }
if(lib_od2==''){ lib_od2 = 0; }
if(lib_od3==''){ lib_od3 = 0; }
if(lib_rent==''){ lib_rent = 0; }
var libsubtotal = parseInt(lib_mortgage) + parseInt(lib_bankloan1) + parseInt(lib_bankloan2) + parseInt(lib_loansinsucomp);
libsubtotal = libsubtotal + parseInt(lib_loanscreditunion) + parseInt(lib_creditcards) + parseInt(lib_od1) + parseInt(lib_od2);
libsubtotal = libsubtotal + parseInt(lib_od3) + parseInt(lib_rent);
var lib_subtotal = jQuery('#lib_subtotal'); lib_subtotal.val(libsubtotal);
// MONTHLY PAYMENTS
var lib_mortgagemthpmt = jQuery("#lib_mortgagemthpmt").val();
var lib_bankloan1mthpmt = jQuery("#lib_bankloan1mthpmt").val();
var lib_bankloan2mthpmt = jQuery("#lib_bankloan2mthpmt").val();
var lib_loansinsucompmthpmt = jQuery("#lib_loansinsucompmthpmt").val();
var lib_loanscreditunionmthpmt = jQuery("#lib_loanscreditunionmthpmt").val();
var lib_creditcardsmthpmt = jQuery("#lib_creditcardsmthpmt").val();
var lib_od1mthpmt = jQuery("#lib_od1mthpmt").val();
var lib_od2mthpmt = jQuery("#lib_od2mthpmt").val();
var lib_od3mthpmt = jQuery("#lib_od3mthpmt").val();
var lib_rentmthpmt = jQuery("#lib_rentmthpmt").val();
if(lib_mortgagemthpmt==''){ lib_mortgagemthpmt = 0; }
if(lib_bankloan1mthpmt==''){ lib_bankloan1mthpmt = 0; }
if(lib_bankloan2mthpmt==''){ lib_bankloan2mthpmt = 0; }
if(lib_loansinsucompmthpmt==''){ lib_loansinsucompmthpmt = 0; }
if(lib_loanscreditunionmthpmt==''){ lib_loanscreditunionmthpmt = 0; }
if(lib_creditcardsmthpmt==''){ lib_creditcardsmthpmt = 0; }
if(lib_od1mthpmt==''){ lib_od1mthpmt = 0; }
if(lib_od2mthpmt==''){ lib_od2mthpmt = 0; }
if(lib_od3mthpmt==''){ lib_od3mthpmt = 0; }
if(lib_rentmthpmt==''){ lib_rentmthpmt = 0; }
var lib_surplus = jQuery('#lib_surplus');
if(lib_surplus==''){ lib_surplus = 0; }
var subtotal = parseInt(lib_mortgagemthpmt) + parseInt(lib_bankloan1mthpmt) + parseInt(lib_bankloan2mthpmt) + parseInt(lib_loansinsucompmthpmt);
subtotal = subtotal + parseInt(lib_loanscreditunionmthpmt) + parseInt(lib_creditcardsmthpmt) + parseInt(lib_od1mthpmt) + parseInt(lib_od2mthpmt);
subtotal = subtotal + parseInt(lib_od3mthpmt) + parseInt(lib_rentmthpmt);
var totalmthpmt = jQuery('#lib_totalmthpmt');
totalmthpmt.val(subtotal);
var assets_total = jQuery('#ass_total').val();
var lib_subtotal = jQuery('#lib_subtotal').val();
var lib_surplus = jQuery('#lib_surplus');
if(assets_total==''){ assets_total = 0; }
if(lib_subtotal==''){ lib_subtotal = 0; }
if(lib_surplus==''){ lib_surplus = 0; }
var surplus = assets_total - lib_subtotal;
lib_surplus.val(surplus);
// THIS IS THE PART THAT ISNT WORKING
//surplus/deficit
//var lib_total = jQuery('#lib_total').val();
//if(lib_total==''){ lib_total = 0; }
//var lib_totalmthpmt = jQuery('#lib_totalmthpmt').val();
//if(lib_totalmthpmt==''){ lib_totalmthpmt = 0; }
//var surplustotal = lib_total - lib_totalmthpmt;
//jQuery('#mthsurplus').val(surplustotal);
});
you can see the section which is causing issues above, its the calculation between the subtotal (minus) Surplus to generate the total,
each field for asset has a class .asset
each libability has class .liability
each monthly payment field has class .liabilitymth
Ive tried doing the jQuery('.asset').each(function() and trying to generate the total in the asset field, same for the other 2, sections,
the greyed out boxes are "readonly", were the calculations should appear.
ASSETS: The total on the left side of the page will be the total assets.
LIABILITIES: The 'Subtotal' will reflect the sum of the Liability column.
SURPLUS: This will represent the difference (Negative'-' OR Positive'+'), between the Assets & Liabilities-Balance column.
TOTAL(Right Side): This is to create a 'Balance Sheet'effect, so when you look at it, the calculation should reflect the same figure as the 'Total' over on the Asset side (Left side).
MONTHLY-SURPLUS/ DEFICIT: This should reflect the net difference in Total Income Revenue, either negative OR positive (Figure found From the Employment Tab), when compared with the total of the 'Monthly Payment' column.
this is where my jQuery falls flat on its face, there has to be an easier way to calculate the field totals, anyone shed any light on this, or have a much better use of code, rather than wrapping it all under a very large keyup request :)
This can give you the head start:
var totalAss = 0;
jQuery('.asset').each(function(){
var value = parseFloat(this.value);
if (value)
totalAss += value;
});
jQuery('#ass_total').val(totalAss);
There is indeed some easy way. Do things like that
on all classes means .assets , .liability and .liabilitymth do this on document.ready
$(function()
{
$('.assets , .liability ,.liabilitymth').each(function()
{
var value = $(this).val();
if(value == "")
{
$(this).val('000.00');
}
});
});
And now
var total_assets = 0;
$('.assets').keyup(function(){
var number = $(this).val();
total_assets += parseInt(number);
});
After that
$('#total_assets').val(total_assets);
If you do the calculation in the keyup or any other key events, then there will be a problem of keeping track of the old data that was entered. For ex., at an instant you had typed 50 and then you made it to 500 and then you made it to say 30. Then, the keyevent will not be able to figure out the difference between both the old and new data. You will have to write some logic to figure out the old and the new updated data and then depending on that you will have to update the final value. It is better if you can code something like this...
http://jsfiddle.net/AvSEG/
I have the below code which checks my dynamically produced offhire boxes to see if there is an integer value present onsubmit. If i were to check the sum of the array at the end to see if all boxes added together was bigger than 0 how would i accomplish that.
function validateoffhire(form) {
var num1 = document.getElementById('num1');
var test2Regex = /^[0-9 ]*$/;
var num2 = num1.value;
var i=0;
var offhire1 = [];
for(var i = 0; i < num2; i++) {
offhire1[i] = document.getElementById('offhire1' + i);
var offhire2 = offhire1[i].value;
//if(nameRegex.match(pro[i].value)){
if(!offhire2.match(test2Regex)){
//alert("You entered: " + pro[i].value)
inlineMsg('offhire1' + i,'This needs to be an integer',10);
return false;
}
}
return true;
}
many thanks for any help
steve
Change your code by adding an accumulator inside your loop, then check the accumulator outside the loop:
function validateoffhire(form) {
var num1 = document.getElementById('num1');
var test2Regex = /^[0-9 ]*$/;
var num2 = num1.value;
var accumulator = 0;
var i=0;
var offhire1 = [];
for(var i = 0; i < num2; i++) {
offhire1[i] = document.getElementById('offhire1' + i);
var offhire2 = offhire1[i].value;
//if(nameRegex.match(pro[i].value)){
if(!offhire2.match(test2Regex)){
inlineMsg('offhire1' + i,'This needs to be an integer',10);
return false;
}
else{
accumulator += parseInt(offhire2);
}
}
if(accumulator > 0){
return true;
}
}
You are saving all the values in an array. so u can add up all the values using a loop.
var totalValue = 0;
var i=0;
while(offhire1[i])
{
totalValue += offhire1[i] ;
i++
}
if(totalValue)
{
// Non zero
}
Could you be please be more specific if im wrong.
You have to:
Convert input values to a Number
Use the forEach function of an Array to add the values together.
Like:
function validateoffhire(form) {
var num1 = document.getElementById('num1');
var test2Regex = /^[0-9 ]*$/;
var num2 = num1.value;
var i=0;
var offhire1 = [];
for(var i = 0; i < num2; i++) {
offhire1[i] = parseFloat(document.getElementById('offhire1' + i));
var offhire2 = offhire1[i].value;
//if(nameRegex.match(pro[i].value)){
if(!offhire2.match(test2Regex)){
//alert("You entered: " + pro[i].value)
inlineMsg('offhire1' + i,'This needs to be an integer',10);
return false;
}
}
var sum = 0;
offhire1.forEach(function(a) {sum+=a});
// here, sum is the sum of offhire1's values
return true;
}