Showing total of loaded values - javascript

Hi I have form that lists certain values of sales. After loading sales I want to show the total of all the values. Right now it works fine but I have to change some value and it will show the total. What I want to do is also to show the total upon loading the form.
<form id="sales" action="" >
<table class="salesTable" border="1" cellpadding="0" cellspacing="0">
<tbody>
{{#each items}}
<tr class="">
<td><input type="abd" name="{{=id}}" id="{{=id}}" value='{{=sales}}' onchange="updateTotal(this.form)" /></td>
</tr>
<tr>
<td style="font:bold">Total</td>
<td><input type="abd" name="sum" onfocus="this.blur()" readyonly value=""/> </td>
</tr>
</tbody>
</table>
</form>
jquery function is
function updateTotal(formObj) {
var total = 0;
total += parseInt(formObj.s1011.value, 10)
total += parseInt(formObj.s1018.value, 10)
total += parseInt(formObj.s1019.value, 10)
formObj.sum.value = total
}
Please let me know how can i change it so it will also show the total of the values when form is leaded. Thanks

You can call the function when DOM is loaded and ready.
E.g with jQuery:
$(function() { // This is executed when DOM is ready
var form = $("#sales")[0]; // get the form's DOM node
updateTotal(form); // call the function on it
});

Related

Which event to trigger, programmatically simulating user blur

I'm using Power Automate Desktop with an Execute Javascript flow to try to automate some user entry in a Quickbooks Online Payroll form.
When natively using the form, it seems there is an event triggered on blur to validate the numerical input, among other things.
Using the JS flow, updating the input values is not being recognized by the form as once I save it, it shows those inputs as empty.
So I thought I need to trigger the blur event to get the data to save. Here is my JS script:
function ExecuteScript() {
var $payrollTableRows = $("table").first().find("tbody > tr.enabled");
var $regHoursInput;
var decRegHours;
var $bonusInput;
var employeeName;
console.log('Power Automate: Rows Found: ' + $payrollTableRows.length);
$payrollTableRows.each(function(){
employeeName = $(this).find("td:eq(1)").find("a").text();
$regHoursInput = $(this).find("input[wageitemid='HOURLY_PAY']");
if($regHoursInput){
decRegHours = Number($regHoursInput .val());
$bonusInput = $(this).find("input[wageitemid='BONUS']");
$bonusInput.focus();
if($bonusInput){
$bonusInput.val(decRegHours);
$bonusInput.trigger('blur');
}
}
});
}
Here is the script that gets executed on focus and blur on the QB Payroll page.
Why does the script initiated triggers not fire this code?
UPDATE 1:
Adding image of page:
UPDATE 2:
Posting the PAD flow I used. Also got a good overview of this from this video. And how to use Loop and Loop Index from this article.
My Flow:
To do something similar without relying on the JavaScript you could use a variable and loops.
Html used for this flow:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
<th>Column D</th>
</tr>
</thead>
<tbody>
<tr>
<td>A <input type="text" id="text-1-input" value="One"></td>
<td>B <input type="text" id="text-2-input" value="Two"></td>
<td>C <input type="text" id="text-3-input" value="Three"></td>
<td>D <input type="text" id="text-4-input" value="Four"onblur="txtOnblur();"></td>
</tr>
<tr>
<td><input type="text" id="text-5-input" ></td>
<td><input type="text" id="text-6-input" ></td>
<td><input type="text" id="text-7-input" ></td>
<td><input type="text" id="text-8-input" hidden></td>
</tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.slim.min.js"></script>
<script>
function txtOnblur(){
$("#text-8-input").show(true);
$("#text-8-input").val('blur triggered!');
}
</script>
</body>
</html>
I used a bit of JavaScript to extract the number of columns and rows in the table, this could have been done with the flow function 'Extract data from web page', but I find the JavaScript a bit faster/easier.
function ExecuteScript() {
var table = document.querySelector('body > div > table');
var colCount = table.children[0].children[0].children.length;
var rowCount = table.children[1].children.length;
return `${colCount} ${rowCount}`
}
Declare one UI element of the first input box. You can reuse this element by replacing/changing the selector properties to use a variable.
In the flow assign the value that will match the HTML selector for the particular control.
and then use the same element wherever you want to change/extract a value (remember the variable now sets the UI element)
The full flow code (copy this and paste it to PAD to see the details)
There will be errors on your side, but you will see the flow.
WebAutomation.LaunchEdge.AttachToEdgeByUrl TabUrl: $'''http://localhost/stackoverAnswer/''' AttachTimeout: 5 BrowserInstance=> Browser
WebAutomation.ExecuteJavascript BrowserInstance: Browser Javascript: $'''function ExecuteScript() {
var table = document.querySelector(\'body > div > table\');
var colCount = table.children[0].children[0].children.length;
var rowCount = table.children[1].children.length;
return `${colCount} ${rowCount}`
}''' Result=> cols_rows
Text.SplitText.Split Text: cols_rows StandardDelimiter: Text.StandardDelimiter.Space DelimiterTimes: 1 Result=> ColsAndRows
Text.ToNumber Text: ColsAndRows[0] Number=> numCols
Text.ToNumber Text: ColsAndRows[1] Number=> numRows
LOOP colIdx FROM 1 TO numCols STEP 1
SET inputBoxVariable TO $'''text-%colIdx%-input'''
WebAutomation.GetDetailsOfElement BrowserInstance: Browser Control: appmask['Web Page \'http://localhost/stackoverAnswer/\'']['Input text \'text-1-input\''] AttributeName: $'''Own Text''' AttributeValue=> inputBoxValue
IF colIdx = 4 THEN
WebAutomation.Focus.Focus BrowserInstance: Browser Control: appmask['Web Page \'http://localhost/stackoverAnswer/\'']['Input text \'text-1-input\''] WaitForPageToLoadTimeout: 60
MouseAndKeyboard.SendKeys.FocusAndSendKeys TextToSend: $'''{Tab}''' DelayBetweenKeystrokes: 10 SendTextAsHardwareKeys: False
END
SET inputBoxVariable TO $'''text-%colIdx + 4%-input'''
IF inputBoxValue <> $'''Three''' THEN
WebAutomation.PopulateTextField.PopulateTextFieldUsePhysicalKeyboard BrowserInstance: Browser Control: appmask['Web Page \'http://localhost/stackoverAnswer/\'']['Input text \'text-1-input\''] Text: inputBoxValue Mode: WebAutomation.PopulateTextMode.Replace UnfocusAfterPopulate: False WaitForPageToLoadTimeout: 60
ELSE
WebAutomation.PopulateTextField.PopulateTextFieldUsePhysicalKeyboard BrowserInstance: Browser Control: appmask['Web Page \'http://localhost/stackoverAnswer/\'']['Input text \'text-1-input\''] Text: $'''Skip this one''' Mode: WebAutomation.PopulateTextMode.Replace UnfocusAfterPopulate: False WaitForPageToLoadTimeout: 60
END
END
How it runs:
I don't have QB but I put together a quick html page with a script.
This is the html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Column 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value <input type="text" id="text-1-input" onblur="txtOnblur();">1</td>
</tr>
<tr>
<td>Value <input type="text" id="text-2-input" hidden></td>
</tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.slim.min.js"></script>
<script>
function txtOnblur(){
$("#text-2-input").show(true);
$("#text-2-input").val('blur triggered!');
}
</script>
</body>
</html>
When I run the following script on the page with Power automate it triggers the onblur event on the textbox
function ExecuteScript() {
var $txt = $("input[id='text-1-input']");
$txt[0].onblur();
}
In action:
When I try and call the code in a similar way as you do I only get the list of controls linked to the blur event.
I'm assuming it's jQuery being used in QB. I tend to stick to native JavaScript when it comes to PAD, more typing, but less abstraction.

Accessing an individual column in a row which is selected by default with a radio button on page load

With the code below, I am trying to access a particular column "quantity" from a row in a table. What is happening is one of the rows is selected by default when page loads while the rest of the rows can be selected when user chooses. I created a click event handler to handle manual selection.
When accessing the column with a class name, it returns nothing. I need to assign this value to an input box in the same form. I would attach the image of the row
Table Markup:
<tr valign="top" class="row6">
<td>
{if $tpl_order_details[lineitems].quantity > 1}
{if $radio_flag == "false"}
<input type="radio" name="line_item" class="radio_class" id="line_item" value="{$tpl_order_details[lineitems].mSku}" checked onclick="handleClick(this);"/>
{assign var=radio_flag value='true'}
{else}
<input type="radio" name="line_item" class="radio_class" id="line_item" value="{$tpl_order_details[lineitems].mSku}" onclick="handleClick(this);" />
{/if}
{/if}
</td>
<td>
{$tpl_order_details[lineitems].sku}
</td>
<td>
</td>
<td>{$tpl_order_details[lineitems].item_description}</td>
<td class="quantity_class" >{$tpl_order_details[lineitems].quantity}</td>
<td>{$tpl_order_details[lineitems].item_status}</td>
Markup with the Input field outside the loop:
<table>
<tr>
<td><label for="new_quantity">Enter New Quantity</label></td>
<td><input type="number" id="split_quantity" name="split_quantity"
min="1" max="6"></td>
<td><button type="submit" value="Save"
name="submit_action">Submit</button></td>
<td><button type="submit" value="Cancel"
name="submit_action">Cancel</button></td>
</tr>
</table>
JavaScript:
// This is to handle the radio button selected by default on page load.
$( document ).ready(function() {
var firstRadioValue = 0;
firstRadioValue = $("input[name='line_item']:checked").val();
$('input[name="split_quantity"]').attr('max', firstRadioValue);
var quantity = $(".radio_class").parent().find(".quantity_class").val();
alert(quantity);
});
// This is to handle the radio button that user actually chooses.
var currentRadioValue = 0;
function handleClick(line_item) {
alert('New value: ' + line_item.value);
currentRadioValue = line_item.value;
$('input[name="split_quantity"]').attr('max', currentRadioValue);
}
You're not going far enough up the tree to find the class. You have:
var quantity = $(".radio_class").parent().find(".quantity_class").val();
which gets you to the parent <td> The element you're looking for is a sibling of this:
<td class="quantity_class" >...
What you want to do is go one element higher (the table row), then find the class you're looking for from there, so use closest(). Note that .quantity_class doesn't have a value so you have to get the text in the table cell:
var quantity = $(".radio_class").closest('tr').find(".quantity_class").text();
In addition, I do not see any markup with the max attribute or any markup with the name of split_quantity.
EDIT - based on a conversation with the user it was found that there needed to be a number of changes. First, the table holding split_quantity needed to be identified so it could be targeted in the grander markup:
<table id="split_quantity_id">
<tr>
<td><label for="new_quantity">Enter New Quantity</label></td>
<td><input type="number" id="split_quantity" name="split_quantity" min="1" max="6"></td>
<td><button type="submit" value="Save" name="submit_action">Submit</button></td>
<td><button type="submit" value="Cancel" name="submit_action">Cancel</button></td>
</tr>
</table>
Then we got rid of the onclick="handleClick(this) inline JavaScript in favor of letting jQuery handle the click event. Finally we refactored the functions:
$(function() {
var firstRadioValue = 0;
firstRadioValue = $("input[name='line_item']:checked").closest('tr').find('.quantity_class').text();
$('input[name="split_quantity"]').attr('max', firstRadioValue);
var quantity = $(".radio_class").closest('tr').find(".quantity_class").text();
console.log(quantity);
$('table').delegate('.line_item', 'click', function(){
currentRadioValue = $(this).closest('tr').find('.quantity_class').text();
console.log(currentRadioValue);
$('#split_quantity_id').find('[name="split_quantity"]').attr('max', currentRadioValue);
});
});
NOTE: It was also discovered that the OP is using Smarty 2 which is an older version of Smarty using an older version of jQuery, so .delegate() is used instead of on().

sum of column using jquery [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I need to sum of column With OnKeyup or OnChange
Here's my code:
$(document).ready(function() {
$(".expenses").on('keyup change', calculateSum);
});
function calculateSum() {
var $input = $(this);
var $row = $input.closest('tr');
var sum = 0;
$row.find(".expenses").each(function() {
sum += parseFloat(this.value) || 0;
});
$row.find(".expenses_sum").val(sum.toFixed(2));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<th>sl</th>
<th>TA</th>
<th>DA</th>
</tr>
<tr>
<td>1</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
</tr>
<tr>
<td>2</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
</tr>
<tr>
<td>Total</td>
<td><input class="expenses_sum"></td>
<td><input class="expenses_sum"></td>
</tr>
</table>
This is when the "context" of the input that matters: you want to update the sum that is in the same column where the input element was updated.
What you can do is:
Get the index of the <td> element the input belongs to
Calculate the sum of all expenses belonging to the same column. This is done by filtering (using .filter()) all .expenses elements to ensure that their parent's <td> index matches that you've determined in step 2
Set the sum on the corresponding .expenses_sum element in the same column. This is again, done by filtering all .expenses_sum elements and only getting the one whose parent <td> index matches
Some additional pro-tips:
Listen to the onInput event. For input elements, that covers onKeyUp and onChange events, for convenience.
Use <input type="number" /> to prevent users from erroneously entering non-numerical characters
Use <input readonly /> on the .expenses_sum element, so that users don't fiddle with that sum by their own
Remember to cast the value of the input elements to a number. This can be done by using the + operator, i.e. +this.value. Remember that as per spec, all input elements, regardless their type, always has their value in type of string
Chain .each(calculateSum) to your original selection, so that you also compute the sum when the page is first loaded, i.e. $(".expenses").on('input', calculateSum).each(calculateSum);. This is very helpful when the .expenses elements might be pre-populated with values from the server-side (or if you have manually defined value="..."), for example.
See proof-of-concept below:
$(document).ready(function() {
$(".expenses").on('input', calculateSum).each(calculateSum);
});
function calculateSum() {
// Get the index of the parent `<td>` element
var cellIndex = $(this).closest('td').index();
// Get the values of expenses in the same column as the `<td>` element
var allExpensesInSameColumn = $('.expenses').map(function() {
if ($(this).closest('td').index() !== cellIndex)
return;
return +this.value;
}).get();
// Calculate the sum from returned array of values
var sumOfExpensesInSameColumn = allExpensesInSameColumn.reduce(function(acc, curVal) {
return acc + curVal;
});
// Set the sum on the `.expenses_sum` element in the corresponding column
$('.expenses_sum').each(function() {
if ($(this).closest('td').index() !== cellIndex)
return;
this.value = sumOfExpensesInSameColumn;
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<th>sl</th>
<th>TA</th>
<th>DA</th>
</tr>
<tr>
<td>1</td>
<td><input class="expenses" type="number" /></td>
<td><input class="expenses" type="number" /></td>
</tr>
<tr>
<td>2</td>
<td><input class="expenses" type="number" /></td>
<td><input class="expenses" type="number" /></td>
</tr>
<tr>
<td>Total</td>
<td><input class="expenses_sum" readonly></td>
<td><input class="expenses_sum" readonly></td>
</tr>
</table>

How to set value in dynamically added rows form using jquery?

I have a form in php with dynamically added rows (after clicking button the row is added). I want to fill the field with value "xx" and i want to do it in jquery.
This loop create the dynamically added rows in jquery. I want to fill added fields with value "xx":
while($personsArrayLength>2){
echo '
<script>
$(document).ready(function(){
var i = 2;
var rowTemplate2 = jQuery.format($("#template2").html());
rowTemplate2.value = "xx";
addRow2();
function addRow2(){
var ii = i++;
$("#app_here2").append(rowTemplate2(ii));
$("#delete_" + ii).click(function(){
$("#row_" + ii).remove();
});
}
});
</script>
';
Here is html for that:
function addRows2(){
global $personsError_css;
$personsArray = $_POST['persons'];
JB_var_dump($_POST['whichRow']);
$html = '<table id="template2" align="right" style="display:none; ">
<tr id="row_{0}">
<td><input type="text" size="52" id="persons" name="persons[]" maxlength="100"></td>
<td><img src="/../_img/row_del.png" id="delete_{0}" alt="usun"></td>
</tr>
</table>
<table id="list2" style="margin-left:200px;">
<thead >
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" size="52" name="persons[]" maxlength="100" style="'.$personsError_css.';" value="'.$personsArray[1].'"></td>
<td></td>
</tr>
<tr>
<td colspan="2" id="app_here2"></td>
</tr>
</tbody>
</table>';
return $html;
}
This is properly filled form
In this epty fields I want to add values "xx"
Sorry for my english.
How can i set values in added rows? What i should change in my code?
Thanks for help.
Change your 'addRow2' to this:
function addRow2(){
var ii = i++;
$("#app_here2").append(rowTemplate2(ii));
//UPDATE: var rowTemplate2 is not a jQuery Object, as i thought
$("#template2").find("input:empty").val("xx");; // added this row
$("#delete_" + ii).click(function(){
$("#row_" + ii).remove();
});
}

Multiply value of text fields with the same class dynamically using another input box

I have the following form that is created on the fly using Coldfusion. The different inputs all have different values when loaded, but share the same class.
I will have another input field with a unique identifier - #permup
The form is as follows (form tag stripped):
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="county-table" style="margin-top: 15px;">
<tr>
<TD>Length</TD>
<TD align="center">PerM</TD>
</tr>
<tr bgcolor="#ffffff">
<TD>from 1-10m</TD>
<TD align="center"><input class="perm" type="text" name="PerM1" value="1.60" size="6" /></TD>
</tr>
<tr bgcolor="#efefef">
<TD>from 11-20m</TD>
<TD align="center"><input class="perm" type="text" name="PerM2" value="1.10" size="6" /></TD>
</tr>
<tr bgcolor="#ffffff">
<TD>from 21-50m</TD>
<TD align="center"><input class="perm" type="text" name="PerM3" value="1.50" size="6" /></TD>
</tr>
<tr bgcolor="#efefef">
<TD>from 51-80m</TD>
<TD align="center"><input class="perm" type="text" name="PerM4" value="1.55" size="6" /></TD>
</tr>
<tr bgcolor="#ffffff">
<TD>from 81-150m</TD>
<TD align="center"><input class="perm" type="text" name="PerM5" value="1.10" size="6" /></TD>
</tr>
<tr bgcolor="#efefef">
<TD>from 151-200m</TD>
<TD align="center"><input class="perm" type="text" name="PerM6" value="1.10" size="6" /></TD>
</tr>
<tr>
<td> </td>
<td><input id="permup" type="text" name="permup" value="0" size="6" /></td>
</tr>
</table>
What I need is that when someone types the base rate increase in the #permup field, the fields with the class .perm have all their values increased by that amount, and if someone then sets the #permup field to 0 (zero) the fields with .perm are set back to their original value.
This has to work with JQuery on the class name as the table rows could be any number. I have the following script:
<script language="JavaScript" type="text/javascript">
$('#permup').keyup( function() {
$('.perm').each(function(){
var defaultValue = $(this).val();
$(this).val( $('#permup').val() * defaultValue );
});
});
</script>
It kind of works, but sets every value the same in the .perm fields and also does weird stuff when the field #perm is clicked out of or set to zero.
I hope someone can help!!
Many thanks
JS
As others have said you need to make sure you are doing math with numbers and not the default "value" given by the .value property. Also it is not advisable to store values in your display as you run into issues on how to retrieve an old value once you modify it. Below is code that does what you want and keeps track of the original values.
<script language="JavaScript" type="text/javascript">
// Store default values
var perm_items = document.getElementsByClassName("perm");
var orig_perm_values = new Array(perm_items.length);
for (var i = perm_items.length - 1; i >= 0; i--)
{
orig_perm_values[i] = perm_items[i].value;
document.getElementById('out').innerHTML = orig_perm_values[i];
}
function updateValues(event)
{
for (var i = perm_items.length - 1; i >= 0; i--)
{
perm_items[i].value = (parseFloat(orig_perm_values[i]) + parseFloat(event.target.value)).toFixed(2);
}
}
</script>
Try using parseFloat() and use keyup and focus event as shown :-
$('#permup').on('keyup focus', function() {
$('.perm').each(function(){
var defaultval = $('#permup').val();
var myValue;
if(defaultval == "0"){
myValue = $(this).attr('value')
}
else{
myValue = parseFloat( parseFloat($(this).attr('value')) * parseFloat(defaultval) ) || $(this).attr('value')
}
$(this).val( myValue );
});
});
DEMO
Side Note :- Always try to use parseInt() or parseFloat() while dealing in numbers in javascript/jquery otherwise numbers are also treated as string.

Categories