my original question got answered but I realize that every time I try to push user data in the arrays it wouldn't allow me to do is there any another to append data to arrays or is the push method the only way. or should i create a new array................................................................
"use strict"
const names = ["Ben", "Joel", "Judy", "Anne"];
const scores = [88, 98, 77, 88];
const $ = selector => document.querySelector(selector);
const addScore = () => {
// get user entries
const name = $("#name").value;
const score = parseInt($("#score").value);
let isValid = true;
// check entries for validity
if (name == "") {
$("#name").nextElementSibling.textContent = "This field is required.";
isValid = false;
} else {
$("#name").nextElementSibling.textContent = "";
}
if (isNaN(score) || score < 0 || score > 100) {
$("#score").nextElementSibling.textContent = "You must enter a valid score.";
isValid = false;
} else {
$("#score").nextElementSibling.textContent = "";
}
if (isValid) {
names.push("#name");
scores.push("#score");
names[names.length] = name;
scores[scores.length] = score;
$("#name").value = "";
$("#score").value = "";
}
$("#name").focus();
};
// display scores
const displayScores = () => {
for (let i = 0; i < names.length; i++) {
document.getElementById("scores_display").textContent += names[i] + " = " +
scores[i] +
"\n";
}
};
document.addEventListener("DOMContentLoaded", () => {
$("#add").addEventListener("click", addScore);
$("#display_scores").addEventListener("click", displayScores())
$("#name").focus();
});
<main>
<h1>Use a Test Score array</h1>
<div>
<label for="name">Name:</label>
<input type="text" id="name">
<span></span>
</div>
<div>
<label for="score">Score:</label>
<input type="text" id="score">
<span></span>
</div>
<div>
<label> </label>
<input type="button" id="add" value="Add to Array">
<input type="button" id="display_scores" value="Display Scores">
</div>
<div>
<textarea id="scores_display"></textarea>
</div>
</main>
All my previous notes were incorrect. Your adhoc $ const threw me off! My apologies.
The issue was you weren't calling displayScores() after updating the array. Plus, I added a line to that function to clear the existing text before looping through your data.
"use strict"
const names = ["Ben", "Joel", "Judy", "Anne"];
const scores = [88, 98, 77, 88];
const $ = selector => document.querySelector(selector);
const addScore = () => {
// get user entries
const name = $("#name").value;
const score = parseInt($("#score").value);
let isValid = true;
// check entries for validity
if (name == "") {
$("#name").nextElementSibling.textContent = "This field is required.";
isValid = false;
} else {
$("#name").nextElementSibling.textContent = "";
}
if (isNaN(score) || score < 0 || score > 100) {
$("#score").nextElementSibling.textContent = "You must enter a valid score.";
isValid = false;
} else {
$("#score").nextElementSibling.textContent = "";
}
if (isValid) {
names.push("#name");
scores.push("#score");
names[names.length] = name;
scores[scores.length] = score;
$("#name").value = "";
$("#score").value = "";
// add to the textarea
displayScores()
}
$("#name").focus();
};
// display scores
const displayScores = () => {
document.getElementById("scores_display").textContent = "";
for (let i = 0; i < names.length; i++) {
document.getElementById("scores_display").textContent += names[i] + " = " +
scores[i] +
"\n";
}
};
document.addEventListener("DOMContentLoaded", () => {
$("#add").addEventListener("click", addScore);
$("#display_scores").addEventListener("click", displayScores())
$("#name").focus();
});
<main>
<h1>Use a Test Score array</h1>
<div>
<label for="name">Name:</label>
<input type="text" id="name">
<span></span>
</div>
<div>
<label for="score">Score:</label>
<input type="text" id="score">
<span></span>
</div>
<div>
<label> </label>
<input type="button" id="add" value="Add to Array">
<input type="button" id="display_scores" value="Display Scores">
</div>
<div>
<textarea rows="6" id="scores_display"></textarea>
</div>
</main>
I am beginner to appscript. I am developing a payment system where user can see their payment history and can pay their payment. But for now after I have made some changes to my code, after I select a year and filter it (for example if I select 2020) it says that the records are not available. I have included the link to my appscript and some images to explain my self better. Thank you so much.
Before filtering it
After filtering it
Code.gs
var url = "https://docs.google.com/spreadsheets/d/1bM8l6JefFsPrlJnTWf56wOhnuSjdIwg3hMbY1tN1Zp8/edit#gid=1775459006";
var streetSheetName = "JALAN SANGGUL 4";
function doGet(e) {
var streetSheetName = "JALAN SANGGUL 4"; // Added
PropertiesService.getScriptProperties().setProperty("streetSheetName", streetSheetName); // Added
return HtmlService.createHtmlOutputFromFile('WebAppLogin')
.setTitle("Resident Payment");
}
function checkLogin(username, password) {
var found_record = '';
var name = '';
var ss = SpreadsheetApp.openByUrl(url);
var webAppSheet = ss.getSheetByName("USERNAMES");
var getLastRow = webAppSheet.getLastRow();
for(var i = 2; i <= getLastRow; i++) {
if(webAppSheet.getRange(i, 1).getValue().toUpperCase() == username.toUpperCase() && webAppSheet.getRange(i, 7).getValue() == password) {
found_record = 'TRUE';
name = webAppSheet.getRange(i, 4).getValue().toUpperCase() + " " + webAppSheet.getRange(i, 5).getValue().toUpperCase();
streetSheetName = webAppSheet.getRange(i, 3).getValue().toUpperCase();
} else if (username.toUpperCase() == 'ADMIN' && password == 'ADMINPASSWORD') {
found_record = 'TRUE';
name = webAppSheet.getRange(i, 4).getValue().toUpperCase() + " " + webAppSheet.getRange(i, 5).getValue().toUpperCase();
streetSheetName = webAppSheet.getRange(i, 3).getValue().toUpperCase();
}
}
PropertiesService.getScriptProperties().setProperty("streetSheetName", streetSheetName); // Added
if(found_record == '') {
found_record = 'FALSE';
}
return [found_record, username,name];
}
function GetRecords(username,filter) {
var filteredDataRangeValues = GetUsernameAssociatedProperties(username);
var resultArray = GetPaymentRecords(filteredDataRangeValues,filter);
var resultFilter = getYears();
result = {
data: resultArray,
filter: resultFilter
};
return result;
}
function getYears() {
var ss= SpreadsheetApp.openByUrl(url);
var yearSheet = ss.getSheetByName("Configuration");
var getLastRow = yearSheet.getLastRow();
var return_array = [];
for(var i = 2; i <= getLastRow; i++)
{
if(return_array.indexOf(yearSheet.getRange(i, 2).getDisplayValue()) === -1) {
return_array.push(yearSheet.getRange(i, 2).getDisplayValue());
}
}
return return_array;
}
function changePassword(username, newPassword) {
var sheet = SpreadsheetApp.openByUrl(url).getSheetByName("USERNAMES");
var range = sheet.getRange("A2:A").createTextFinder(username).matchEntireCell(true).findNext();
if (range) {
range.offset(0, 6).setValue(newPassword);
}
}
function GetUsernameAssociatedProperties(username) {
var filteredDataRangeValues = '';
var ss = SpreadsheetApp.openByUrl(url);
var displaySheet = ss.getSheetByName("USERNAMES");
var dataRangeValues = displaySheet.getDataRange().getValues();
if (username.toUpperCase() == 'ADMIN') {
dataRangeValues.shift();
filteredDataRangeValues = dataRangeValues;
} else {
filteredDataRangeValues = dataRangeValues.filter(row => row[0].toUpperCase() == username.toUpperCase());
}
return filteredDataRangeValues;
}
function GetPaymentRecords(userProperties,filter) {
var streetSheetName = PropertiesService.getScriptProperties().getProperty("streetSheetName"); // Added
var transpose = m => m[0].map((_, i) => m.map(x => x[i]));
var resultArray = [];
var ss = SpreadsheetApp.openByUrl(url);
var displaySheet = ss.getSheetByName(streetSheetName);
var addressValues = displaySheet.getRange("B:C").getValues();
var paidMonthValues = displaySheet.getRange(1, 7, displaySheet.getLastRow(), displaySheet.getLastColumn() - 6).getValues();
//Logger.log(addressValues);
//Logger.log(transpose(paidMonthValues));
userProperties.forEach((v, i) => {
var userHouseNumber = v[1];
var userStreet = v[2];
var column = addressValues.reduce(function callbackFn(accumulator, currentValue, index, array) {
if (currentValue[0] == userHouseNumber && currentValue[1] == userStreet) {
return index
} else {
return accumulator
}
}, '');
//Logger.log(column);
Logger.log(filter)
Logger.log(paidMonthValues);
if(filter=="None"){
var result = transpose(paidMonthValues).map(function callbackFn(element, index, array) {
return [element[0], userHouseNumber, userStreet, element[column] || '']
});
}else{
var result = transpose(paidMonthValues).map(function callbackFn(element, index, array) {
if(element[0].includes(filter))return [element[0], userHouseNumber, userStreet, element[column] || '']
});
}
resultArray = resultArray.concat(result);
//Logger.log(resultArray);
})
//Remove null elements
resultArray = resultArray.filter(element=>{
Logger.log(element!=null)
return element != null;
});
return resultArray;
}
WebAppLogin.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var username = ""; // Added
function GetRecords() {
var spin = "<span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span>";
spin += " Loading...";
document.getElementById("LoginButton").innerHTML = spin;
username = document.getElementById("username").value; // Modified
var password = document.getElementById("password").value;
var password = document.getElementById("password").value;
google.script.run.withSuccessHandler(function(output) {
console.log(output);
var username = output[1];
var name = output[2];
if(output[0] == 'TRUE') {
document.getElementById("loginDisplay").style.display = "none";
document.getElementById("dataDisplay").style.display = "block";
document.getElementById("errorMessage").innerHTML = "";
document.getElementById("currentUser").value = name; // CHANGE
google.script.run.withSuccessHandler(displayTable).GetRecords(username,"None");
} else if(output[0] == 'FALSE') {
document.getElementById("firstLastName").innerHTML = "";
document.getElementById("currentUser").value = "";
document.getElementById("myFilter").innerHTML = "";
document.getElementById("errorMessage").innerHTML = "Failed to Login";
document.getElementById("LoginButton").innerHTML = "Login";
}
}).checkLogin(username, password);
}
function filter(){
var filterStr = document.getElementById("filterYear").value;
var user = document.getElementById("currentUser").value;
google.script.run.withSuccessHandler(displayTable).GetRecords(user,filterStr);
}
function displayTable(result) {
var ar = result.data;
var filterString = result.filter;
ar = ar.sort((a, b) => new Date(a).getTime() > new Date(b).getTime() ? -1 : 1).splice(-12); // <--- Added
var name = document.getElementById("currentUser").value; // CHANGE
if(ar.length > 0) {
var displayTable = '<table class=\"table\" id=\"mainTable\" >';
displayTable += "<tr>";
displayTable += "<th>Month</th>";
displayTable += "<th>House Number</th>";
displayTable += "<th>Street</th>";
displayTable += "<th>Payment Status</th>";
displayTable += "</tr>";
ar.forEach(function(item, index) {
displayTable += "<tr>";
displayTable += "<td>"+item[0]+"</td>";
displayTable += "<td>"+item[1]+"</td>";
displayTable += "<td>"+item[2]+"</td>";
displayTable += "<td>"+item[3]+"</td>";
displayTable += "</tr>";
});
displayTable += "</table>";
} else {
var displayTable = "<span style=\"font-weight: bold\" >No Records Found</span>";
}
var filter = '';
if(filterString.length > 0) {
filter += '<label for="years" style="font-size: 20px">Select the Year</label><br><select class="form-control form-control-sm" id="filterYear" name="years" required><option value="" selected>Choose...</option>';
filterString.filter(String).forEach(str => {
filter += '<option value="'+str+'">'+str+'</option>';
});
filter += '</select><button class="btn btn-primary" type="button" id="FilterButton" onclick="filter()" >Submit</button>';
}
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth();
if (!ar.some(([a,,,d]) => {
var t = new Date(a);
return year == t.getFullYear() && month == t.getMonth() && d.toUpperCase() == "PAID";
})) {
document.getElementById("digitalgoods-030521182921-1").style.display = "block";
}
document.getElementById("displayRecords").innerHTML = displayTable;
document.getElementById("firstLastName").innerHTML = "USER: " + name;
document.getElementById("myFilter").innerHTML = filter;
document.getElementById("LoginButton").innerHTML = "Login";
document.getElementById("username").value = '';
document.getElementById("password").value = '';
}
//change the link according to ur webapp latest version
function LogOut(){
window.open("https://script.google.com/macros/s/AKfycbwKa4sQ441WUIqmU40laBP0mfiqNMiN-NghEvwUnJY/dev",'_top');
}
function changePassword(){
var result = confirm("Want to Change Password?");
if (result) {
var newPassword = document.getElementById("newPassword").value;
google.script.run.withSuccessHandler(() => alert('Password changed')).changePassword(username, newPassword);
}
}
</script>
</head>
<body>
<h2> Resident Payment Status Portal</h2>
<div id="loginDisplay" style="padding: 10px;" >
<div class="form-row">
<div class="form-group col-md-3">
<label>User Name</label>
<input type="text" id="username" class="form-control" required/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label>Password</label><br>
<input type="password" id="password" class="form-control" required/>
</div>
</div>
<button class="btn btn-primary" type="button" id="LoginButton" onclick="GetRecords()" >
Login
</button>
<span id="errorMessage" style="color: red" ></span>
</div>
<hr>
<div style="display:none" id="dataDisplay" >
<div>
<h2 id="firstLastName"></h2>
</div>
<input type="hidden" id="currentUser" value=""/>
<div id ="myFilter" class="form-group"></div>
<div id="displayRecords" style="padding: 10px;" ></div>
<!----Paypal Button-------->
<hr>
<div id="digitalgoods-030521182921-1" style="display: none;"></div>
<script>(function (div, currency) {var item_total = {currency_code: currency,value: '50.00',},tax_total = {currency_code: currency,value: '0.00' },render = function () {window.paypal.Buttons({createOrder: function (data, actions) {return actions.order.create({application_context: {brand_name: "",landing_page: "BILLING",shipping_preference: "NO_SHIPPING",payment_method: {payee_preferred: "UNRESTRICTED"}},purchase_units: [{description: "",soft_descriptor: "digitalgoods",amount: {breakdown: {item_total: item_total,tax_total: tax_total},value: '50.00' },items: [{name: "Monthly Fees",quantity: 1,description: "",sku: "1",unit_amount: item_total,tax: tax_total}]}]});},onApprove: function (data, actions) {return actions.order.capture().then(function (details) {div.innerHTML = "Order completed. You\x27ll receive an email shortly!";});},onCancel: function (data) {},onError: function (err) {div.innerHTML = "<pre>" + err.toString()}}).render("#digitalgoods-030521182921-1");},init = function () {window.digitalgoods = window.digitalgoods || [];window.digitalgoods.push(render);var file = "https://www.paypal.com/sdk/js?client-id=AS-86gVX_DfakSkq6YZDJRdKZb4SMIziOd5c9DIKy4extQrpb0VFEprDleB_duKI4BJQQRewUdfliZEf\x26currency=MYR";var script = document.createElement("script");script.type = "text/javascript";script.src = file;script.onload = function() {var i = window.digitalgoods.length;while (i--) {window.digitalgoods[i]();}};div.appendChild(script);};init();})(document.getElementById("digitalgoods-030521182921-1"), "MYR");</script>
<!-----Change Password----------->
<div>
<!--<button type="button" class="btn btn-primary btn-md" onclick="changePassword()">Change Password</button>-->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Change Password
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLongTitle">Change Password</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Enter New Password</label><br>
<input type="password" id="newPassword" class="form-control" required/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="changePassword()">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<hr>
<!-----Log Out----------->
<div>
<button type="button" class="btn btn-default btn-md" onclick="LogOut()">
<span class="glyphicon glyphicon-log-out"></span> Log out
</button>
</div>
</div>
</body>
</html>
When I saw your script, I noticed that var user = document.getElementById("currentUser").value; is used at filter() in Javascript side,. And, at GetRecords in GAS side, it seems that the user name used at the login is required to be used. In this case, I thought that user of var user = document.getElementById("currentUser").value; might be different from the user name, and this might be the reason of your issue. So, how about the following modification?
From:
function filter(){
var filterStr = document.getElementById("filterYear").value;
var user = document.getElementById("currentUser").value;
google.script.run.withSuccessHandler(displayTable).GetRecords(user,filterStr);
}
To:
function filter(){
var filterStr = document.getElementById("filterYear").value;
google.script.run.withSuccessHandler(displayTable).GetRecords(username, filterStr);
}
username has already been declared as the global variable. I thought that this value might be required to be used for GetRecords at GAS side.
There are 2 fields that belong together price and size. Some products have more then 1 size, so the html offers a button to generate more fields. However if some validation fails the fields are gone and not populated anymore.
Here are the non generated html fields
<div class="col-md-6">
<label for="price" class="form-label">Prijs* </label>
<input type="text"
name="priceAndSize[price][0]"
class="form-control #if($errors->has('priceAndSize.price.*')) border-danger #endif"
id="price"
value="{{ old('priceAndSize.price[0]') }}">
</div>
<div class="col-md-6">
<label for="stock" class="form-label">Inhoud in ml</label>
<input type="text"
name="priceAndSize[size][0]"
class="form-control"
id="size"
value="{{ old('priceAndSize.size[0]') }}">
</div>
With a button to generate more fields
<input type="button" class="btn btn-info mt-3 text-white" onclick="addInput()"
value="Meerdere prijzen & inhoud"/>
the javascript to generate the fields:
counter = 1;
function addInput() {
// Input
const newInputPrice = document.createElement('input');
newInputPrice.id = 'price' + counter;
newInputPrice.name = 'priceAndSize[price][' + counter + ']';
newInputPrice.type = 'text';
newInputPrice.className = 'form-control';
const newInputSize = document.createElement('input');
newInputSize.id = 'size' + counter;
newInputSize.name = 'priceAndSize[size][' + counter + ']';
newInputSize.type = 'text';
newInputSize.className = 'form-control';
// Label
const labelPrice = document.createElement('label');
labelPrice.htmlFor = 'price' + counter;
labelPrice.innerHTML = 'Prijs* ';
labelPrice.className = 'form-label';
const labelSize = document.createElement('label');
labelSize.htmlFor = 'size' + counter;
labelSize.innerHTML = 'Inhoud* ';
labelSize.className = 'form-label';
// New boostrap div
const newDivPrice = document.createElement('div');
newDivPrice.className = 'col-md-6';
const newDivSize = document.createElement('div');
newDivSize.className = 'col-md-6';
// Add label and input to div
newDivPrice.appendChild(labelPrice);
newDivPrice.appendChild(newInputPrice);
newDivSize.appendChild(labelSize);
newDivSize.appendChild(newInputSize);
const currentDiv = document.getElementById("test");
currentDiv.appendChild(newDivPrice);
currentDiv.appendChild(newDivSize);
counter++;
}
You can try this in your blade.
$priceAndSize = Request::old('priceAndSize');
#if(count($priceAndSize[price]) > 0)
for (var i = 1; i <= {{count($priceAndSize[price])}}; i++) {
addInput();
}
#elseif(count($priceAndSize[size]) > 0)
for (var i = 1; i <= {{count($priceAndSize[size])}}; i++) {
addInput();
}
#endif
I have a question
I want to display the input form in the currency format, but I have a problem that the input form must be clicked first.
This is my code input HTML
<label class="col-md-12 col-sm-12 col-xs-12 padding-0">Harga Jual</label>
<div class="col-md-12 col-sm-12 col-xs-12 padding-0">
<input type="text" class="form-control currency" id="hargabarang" readonly="readonly">
</div>
My code currency
<script>
$(document).ready(function() {
$('.currency').maskMoney({prefix:'Rp. ', thousands:'.', decimal:',', precision:0});
})
My calculate
<script type="text/javascript">
$(document).ready(function(){
$("#jumlah").keyup(function(){
var jumlah = parseInt($("#jumlah").val());
var minimal_jual = $("#minimal_jual").val();
var minimal_grosir1 = $("#minimal_grosir1").val();
var minimal_grosir2 = $("#minimal_grosir2").val();
var minimal_grosir3 = $("#minimal_grosir3").val();
var harga_jual = $("#harga_jual").val();
var grosir1 = $("#grosir1").val();
var grosir2 = $("#grosir2").val();
var grosir3 = $("#grosir3").val();
var satuan_jual = $("#satuan_jual").val();
var satuan_grosir1 = $("#satuan_grosir1").val();
var satuan_grosir2 = $("#satuan_grosir2").val();
var satuan_grosir3 = $("#satuan_grosir3").val();
if (jumlah < minimal_grosir1) {
var satuan = satuan_jual;
} else if(jumlah >= minimal_grosir1 && jumlah < minimal_grosir2) {
var satuan = satuan_grosir1;
} else if(jumlah >= minimal_grosir2 && jumlah < minimal_grosir3) {
var satuan = satuan_grosir2;
} else if(jumlah >= minimal_grosir3) {
var satuan = satuan_grosir3;
};
if (jumlah < minimal_grosir1) {
var harga = harga_jual;
} else if(jumlah >= minimal_grosir1 && jumlah < minimal_grosir2) {
var harga = grosir1;
} else if(jumlah >= minimal_grosir2 && jumlah < minimal_grosir3) {
var harga = grosir2;
} else if(jumlah >= minimal_grosir3) {
var harga = grosir3;
};
var total = jumlah * harga;
$("#satuanbarang").val(satuan);
$("#hargabarang").val(harga);
$("#totalharga").val(total);
});
});
</script>
I want it to look like green, but without having to highlight it
Pplease help, thank you
i want asking about javascript. i develop a tax calculation system.
function countsisa(){
var iv = document.getElementById("invoicevalue");
var ppn = document.getElementById("ppn");
var pph = document.getElementById("pph");
var dpp = document.getElementById("dpp");
var propv = document.getElementById("propertyvalue");
var shipv = document.getElementById("shippingvalue");
var dppship = document.getElementById("dppshipping");
var pph23 = document.getElementById("pph23");
var total = document.getElementById("total");
var income = document.getElementById("income");
var ppndoc = document.getElementById("ppndoc");
var pphdoc = document.getElementById("pphdoc");
var pphdoc23 = document.getElementById("pphdoc23");
if(iv.value.replace(/[.*+?^${}()|[\]\\]/g,"") > 0){
document.getElementById("propertyvalue").disabled = true;
document.getElementById("shippingvalue").disabled = true;
document.getElementById("dppshipping").disabled = true;
document.getElementById("pph23").disabled = true;
dpp.value = Math.ceil(iv.value.replace(/[.*+?^${}()|[\]\\]/g,"") / 1.1);
pph.value = Math.ceil(dpp.value.replace(/[.*+?^${}()|[\]\\]/g,"") * 0.015);
ppn.value = Math.ceil(dpp.value.replace(/[.*+?^${}()|[\]\\]/g,"") * 0.10);
income.value = iv.value.replace(/[.*+?^${}()|[\]\\]/g,"")-pph.value-ppn.value;
}else{
if(propv.value.replace(/[.*+?^${}()|[\]\\]/g,"") > 0){
document.getElementById("invoicevalue").disabled = true;
total = parseFloat(propv.value.replace(/[.*+?^${}()|[\]\\]/g,""),10)+parseFloat(shipv.value.replace(/[.*+?^${}()|[\]\\]/g,""),10);
// total = String(total);
propv.value = String(propv.value);
shipv.value = String(shipv.value);
dpp.value = Math.ceil(propv.value.replace(/[.*+?^${}()|[\]\\]/g,"") / 1.1);
dppship.value = Math.ceil(shipv.value.replace(/[.*+?^${}()|[\]\\]/g,"") / 1.1);
pph.value = Math.ceil(dpp.value.replace(/[.*+?^${}()|[\]\\]/g,"") * 0.015);
pph23.value = Math.ceil(dppship.value.replace(/[.*+?^${}()|[\]\\]/g,"") * 0.02);
ppn.value = (propv.value.replace(/[.*+?^${}()|[\]\\]/g,"") - dpp.value)+(shipv.value.replace(/[.*+?^${}()|[\]\\]/g,"")-dppship.value);
income.value = total-pph.value-ppn.value-pph23.value;
}else{
document.getElementById("propertyvalue").disabled = false;
document.getElementById("shippingvalue").disabled = false;
document.getElementById("dppshipping").disabled = false;
document.getElementById("pph23").disabled = false;
}
}
console.log(total);
if(dpp.value <= 0){
dpp.value = 0;
}
if(dppship.value <= 0){
dppship.value = 0;
}
if(pph.value <= 0){
pph.value = 0;
}
if(pph23.value <= 0){
pph23.value = 0;
}
if(ppn.value <= 0){
ppn.value = 0;
}
if(income.value <= 0){
income.value = 0;
}
dppship.value = tandaPemisahTitik(dppship.value);
dpp.value = tandaPemisahTitik(dpp.value);
pph.value = tandaPemisahTitik(pph.value);
pph23.value = tandaPemisahTitik(pph23.value);
ppn.value = tandaPemisahTitik(ppn.value);
pphdoc.value = tandaPemisahTitik(pph.value.replace(/[.*+?^${}()|[\]\\]/g,""));
pphdoc23.value = tandaPemisahTitik(pph23.value.replace(/[.*+?^${}()|[\]\\]/g,""));
ppndoc.value = tandaPemisahTitik(ppn.value);
income.value = tandaPemisahTitik(income.value);
}
this my javascript code to count value and display it in input value.
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="ppn"><?php print _('mi_invoice_ppn'); ?></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="input-group">
<span class="input-group-addon" style="border-radius:0px;">Rp</span>
<input type="text" name="ppn" id="ppn" class="form-control" onkeydown="return numbersonly(this, event);" onkeyup="javascript:tandaPemisahTitik(this);" placeholder="0" />
</div>
</div>
</div>
this is the input code. i want change input text value has been count in javascript function. i want to manually changed again. so javascript function to count automatic. and can edit again if miscalculation.
If you want to recalculate when any input value's changed, you can add change listener on the input elements.
will be look like:
let inputElems = document.querySelectorAll("input");
for (let i = 0, len = inputElems.length; i < len; i++) {
inputElems[i].addEventListener("change", countsisa);
}