我如何添加一个 JS 函数来使包括 INPUT 字段在内的所有数字都显示千位分隔符？
How can I add a JS function to make all numbers including INPUT fields show the THOUSAND SEPARATOR?
能否请您看一下这段代码，并告诉我如何让所有数字都带有千位分隔符“,”，包括当用户在输入字段中输入新数字时。代码可以在
上看到
https://jsfiddle.net/moeadas/53wqcmg6/29/
我不是开发人员，但我正在尝试从事一些小项目以提高我的技能，所以我相信您会看到代码写得很糟糕，但对我来说它工作得很好:-)
非常感谢您的支持。
这里还有JS代码
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
// This function will display the specified tab of the form ...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
// ... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
// ... and run a function that displays the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form... :
if (currentTab >= x.length) {
//...the form gets submitted:
document.getElementById("CreativeAcquisitions").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false:
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class to the current step:
x[n].className += " active";
}
function calcule2(){
var i=0; for (i=0;i<= 50;i++) {calcule();}}
function calcule(){
CreativeAcquisitions.B28.value = parseFloat(CreativeAcquisitions.B17.value) + parseFloat(CreativeAcquisitions.B19.value) + parseFloat(CreativeAcquisitions.B21.value) + parseFloat(CreativeAcquisitions.B23.value) + parseFloat(CreativeAcquisitions.B25.value);
CreativeAcquisitions.B52.value = (parseFloat(CreativeAcquisitions.B4.value) * parseFloat(CreativeAcquisitions.B6.value)) + parseFloat(CreativeAcquisitions.D81.value);
CreativeAcquisitions.B55.value = parseFloat(CreativeAcquisitions.B4.value) * parseFloat(CreativeAcquisitions.B6.value);
CreativeAcquisitions.B56.value = parseFloat(CreativeAcquisitions.B28.value);
CreativeAcquisitions.B66.value = parseFloat(CreativeAcquisitions.B200.value);
CreativeAcquisitions.B67.value = parseFloat(CreativeAcquisitions.B56.value);
CreativeAcquisitions.B68.value = parseFloat(CreativeAcquisitions.B36.value) + parseFloat(CreativeAcquisitions.B37.value) + parseFloat(CreativeAcquisitions.B38.value) + parseFloat(CreativeAcquisitions.B39.value) + parseFloat(CreativeAcquisitions.B40.value);
CreativeAcquisitions.B69.value = parseFloat(CreativeAcquisitions.B41.value);
CreativeAcquisitions.B70.value = (parseFloat(CreativeAcquisitions.B200.value) * parseFloat(CreativeAcquisitions.B46.value)) /100;
CreativeAcquisitions.B71.value = (parseFloat(CreativeAcquisitions.B200.value) * parseFloat(CreativeAcquisitions.B47.value)) /100;
CreativeAcquisitions.B72.value = parseFloat(CreativeAcquisitions.B66.value) - parseFloat(CreativeAcquisitions.B68.value) - parseFloat(CreativeAcquisitions.B70.value) - parseFloat(CreativeAcquisitions.B69.value) - parseFloat(CreativeAcquisitions.B71.value);
CreativeAcquisitions.B76.value = parseFloat(CreativeAcquisitions.B17.value);
CreativeAcquisitions.D76.value = (parseFloat(CreativeAcquisitions.B76.value) * parseFloat(CreativeAcquisitions.C76.value)) /100;
CreativeAcquisitions.B77.value = parseFloat(CreativeAcquisitions.B19.value);
CreativeAcquisitions.D77.value = (parseFloat(CreativeAcquisitions.B77.value) * parseFloat(CreativeAcquisitions.C77.value)) /100;
CreativeAcquisitions.B78.value = parseFloat(CreativeAcquisitions.B21.value);
CreativeAcquisitions.D78.value = (parseFloat(CreativeAcquisitions.B78.value) * parseFloat(CreativeAcquisitions.C78.value)) /100;
CreativeAcquisitions.B79.value = parseFloat(CreativeAcquisitions.B23.value);
CreativeAcquisitions.D79.value = (parseFloat(CreativeAcquisitions.B79.value) * parseFloat(CreativeAcquisitions.C79.value)) /100;
CreativeAcquisitions.B80.value = parseFloat(CreativeAcquisitions.B25.value);
CreativeAcquisitions.D80.value = (parseFloat(CreativeAcquisitions.B80.value) * parseFloat(CreativeAcquisitions.C80.value)) /100;
CreativeAcquisitions.B81.value = parseFloat(CreativeAcquisitions.B76.value)+ parseFloat(CreativeAcquisitions.B77.value) + parseFloat(CreativeAcquisitions.B78.value) + parseFloat(CreativeAcquisitions.B79.value) + parseFloat(CreativeAcquisitions.B80.value);
CreativeAcquisitions.D81.value = parseFloat(CreativeAcquisitions.D76.value)+ parseFloat(CreativeAcquisitions.D77.value) + parseFloat(CreativeAcquisitions.D78.value) + parseFloat(CreativeAcquisitions.D79.value) + parseFloat(CreativeAcquisitions.D80.value);
CreativeAcquisitions.B91.value = parseFloat(CreativeAcquisitions.B36.value);
CreativeAcquisitions.B92.value = parseFloat(CreativeAcquisitions.B37.value);
CreativeAcquisitions.B93.value = parseFloat(CreativeAcquisitions.B38.value);
CreativeAcquisitions.B94.value = parseFloat(CreativeAcquisitions.B39.value);
CreativeAcquisitions.B95.value = parseFloat(CreativeAcquisitions.B40.value);
CreativeAcquisitions.B96.value = (parseFloat(CreativeAcquisitions.B52.value) * parseFloat(CreativeAcquisitions.B46.value)) /100;
CreativeAcquisitions.B97.value = parseFloat(CreativeAcquisitions.B41.value);
CreativeAcquisitions.B98.value = parseFloat(CreativeAcquisitions.B91.value) + parseFloat(CreativeAcquisitions.B92.value) + parseFloat(CreativeAcquisitions.B93.value)+ parseFloat(CreativeAcquisitions.B94.value)+ parseFloat(CreativeAcquisitions.B95.value) + parseFloat(CreativeAcquisitions.B96.value)+ parseFloat(CreativeAcquisitions.B97.value);
CreativeAcquisitions.C98.value = parseFloat(CreativeAcquisitions.C91.value) + parseFloat(CreativeAcquisitions.C92.value) + parseFloat(CreativeAcquisitions.C93.value) + parseFloat(CreativeAcquisitions.C94.value)+ parseFloat(CreativeAcquisitions.C95.value) + parseFloat(CreativeAcquisitions.C96.value) + parseFloat(CreativeAcquisitions.C97.value);
CreativeAcquisitions.B101.value = parseFloat(CreativeAcquisitions.B4.value);
CreativeAcquisitions.B105.value = (parseFloat(CreativeAcquisitions.B101.value) * parseFloat(CreativeAcquisitions.B103.value)) /100;
CreativeAcquisitions.B107.value = parseFloat(CreativeAcquisitions.C98.value);
CreativeAcquisitions.B108.value = parseFloat(CreativeAcquisitions.B101.value) + parseFloat(CreativeAcquisitions.B105.value) - parseFloat(CreativeAcquisitions.B107.value);
}
请注意，我 select 所有输入都是文本类型，因此您应该在要应用千位分隔符的输入中添加某个 class 例如 class="thousand-sep" 和 select 输入 class ，以避免在输入不是有效数字时获得无效输入值（在你的情况下没关系，因为所有输入都是数字，尽管你甚至可以设置类型改为数字）。
//////////Newcode///////////////////////////
function milesIt(num) {
return Math.floor(num).toString().split("").reverse().map((n, i, a) =>
(i + 1) % 3 === 0 && i + 1 != a.length && "." + n || n).reverse().join("");
}
var inputs = document.querySelectorAll("[type='text']");
inputs.forEach(function(input) {
//change the values to include the thousand separator each time the user changes an input
input.onchange = function(e) {
inputs.forEach(function(inp) {
inp.value = inp.value.replace(/[.]/g, '');
});
calcule2();
inputs.forEach(function(inp) {
inp.value = milesIt(inp.value);
});
//e.target.value = milesIt(e.target.value.replace(/[.]/g, ''));
}
//change the values of the inputs at the beginning, although you could write them as HTML with the thousand separator values in the source code
input.value = milesIt(input.value);
});
////////////////////////////////////////////
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
// This function will display the specified tab of the form ...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
// ... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
// ... and run a function that displays the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form... :
if (currentTab >= x.length) {
//...the form gets submitted:
document.getElementById("CreativeAcquisitions").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false:
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class to the current step:
x[n].className += " active";
}
function calcule2(){
var i=0; for (i=0;i<= 50;i++) {calcule();}}
function calcule(){
CreativeAcquisitions.B28.value = parseFloat(CreativeAcquisitions.B17.value) + parseFloat(CreativeAcquisitions.B19.value) + parseFloat(CreativeAcquisitions.B21.value) + parseFloat(CreativeAcquisitions.B23.value) + parseFloat(CreativeAcquisitions.B25.value);
CreativeAcquisitions.B52.value = (parseFloat(CreativeAcquisitions.B4.value) * parseFloat(CreativeAcquisitions.B6.value)) + parseFloat(CreativeAcquisitions.D81.value);
CreativeAcquisitions.B55.value = parseFloat(CreativeAcquisitions.B4.value) * parseFloat(CreativeAcquisitions.B6.value);
CreativeAcquisitions.B56.value = parseFloat(CreativeAcquisitions.B28.value);
CreativeAcquisitions.B66.value = parseFloat(CreativeAcquisitions.B200.value);
CreativeAcquisitions.B67.value = parseFloat(CreativeAcquisitions.B56.value);
CreativeAcquisitions.B68.value = parseFloat(CreativeAcquisitions.B36.value) + parseFloat(CreativeAcquisitions.B37.value) + parseFloat(CreativeAcquisitions.B38.value) + parseFloat(CreativeAcquisitions.B39.value) + parseFloat(CreativeAcquisitions.B40.value);
CreativeAcquisitions.B69.value = parseFloat(CreativeAcquisitions.B41.value);
CreativeAcquisitions.B70.value = (parseFloat(CreativeAcquisitions.B200.value) * parseFloat(CreativeAcquisitions.B46.value)) /100;
CreativeAcquisitions.B71.value = (parseFloat(CreativeAcquisitions.B200.value) * parseFloat(CreativeAcquisitions.B47.value)) /100;
CreativeAcquisitions.B72.value = parseFloat(CreativeAcquisitions.B66.value) - parseFloat(CreativeAcquisitions.B68.value) - parseFloat(CreativeAcquisitions.B70.value) - parseFloat(CreativeAcquisitions.B69.value) - parseFloat(CreativeAcquisitions.B71.value);
CreativeAcquisitions.B76.value = parseFloat(CreativeAcquisitions.B17.value);
CreativeAcquisitions.D76.value = (parseFloat(CreativeAcquisitions.B76.value) * parseFloat(CreativeAcquisitions.C76.value)) /100;
CreativeAcquisitions.B77.value = parseFloat(CreativeAcquisitions.B19.value);
CreativeAcquisitions.D77.value = (parseFloat(CreativeAcquisitions.B77.value) * parseFloat(CreativeAcquisitions.C77.value)) /100;
CreativeAcquisitions.B78.value = parseFloat(CreativeAcquisitions.B21.value);
CreativeAcquisitions.D78.value = (parseFloat(CreativeAcquisitions.B78.value) * parseFloat(CreativeAcquisitions.C78.value)) /100;
CreativeAcquisitions.B79.value = parseFloat(CreativeAcquisitions.B23.value);
CreativeAcquisitions.D79.value = (parseFloat(CreativeAcquisitions.B79.value) * parseFloat(CreativeAcquisitions.C79.value)) /100;
CreativeAcquisitions.B80.value = parseFloat(CreativeAcquisitions.B25.value);
CreativeAcquisitions.D80.value = (parseFloat(CreativeAcquisitions.B80.value) * parseFloat(CreativeAcquisitions.C80.value)) /100;
CreativeAcquisitions.B81.value = parseFloat(CreativeAcquisitions.B76.value)+ parseFloat(CreativeAcquisitions.B77.value) + parseFloat(CreativeAcquisitions.B78.value) + parseFloat(CreativeAcquisitions.B79.value) + parseFloat(CreativeAcquisitions.B80.value);
CreativeAcquisitions.D81.value = parseFloat(CreativeAcquisitions.D76.value)+ parseFloat(CreativeAcquisitions.D77.value) + parseFloat(CreativeAcquisitions.D78.value) + parseFloat(CreativeAcquisitions.D79.value) + parseFloat(CreativeAcquisitions.D80.value);
CreativeAcquisitions.B91.value = parseFloat(CreativeAcquisitions.B36.value);
CreativeAcquisitions.B92.value = parseFloat(CreativeAcquisitions.B37.value);
CreativeAcquisitions.B93.value = parseFloat(CreativeAcquisitions.B38.value);
CreativeAcquisitions.B94.value = parseFloat(CreativeAcquisitions.B39.value);
CreativeAcquisitions.B95.value = parseFloat(CreativeAcquisitions.B40.value);
CreativeAcquisitions.B96.value = (parseFloat(CreativeAcquisitions.B52.value) * parseFloat(CreativeAcquisitions.B46.value)) /100;
CreativeAcquisitions.B97.value = parseFloat(CreativeAcquisitions.B41.value);
CreativeAcquisitions.B98.value = parseFloat(CreativeAcquisitions.B91.value) + parseFloat(CreativeAcquisitions.B92.value) + parseFloat(CreativeAcquisitions.B93.value)+ parseFloat(CreativeAcquisitions.B94.value)+ parseFloat(CreativeAcquisitions.B95.value) + parseFloat(CreativeAcquisitions.B96.value)+ parseFloat(CreativeAcquisitions.B97.value);
CreativeAcquisitions.C98.value = parseFloat(CreativeAcquisitions.C91.value) + parseFloat(CreativeAcquisitions.C92.value) + parseFloat(CreativeAcquisitions.C93.value) + parseFloat(CreativeAcquisitions.C94.value)+ parseFloat(CreativeAcquisitions.C95.value) + parseFloat(CreativeAcquisitions.C96.value) + parseFloat(CreativeAcquisitions.C97.value);
CreativeAcquisitions.B101.value = parseFloat(CreativeAcquisitions.B4.value);
CreativeAcquisitions.B105.value = (parseFloat(CreativeAcquisitions.B101.value) * parseFloat(CreativeAcquisitions.B103.value)) /100;
CreativeAcquisitions.B107.value = parseFloat(CreativeAcquisitions.C98.value);
CreativeAcquisitions.B108.value = parseFloat(CreativeAcquisitions.B101.value) + parseFloat(CreativeAcquisitions.B105.value) - parseFloat(CreativeAcquisitions.B107.value);
}
/* Style the form */
form {
font-family: 'Roboto', sans-serif;
background-color: #e6f9ff;
padding: 20px;
width: 100%;
min-width: 300px;
}
table {
table-layout: fixed;
width: 100%;
}
.tableRow {
height: 30px;
border-style: none;}
/* Rounded Valuation Sections */
.roundedValuation {
font-size: 20px;
font-weight: bold;
}
.roundedValuationInput {
padding: 12px !important;
margin-left: 10px !important;
width: 150px;
font-size: 17px;
font-weight: bold;
background-color: #ffffff !important;
border: 1px solid #F0F0F0 !important;
}
p {
font-family: 'Roboto', sans-serif;
margin-right: 15px;
}
h2 {
font-size: 24px;
color:#e6f9ff;
background-color: rgb(53,88,96);
padding: 20px !important;
margin: -20px !important;
}
h3 {
font-size: 20px;
color: #505050
}
h5 {
font-size: 15px;
}
.notes {
font-size: 12px;
font-style: italic;
}
/* Style the total sum fields */
.total {
padding: 10px !important;
width: 150px !important;
font-size: 17px !important;
font-weight: bold;
background-color: transparent !important;
border: none !important;
}
/* Style the input fields no pound sign */
.noSign {
padding: 10px;
width: 150px !important;
font-size: 17px;
margin-left: 0 !important;
background-color: #ffffff;
border: 1px solid #F0F0F0;
}
/* Style the input fields step one */
.stepOne {
padding: 10px;
width: 150px !important;
font-size: 17px;
margin-left: 0 !important;
background-color: #ffffff;
border: 1px solid #F0F0F0;
}
/* Mark step one input boxes that gets an error on validation: */
.stepOne.invalid {
background-color: #ffdddd;
}
/* Style the input fields */
input {
padding: 10px !important;
margin-left: 10px !important;
width: 150px;
font-size: 17px;
background-color: #ffffff !important;
border: 1px solid #F0F0F0 !important;
}
/* Mark input boxes that gets an error on validation: */
input.invalid {
background-color: #ffdddd;
}
/* Hide all steps by default: */
.tab {
display: none;
}
/* Make circles that indicate the steps of the form: */
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
/* Mark the active step: */
.step.active {
opacity: 1;
}
/* Mark the steps that are finished and valid: */
.step.finish {
background-color: #4CAF50;
}
button {
margin-top: 40px;
width: 120px;
padding-top: 10px;
padding-bottom: 10px;
font-size: 14px;
background: rgb(53,88,96);
color: #e6f9ff;
}
button:hover {
background: rgb(69,89,94);
}
/* Divi Theme Raltes Classes*/
.entry-content tr td, body.et-pb-preview #main-content .container tr td {
border: none !important;
}
.entry-content table:not(.variations), body.et-pb-preview #main-content .container table {
border: none !important;
}
<form id="CreativeAcquisitions" action="">
<div class="tab">
<h2>STEP ONE</h2>
<br>
<br>
<h3>Performance</h3>
<p>What is the Adjusted Net Profit (or EBITDA)?</p>
<input class="stepOne" type="text" onchange="calcule2()" name="B4" value="200000">
<br>
<br>
<p>What multiple would you like to apply? <span class="notes"> standard is from 2 to 3 (Preset value is 2) </span></p>
<input class="noSign" type="text" onchange="calcule2()" name="B6" value="2">
</div>
<div class="tab">
<h2>STEP TWO</h2>
<br>
<br>
<h3>Assets</h3>
<h4>On the closing date</h4>
<table>
<tr class="tableRow">
<td>
<p>How much Cash will be in the Bank account? <span class="notes"> (calculate 100%) </span> </p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B17" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p> How much in inventory will the business hold? <span class="notes"> (calculate 70%) </span></p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B19" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p>Please enter rough value of property owned by the business: <span class="notes"> (calculate 75%) </span> </p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B21" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p>
Enter value of invoices that are outstanding (Receivables): <span class="notes"> (calculate 80%) </span></p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B23" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p>Enter value of other assets (like equipment and vehicles): <span class="notes"> (calculate 70%) </span></p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B25" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<h5>
Total </h5>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B28" value="50000"></td>
</tr>
</table>
</div>
<div class="tab">
<h2>STEP THREE</h2>
<br>
<br>
<h3>Liabilities</h3>
<h4>On the closing date</h4>
<table>
<tr class="tableRow">
<td>
<p>Enter value of outstanding Loans that the company has: </p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B36" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p>
Enter approx. value of Corporation Tax outstanding: </p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B37" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p>
Enter value of any money owed by the company (e.g to suppliers): </p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B38" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p>
Is it possible to defer PAYE payments? If so how much </p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B39" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p>
Is it possible to defer VAT payments? If so how much </p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B40" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p>
Can you borrow money against the company (New loan for Acquisition)? <span class="notes"> (calculate 100%) </span> </p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B41" value="120000"></td>
</tr>
</table>
</div>
<div class="tab">
<h2>STEP FOUR</h2>
<br>
<br>
<h3>Seller Equity & Deferred Payments</h3>
<table>
<tr class="tableRow">
<td>
<p>Is the Seller willing to hold back some equity in the business? If so, what percentage: </p>
</td>
<td>%<input type="text" onchange="calcule2()" name="B46" value="10"></td>
</tr>
<tr class="tableRow">
<td>
<p> What percentage of the purchase price will the seller be willing to defer?</p>
</td>
<td>%<input type="text" onchange="calcule2()" name="B47" value="10"></td>
</tr>
</table>
</div>
<div class="tab">
<h2>RESULTS</h2>
<br>
<br>
<h3>Valuation</h3>
<table>
<tr class="tableRow">
<td>
<p>
The value of the business is around: (TOTAL)</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B52" value="442500"></td>
</tr>
<tr class="tableRow">
<td>
<h4>This is broken down into:</h4>
</td>
</tr>
<tr class="tableRow">
<td>
<p>Payment for Goodwill</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B55" value="400000"></td>
</tr>
<tr class="tableRow">
<td>
<p>Payment for Assets</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B56" value="50000"></td>
</tr>
<tr class="tableRow">
<td>
<p> Payment for Liabilities</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B68" value="50000"></td>
</tr>
<tr class="tableRow">
<td>
<p class="roundedValuation"> ENTER ROUNDED VALUATION</p>
</td>
<td>£<input class="roundedValuationInput" type="text" onchange="calcule2()" name="B200" value="0"></td>
</tr>
</table>
<br>
<h2>Deal Structure</h2>
<br>
<br>
<h4>You can structure the deal in the following manner:</h4>
<table>
<tr class="tableRow">
<td>
<p> VALUATION AMOUNT (Goodwill and Assets)</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B66" value="442500"></td>
</tr>
<tr class="tableRow">
<td>
<p> MONEY POTENTIALLY RAISED FROM ALL ASSETS</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B67" value="50000"></td>
</tr>
<tr class="tableRow">
<td>
<p>NEW LOAN RAISED</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B69" value="120000"></td>
</tr>
<tr class="tableRow">
<td>
<p>PAYMENT RETAINED FOR SELLER EQUITY SHARE</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B70" value="44250"></td>
</tr>
<tr class="tableRow">
<td>
<p> SELLER DEFERRMENT AMOUNT</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B71" value="44250"></td>
</tr>
<tr class="tableRow">
<td>
<p>SHORTFALL (SURPLUS)</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B72" value="184000"></td>
</tr>
</table>
<br>
<h2> Assets Valuation Breakdown</h2>
<br>
<br>
<table>
<tr class="tableRow">
<td>
<h5>Assets </h5>
</td>
<td>
<h5>Input Amount </h5>
</td>
<td>
<h5>Value </h5>
</td>
<td>
<h5>Net Value </h5>
</td>
</tr>
<tr class="tableRow">
<td>
<p>Cash </p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B76" value="10000"></td>
<td>%<input type="number" min="1" max="100" onchange="calcule2()" name="C76" value="100"></td>
<td>£<input class="total" type="text" onchange="calcule2()" name="D76" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p> Inventory</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B77" value="10000"></td>
<td>%<input type="number" min="1" max="100" onchange="calcule2()" name="C77" value="70"></td>
<td>£<input class="total" type="text" onchange="calcule2()" name="D77" value="7000"></td>
</tr>
<tr class="tableRow">
<td>
<p> Property</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B78" value="10000"></td>
<td>%<input type="number" min="1" max="100" onchange="calcule2()" name="C78" value="75"></td>
<td>£<input class="total" type="text" onchange="calcule2()" name="D78" value="7500"></td>
</tr>
<tr class="tableRow">
<td>
<p> Debitors</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B79" value="10000"></td>
<td>%<input type="number" min="1" max="100" onchange="calcule2()" name="C79" value="80"></td>
<td>£<input class="total" type="text" onchange="calcule2()" name="D79" value="8000"></td>
</tr>
<tr class="tableRow">
<td>
<p> Others</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B80" value="10000"></td>
<td>%<input type="number" min="1" max="100" onchange="calcule2()" name="C80" value="100"></td>
<td>£<input class="total" type="text" onchange="calcule2()" name="D80" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<h5> TOTAL</h5>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B81" value="50000"></td>
<td></td>
<td>£<input class="total" type="text" onchange="calcule2()" name="D81" value="42500"></td>
</tr>
</table>
<br>
<br>
<h2>Cash Flow Calculator</h2>
<br>
<br>
<table>
<tr class="tableRow">
<td>
<h5>LIABILITY </h5>
</td>
<td>
<h5>Total Amount </h5>
</td>
<td>
<h5>Yearly Repayment</h5>
</td>
</tr>
<tr class="tableRow">
<td>
<p>Loan Repayment </p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B91" value="10000"></td>
<td>£<input type="text" onchange="calcule2()" name="C91" value="0"></td>
</tr>
<tr class="tableRow">
<td>
<p>Corporation Tax </p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B92" value="10000"></td>
<td>£<input type="text" onchange="calcule2()" name="C92" value="0"></td>
</tr>
<tr class="tableRow">
<td>
<p>Trade Creditors </p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B93" value="10000"></td>
<td>£<input type="text" onchange="calcule2()" name="C93" value="0"></td>
</tr>
<tr class="tableRow">
<td>
<p>PAYE Deferments </p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B94" value="10000"></td>
<td>£<input type="text" onchange="calcule2()" name="C94" value="0"></td>
</tr>
<tr class="tableRow">
<td>
<p> VAT Deferments </p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B95" value="10000"></td>
<td>£<input type="text" onchange="calcule2()" name="C95" value="0"></td>
</tr>
<tr class="tableRow">
<td>
<p>Seller Deferred Payment </p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B96" value="44250"></td>
<td>£<input type="text" onchange="calcule2()" name="C96" value="0"></td>
</tr>
<tr class="tableRow">
<td>
<p>New Loan taken </p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B97" value="120000"></td>
<td>£<input type="text" onchange="calcule2()" name="C97" value="0"></td>
</tr>
<tr class="tableRow">
<td>
<h5> TOTAL </h5>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B98" value="214250"></td>
<td>£<input class="total" type="text" onchange="calcule2()" name="C98" value="0"></td>
</tr>
</table>
<br>
<br>
<h2>SUMMARY</h2>
<br>
<br>
<table table-layout: fixed; width: 100%;>
<tr class="tableRow">
<td>
<h4>Net Profit </h4>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B101" value="200000"></td>
</tr>
<tr class="tableRow">
<td>
<h4>CT RATE <span class="notes"> (Pre-set at 19%) </span> </h4>
</td>
<td>%<input type="number" min="1" max="100" onchange="calcule2()" name="B103" value="19"></td>
</tr>
<tr class="tableRow">
<td>
<h4>CT DUE IN FUTURE : </h4>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B105" value="38000"></td>
</tr>
<tr class="tableRow">
<td>
<h4>COST OF PAYING LIABILITIES</h4>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B107" value="42850"></td>
</tr>
<tr class="tableRow">
<td>
<h4>CASH FLOW SURPLUS PER YEAR <span class="notes"> (Post financing and tax) </span></h4>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B108" value="195150"></td>
</tr>
</table>
</div>
<div>
<div class="right">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
<!-- Circles which indicates the steps of the form: -->
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>
能否请您看一下这段代码，并告诉我如何让所有数字都带有千位分隔符“,”，包括当用户在输入字段中输入新数字时。代码可以在
上看到https://jsfiddle.net/moeadas/53wqcmg6/29/
我不是开发人员，但我正在尝试从事一些小项目以提高我的技能，所以我相信您会看到代码写得很糟糕，但对我来说它工作得很好:-)
非常感谢您的支持。
这里还有JS代码
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
// This function will display the specified tab of the form ...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
// ... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
// ... and run a function that displays the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form... :
if (currentTab >= x.length) {
//...the form gets submitted:
document.getElementById("CreativeAcquisitions").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false:
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class to the current step:
x[n].className += " active";
}
function calcule2(){
var i=0; for (i=0;i<= 50;i++) {calcule();}}
function calcule(){
CreativeAcquisitions.B28.value = parseFloat(CreativeAcquisitions.B17.value) + parseFloat(CreativeAcquisitions.B19.value) + parseFloat(CreativeAcquisitions.B21.value) + parseFloat(CreativeAcquisitions.B23.value) + parseFloat(CreativeAcquisitions.B25.value);
CreativeAcquisitions.B52.value = (parseFloat(CreativeAcquisitions.B4.value) * parseFloat(CreativeAcquisitions.B6.value)) + parseFloat(CreativeAcquisitions.D81.value);
CreativeAcquisitions.B55.value = parseFloat(CreativeAcquisitions.B4.value) * parseFloat(CreativeAcquisitions.B6.value);
CreativeAcquisitions.B56.value = parseFloat(CreativeAcquisitions.B28.value);
CreativeAcquisitions.B66.value = parseFloat(CreativeAcquisitions.B200.value);
CreativeAcquisitions.B67.value = parseFloat(CreativeAcquisitions.B56.value);
CreativeAcquisitions.B68.value = parseFloat(CreativeAcquisitions.B36.value) + parseFloat(CreativeAcquisitions.B37.value) + parseFloat(CreativeAcquisitions.B38.value) + parseFloat(CreativeAcquisitions.B39.value) + parseFloat(CreativeAcquisitions.B40.value);
CreativeAcquisitions.B69.value = parseFloat(CreativeAcquisitions.B41.value);
CreativeAcquisitions.B70.value = (parseFloat(CreativeAcquisitions.B200.value) * parseFloat(CreativeAcquisitions.B46.value)) /100;
CreativeAcquisitions.B71.value = (parseFloat(CreativeAcquisitions.B200.value) * parseFloat(CreativeAcquisitions.B47.value)) /100;
CreativeAcquisitions.B72.value = parseFloat(CreativeAcquisitions.B66.value) - parseFloat(CreativeAcquisitions.B68.value) - parseFloat(CreativeAcquisitions.B70.value) - parseFloat(CreativeAcquisitions.B69.value) - parseFloat(CreativeAcquisitions.B71.value);
CreativeAcquisitions.B76.value = parseFloat(CreativeAcquisitions.B17.value);
CreativeAcquisitions.D76.value = (parseFloat(CreativeAcquisitions.B76.value) * parseFloat(CreativeAcquisitions.C76.value)) /100;
CreativeAcquisitions.B77.value = parseFloat(CreativeAcquisitions.B19.value);
CreativeAcquisitions.D77.value = (parseFloat(CreativeAcquisitions.B77.value) * parseFloat(CreativeAcquisitions.C77.value)) /100;
CreativeAcquisitions.B78.value = parseFloat(CreativeAcquisitions.B21.value);
CreativeAcquisitions.D78.value = (parseFloat(CreativeAcquisitions.B78.value) * parseFloat(CreativeAcquisitions.C78.value)) /100;
CreativeAcquisitions.B79.value = parseFloat(CreativeAcquisitions.B23.value);
CreativeAcquisitions.D79.value = (parseFloat(CreativeAcquisitions.B79.value) * parseFloat(CreativeAcquisitions.C79.value)) /100;
CreativeAcquisitions.B80.value = parseFloat(CreativeAcquisitions.B25.value);
CreativeAcquisitions.D80.value = (parseFloat(CreativeAcquisitions.B80.value) * parseFloat(CreativeAcquisitions.C80.value)) /100;
CreativeAcquisitions.B81.value = parseFloat(CreativeAcquisitions.B76.value)+ parseFloat(CreativeAcquisitions.B77.value) + parseFloat(CreativeAcquisitions.B78.value) + parseFloat(CreativeAcquisitions.B79.value) + parseFloat(CreativeAcquisitions.B80.value);
CreativeAcquisitions.D81.value = parseFloat(CreativeAcquisitions.D76.value)+ parseFloat(CreativeAcquisitions.D77.value) + parseFloat(CreativeAcquisitions.D78.value) + parseFloat(CreativeAcquisitions.D79.value) + parseFloat(CreativeAcquisitions.D80.value);
CreativeAcquisitions.B91.value = parseFloat(CreativeAcquisitions.B36.value);
CreativeAcquisitions.B92.value = parseFloat(CreativeAcquisitions.B37.value);
CreativeAcquisitions.B93.value = parseFloat(CreativeAcquisitions.B38.value);
CreativeAcquisitions.B94.value = parseFloat(CreativeAcquisitions.B39.value);
CreativeAcquisitions.B95.value = parseFloat(CreativeAcquisitions.B40.value);
CreativeAcquisitions.B96.value = (parseFloat(CreativeAcquisitions.B52.value) * parseFloat(CreativeAcquisitions.B46.value)) /100;
CreativeAcquisitions.B97.value = parseFloat(CreativeAcquisitions.B41.value);
CreativeAcquisitions.B98.value = parseFloat(CreativeAcquisitions.B91.value) + parseFloat(CreativeAcquisitions.B92.value) + parseFloat(CreativeAcquisitions.B93.value)+ parseFloat(CreativeAcquisitions.B94.value)+ parseFloat(CreativeAcquisitions.B95.value) + parseFloat(CreativeAcquisitions.B96.value)+ parseFloat(CreativeAcquisitions.B97.value);
CreativeAcquisitions.C98.value = parseFloat(CreativeAcquisitions.C91.value) + parseFloat(CreativeAcquisitions.C92.value) + parseFloat(CreativeAcquisitions.C93.value) + parseFloat(CreativeAcquisitions.C94.value)+ parseFloat(CreativeAcquisitions.C95.value) + parseFloat(CreativeAcquisitions.C96.value) + parseFloat(CreativeAcquisitions.C97.value);
CreativeAcquisitions.B101.value = parseFloat(CreativeAcquisitions.B4.value);
CreativeAcquisitions.B105.value = (parseFloat(CreativeAcquisitions.B101.value) * parseFloat(CreativeAcquisitions.B103.value)) /100;
CreativeAcquisitions.B107.value = parseFloat(CreativeAcquisitions.C98.value);
CreativeAcquisitions.B108.value = parseFloat(CreativeAcquisitions.B101.value) + parseFloat(CreativeAcquisitions.B105.value) - parseFloat(CreativeAcquisitions.B107.value);
}
请注意，我 select 所有输入都是文本类型，因此您应该在要应用千位分隔符的输入中添加某个 class 例如 class="thousand-sep" 和 select 输入 class ，以避免在输入不是有效数字时获得无效输入值（在你的情况下没关系，因为所有输入都是数字，尽管你甚至可以设置类型改为数字）。
//////////Newcode///////////////////////////
function milesIt(num) {
return Math.floor(num).toString().split("").reverse().map((n, i, a) =>
(i + 1) % 3 === 0 && i + 1 != a.length && "." + n || n).reverse().join("");
}
var inputs = document.querySelectorAll("[type='text']");
inputs.forEach(function(input) {
//change the values to include the thousand separator each time the user changes an input
input.onchange = function(e) {
inputs.forEach(function(inp) {
inp.value = inp.value.replace(/[.]/g, '');
});
calcule2();
inputs.forEach(function(inp) {
inp.value = milesIt(inp.value);
});
//e.target.value = milesIt(e.target.value.replace(/[.]/g, ''));
}
//change the values of the inputs at the beginning, although you could write them as HTML with the thousand separator values in the source code
input.value = milesIt(input.value);
});
////////////////////////////////////////////
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
// This function will display the specified tab of the form ...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
// ... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
// ... and run a function that displays the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form... :
if (currentTab >= x.length) {
//...the form gets submitted:
document.getElementById("CreativeAcquisitions").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false:
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class to the current step:
x[n].className += " active";
}
function calcule2(){
var i=0; for (i=0;i<= 50;i++) {calcule();}}
function calcule(){
CreativeAcquisitions.B28.value = parseFloat(CreativeAcquisitions.B17.value) + parseFloat(CreativeAcquisitions.B19.value) + parseFloat(CreativeAcquisitions.B21.value) + parseFloat(CreativeAcquisitions.B23.value) + parseFloat(CreativeAcquisitions.B25.value);
CreativeAcquisitions.B52.value = (parseFloat(CreativeAcquisitions.B4.value) * parseFloat(CreativeAcquisitions.B6.value)) + parseFloat(CreativeAcquisitions.D81.value);
CreativeAcquisitions.B55.value = parseFloat(CreativeAcquisitions.B4.value) * parseFloat(CreativeAcquisitions.B6.value);
CreativeAcquisitions.B56.value = parseFloat(CreativeAcquisitions.B28.value);
CreativeAcquisitions.B66.value = parseFloat(CreativeAcquisitions.B200.value);
CreativeAcquisitions.B67.value = parseFloat(CreativeAcquisitions.B56.value);
CreativeAcquisitions.B68.value = parseFloat(CreativeAcquisitions.B36.value) + parseFloat(CreativeAcquisitions.B37.value) + parseFloat(CreativeAcquisitions.B38.value) + parseFloat(CreativeAcquisitions.B39.value) + parseFloat(CreativeAcquisitions.B40.value);
CreativeAcquisitions.B69.value = parseFloat(CreativeAcquisitions.B41.value);
CreativeAcquisitions.B70.value = (parseFloat(CreativeAcquisitions.B200.value) * parseFloat(CreativeAcquisitions.B46.value)) /100;
CreativeAcquisitions.B71.value = (parseFloat(CreativeAcquisitions.B200.value) * parseFloat(CreativeAcquisitions.B47.value)) /100;
CreativeAcquisitions.B72.value = parseFloat(CreativeAcquisitions.B66.value) - parseFloat(CreativeAcquisitions.B68.value) - parseFloat(CreativeAcquisitions.B70.value) - parseFloat(CreativeAcquisitions.B69.value) - parseFloat(CreativeAcquisitions.B71.value);
CreativeAcquisitions.B76.value = parseFloat(CreativeAcquisitions.B17.value);
CreativeAcquisitions.D76.value = (parseFloat(CreativeAcquisitions.B76.value) * parseFloat(CreativeAcquisitions.C76.value)) /100;
CreativeAcquisitions.B77.value = parseFloat(CreativeAcquisitions.B19.value);
CreativeAcquisitions.D77.value = (parseFloat(CreativeAcquisitions.B77.value) * parseFloat(CreativeAcquisitions.C77.value)) /100;
CreativeAcquisitions.B78.value = parseFloat(CreativeAcquisitions.B21.value);
CreativeAcquisitions.D78.value = (parseFloat(CreativeAcquisitions.B78.value) * parseFloat(CreativeAcquisitions.C78.value)) /100;
CreativeAcquisitions.B79.value = parseFloat(CreativeAcquisitions.B23.value);
CreativeAcquisitions.D79.value = (parseFloat(CreativeAcquisitions.B79.value) * parseFloat(CreativeAcquisitions.C79.value)) /100;
CreativeAcquisitions.B80.value = parseFloat(CreativeAcquisitions.B25.value);
CreativeAcquisitions.D80.value = (parseFloat(CreativeAcquisitions.B80.value) * parseFloat(CreativeAcquisitions.C80.value)) /100;
CreativeAcquisitions.B81.value = parseFloat(CreativeAcquisitions.B76.value)+ parseFloat(CreativeAcquisitions.B77.value) + parseFloat(CreativeAcquisitions.B78.value) + parseFloat(CreativeAcquisitions.B79.value) + parseFloat(CreativeAcquisitions.B80.value);
CreativeAcquisitions.D81.value = parseFloat(CreativeAcquisitions.D76.value)+ parseFloat(CreativeAcquisitions.D77.value) + parseFloat(CreativeAcquisitions.D78.value) + parseFloat(CreativeAcquisitions.D79.value) + parseFloat(CreativeAcquisitions.D80.value);
CreativeAcquisitions.B91.value = parseFloat(CreativeAcquisitions.B36.value);
CreativeAcquisitions.B92.value = parseFloat(CreativeAcquisitions.B37.value);
CreativeAcquisitions.B93.value = parseFloat(CreativeAcquisitions.B38.value);
CreativeAcquisitions.B94.value = parseFloat(CreativeAcquisitions.B39.value);
CreativeAcquisitions.B95.value = parseFloat(CreativeAcquisitions.B40.value);
CreativeAcquisitions.B96.value = (parseFloat(CreativeAcquisitions.B52.value) * parseFloat(CreativeAcquisitions.B46.value)) /100;
CreativeAcquisitions.B97.value = parseFloat(CreativeAcquisitions.B41.value);
CreativeAcquisitions.B98.value = parseFloat(CreativeAcquisitions.B91.value) + parseFloat(CreativeAcquisitions.B92.value) + parseFloat(CreativeAcquisitions.B93.value)+ parseFloat(CreativeAcquisitions.B94.value)+ parseFloat(CreativeAcquisitions.B95.value) + parseFloat(CreativeAcquisitions.B96.value)+ parseFloat(CreativeAcquisitions.B97.value);
CreativeAcquisitions.C98.value = parseFloat(CreativeAcquisitions.C91.value) + parseFloat(CreativeAcquisitions.C92.value) + parseFloat(CreativeAcquisitions.C93.value) + parseFloat(CreativeAcquisitions.C94.value)+ parseFloat(CreativeAcquisitions.C95.value) + parseFloat(CreativeAcquisitions.C96.value) + parseFloat(CreativeAcquisitions.C97.value);
CreativeAcquisitions.B101.value = parseFloat(CreativeAcquisitions.B4.value);
CreativeAcquisitions.B105.value = (parseFloat(CreativeAcquisitions.B101.value) * parseFloat(CreativeAcquisitions.B103.value)) /100;
CreativeAcquisitions.B107.value = parseFloat(CreativeAcquisitions.C98.value);
CreativeAcquisitions.B108.value = parseFloat(CreativeAcquisitions.B101.value) + parseFloat(CreativeAcquisitions.B105.value) - parseFloat(CreativeAcquisitions.B107.value);
}
/* Style the form */
form {
font-family: 'Roboto', sans-serif;
background-color: #e6f9ff;
padding: 20px;
width: 100%;
min-width: 300px;
}
table {
table-layout: fixed;
width: 100%;
}
.tableRow {
height: 30px;
border-style: none;}
/* Rounded Valuation Sections */
.roundedValuation {
font-size: 20px;
font-weight: bold;
}
.roundedValuationInput {
padding: 12px !important;
margin-left: 10px !important;
width: 150px;
font-size: 17px;
font-weight: bold;
background-color: #ffffff !important;
border: 1px solid #F0F0F0 !important;
}
p {
font-family: 'Roboto', sans-serif;
margin-right: 15px;
}
h2 {
font-size: 24px;
color:#e6f9ff;
background-color: rgb(53,88,96);
padding: 20px !important;
margin: -20px !important;
}
h3 {
font-size: 20px;
color: #505050
}
h5 {
font-size: 15px;
}
.notes {
font-size: 12px;
font-style: italic;
}
/* Style the total sum fields */
.total {
padding: 10px !important;
width: 150px !important;
font-size: 17px !important;
font-weight: bold;
background-color: transparent !important;
border: none !important;
}
/* Style the input fields no pound sign */
.noSign {
padding: 10px;
width: 150px !important;
font-size: 17px;
margin-left: 0 !important;
background-color: #ffffff;
border: 1px solid #F0F0F0;
}
/* Style the input fields step one */
.stepOne {
padding: 10px;
width: 150px !important;
font-size: 17px;
margin-left: 0 !important;
background-color: #ffffff;
border: 1px solid #F0F0F0;
}
/* Mark step one input boxes that gets an error on validation: */
.stepOne.invalid {
background-color: #ffdddd;
}
/* Style the input fields */
input {
padding: 10px !important;
margin-left: 10px !important;
width: 150px;
font-size: 17px;
background-color: #ffffff !important;
border: 1px solid #F0F0F0 !important;
}
/* Mark input boxes that gets an error on validation: */
input.invalid {
background-color: #ffdddd;
}
/* Hide all steps by default: */
.tab {
display: none;
}
/* Make circles that indicate the steps of the form: */
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
/* Mark the active step: */
.step.active {
opacity: 1;
}
/* Mark the steps that are finished and valid: */
.step.finish {
background-color: #4CAF50;
}
button {
margin-top: 40px;
width: 120px;
padding-top: 10px;
padding-bottom: 10px;
font-size: 14px;
background: rgb(53,88,96);
color: #e6f9ff;
}
button:hover {
background: rgb(69,89,94);
}
/* Divi Theme Raltes Classes*/
.entry-content tr td, body.et-pb-preview #main-content .container tr td {
border: none !important;
}
.entry-content table:not(.variations), body.et-pb-preview #main-content .container table {
border: none !important;
}
<form id="CreativeAcquisitions" action="">
<div class="tab">
<h2>STEP ONE</h2>
<br>
<br>
<h3>Performance</h3>
<p>What is the Adjusted Net Profit (or EBITDA)?</p>
<input class="stepOne" type="text" onchange="calcule2()" name="B4" value="200000">
<br>
<br>
<p>What multiple would you like to apply? <span class="notes"> standard is from 2 to 3 (Preset value is 2) </span></p>
<input class="noSign" type="text" onchange="calcule2()" name="B6" value="2">
</div>
<div class="tab">
<h2>STEP TWO</h2>
<br>
<br>
<h3>Assets</h3>
<h4>On the closing date</h4>
<table>
<tr class="tableRow">
<td>
<p>How much Cash will be in the Bank account? <span class="notes"> (calculate 100%) </span> </p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B17" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p> How much in inventory will the business hold? <span class="notes"> (calculate 70%) </span></p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B19" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p>Please enter rough value of property owned by the business: <span class="notes"> (calculate 75%) </span> </p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B21" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p>
Enter value of invoices that are outstanding (Receivables): <span class="notes"> (calculate 80%) </span></p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B23" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p>Enter value of other assets (like equipment and vehicles): <span class="notes"> (calculate 70%) </span></p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B25" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<h5>
Total </h5>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B28" value="50000"></td>
</tr>
</table>
</div>
<div class="tab">
<h2>STEP THREE</h2>
<br>
<br>
<h3>Liabilities</h3>
<h4>On the closing date</h4>
<table>
<tr class="tableRow">
<td>
<p>Enter value of outstanding Loans that the company has: </p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B36" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p>
Enter approx. value of Corporation Tax outstanding: </p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B37" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p>
Enter value of any money owed by the company (e.g to suppliers): </p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B38" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p>
Is it possible to defer PAYE payments? If so how much </p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B39" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p>
Is it possible to defer VAT payments? If so how much </p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B40" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p>
Can you borrow money against the company (New loan for Acquisition)? <span class="notes"> (calculate 100%) </span> </p>
</td>
<td>£<input type="text" onchange="calcule2()" name="B41" value="120000"></td>
</tr>
</table>
</div>
<div class="tab">
<h2>STEP FOUR</h2>
<br>
<br>
<h3>Seller Equity & Deferred Payments</h3>
<table>
<tr class="tableRow">
<td>
<p>Is the Seller willing to hold back some equity in the business? If so, what percentage: </p>
</td>
<td>%<input type="text" onchange="calcule2()" name="B46" value="10"></td>
</tr>
<tr class="tableRow">
<td>
<p> What percentage of the purchase price will the seller be willing to defer?</p>
</td>
<td>%<input type="text" onchange="calcule2()" name="B47" value="10"></td>
</tr>
</table>
</div>
<div class="tab">
<h2>RESULTS</h2>
<br>
<br>
<h3>Valuation</h3>
<table>
<tr class="tableRow">
<td>
<p>
The value of the business is around: (TOTAL)</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B52" value="442500"></td>
</tr>
<tr class="tableRow">
<td>
<h4>This is broken down into:</h4>
</td>
</tr>
<tr class="tableRow">
<td>
<p>Payment for Goodwill</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B55" value="400000"></td>
</tr>
<tr class="tableRow">
<td>
<p>Payment for Assets</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B56" value="50000"></td>
</tr>
<tr class="tableRow">
<td>
<p> Payment for Liabilities</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B68" value="50000"></td>
</tr>
<tr class="tableRow">
<td>
<p class="roundedValuation"> ENTER ROUNDED VALUATION</p>
</td>
<td>£<input class="roundedValuationInput" type="text" onchange="calcule2()" name="B200" value="0"></td>
</tr>
</table>
<br>
<h2>Deal Structure</h2>
<br>
<br>
<h4>You can structure the deal in the following manner:</h4>
<table>
<tr class="tableRow">
<td>
<p> VALUATION AMOUNT (Goodwill and Assets)</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B66" value="442500"></td>
</tr>
<tr class="tableRow">
<td>
<p> MONEY POTENTIALLY RAISED FROM ALL ASSETS</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B67" value="50000"></td>
</tr>
<tr class="tableRow">
<td>
<p>NEW LOAN RAISED</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B69" value="120000"></td>
</tr>
<tr class="tableRow">
<td>
<p>PAYMENT RETAINED FOR SELLER EQUITY SHARE</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B70" value="44250"></td>
</tr>
<tr class="tableRow">
<td>
<p> SELLER DEFERRMENT AMOUNT</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B71" value="44250"></td>
</tr>
<tr class="tableRow">
<td>
<p>SHORTFALL (SURPLUS)</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B72" value="184000"></td>
</tr>
</table>
<br>
<h2> Assets Valuation Breakdown</h2>
<br>
<br>
<table>
<tr class="tableRow">
<td>
<h5>Assets </h5>
</td>
<td>
<h5>Input Amount </h5>
</td>
<td>
<h5>Value </h5>
</td>
<td>
<h5>Net Value </h5>
</td>
</tr>
<tr class="tableRow">
<td>
<p>Cash </p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B76" value="10000"></td>
<td>%<input type="number" min="1" max="100" onchange="calcule2()" name="C76" value="100"></td>
<td>£<input class="total" type="text" onchange="calcule2()" name="D76" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<p> Inventory</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B77" value="10000"></td>
<td>%<input type="number" min="1" max="100" onchange="calcule2()" name="C77" value="70"></td>
<td>£<input class="total" type="text" onchange="calcule2()" name="D77" value="7000"></td>
</tr>
<tr class="tableRow">
<td>
<p> Property</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B78" value="10000"></td>
<td>%<input type="number" min="1" max="100" onchange="calcule2()" name="C78" value="75"></td>
<td>£<input class="total" type="text" onchange="calcule2()" name="D78" value="7500"></td>
</tr>
<tr class="tableRow">
<td>
<p> Debitors</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B79" value="10000"></td>
<td>%<input type="number" min="1" max="100" onchange="calcule2()" name="C79" value="80"></td>
<td>£<input class="total" type="text" onchange="calcule2()" name="D79" value="8000"></td>
</tr>
<tr class="tableRow">
<td>
<p> Others</p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B80" value="10000"></td>
<td>%<input type="number" min="1" max="100" onchange="calcule2()" name="C80" value="100"></td>
<td>£<input class="total" type="text" onchange="calcule2()" name="D80" value="10000"></td>
</tr>
<tr class="tableRow">
<td>
<h5> TOTAL</h5>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B81" value="50000"></td>
<td></td>
<td>£<input class="total" type="text" onchange="calcule2()" name="D81" value="42500"></td>
</tr>
</table>
<br>
<br>
<h2>Cash Flow Calculator</h2>
<br>
<br>
<table>
<tr class="tableRow">
<td>
<h5>LIABILITY </h5>
</td>
<td>
<h5>Total Amount </h5>
</td>
<td>
<h5>Yearly Repayment</h5>
</td>
</tr>
<tr class="tableRow">
<td>
<p>Loan Repayment </p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B91" value="10000"></td>
<td>£<input type="text" onchange="calcule2()" name="C91" value="0"></td>
</tr>
<tr class="tableRow">
<td>
<p>Corporation Tax </p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B92" value="10000"></td>
<td>£<input type="text" onchange="calcule2()" name="C92" value="0"></td>
</tr>
<tr class="tableRow">
<td>
<p>Trade Creditors </p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B93" value="10000"></td>
<td>£<input type="text" onchange="calcule2()" name="C93" value="0"></td>
</tr>
<tr class="tableRow">
<td>
<p>PAYE Deferments </p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B94" value="10000"></td>
<td>£<input type="text" onchange="calcule2()" name="C94" value="0"></td>
</tr>
<tr class="tableRow">
<td>
<p> VAT Deferments </p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B95" value="10000"></td>
<td>£<input type="text" onchange="calcule2()" name="C95" value="0"></td>
</tr>
<tr class="tableRow">
<td>
<p>Seller Deferred Payment </p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B96" value="44250"></td>
<td>£<input type="text" onchange="calcule2()" name="C96" value="0"></td>
</tr>
<tr class="tableRow">
<td>
<p>New Loan taken </p>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B97" value="120000"></td>
<td>£<input type="text" onchange="calcule2()" name="C97" value="0"></td>
</tr>
<tr class="tableRow">
<td>
<h5> TOTAL </h5>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B98" value="214250"></td>
<td>£<input class="total" type="text" onchange="calcule2()" name="C98" value="0"></td>
</tr>
</table>
<br>
<br>
<h2>SUMMARY</h2>
<br>
<br>
<table table-layout: fixed; width: 100%;>
<tr class="tableRow">
<td>
<h4>Net Profit </h4>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B101" value="200000"></td>
</tr>
<tr class="tableRow">
<td>
<h4>CT RATE <span class="notes"> (Pre-set at 19%) </span> </h4>
</td>
<td>%<input type="number" min="1" max="100" onchange="calcule2()" name="B103" value="19"></td>
</tr>
<tr class="tableRow">
<td>
<h4>CT DUE IN FUTURE : </h4>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B105" value="38000"></td>
</tr>
<tr class="tableRow">
<td>
<h4>COST OF PAYING LIABILITIES</h4>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B107" value="42850"></td>
</tr>
<tr class="tableRow">
<td>
<h4>CASH FLOW SURPLUS PER YEAR <span class="notes"> (Post financing and tax) </span></h4>
</td>
<td>£<input class="total" type="text" onchange="calcule2()" name="B108" value="195150"></td>
</tr>
</table>
</div>
<div>
<div class="right">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
<!-- Circles which indicates the steps of the form: -->
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>