Как я могу добавить функцию JS, чтобы все числа, включая поля ВВОДА, отображали ТЫСЯЧИ РАЗДЕЛЕНИЯ?

Question

Не могли бы вы взглянуть на этот код и посоветовать, как сделать так, чтобы все числа отображались с разделителем тысяч "," на всех числах, в том числе когда пользователи вводят новые числа в поля ввода. код можно увидеть на

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);
}

Answer 1

Обратите внимание, что я выбираю все входы с типом текста, поэтому вы должны добавить определенный класс к входам, к которым вы хотите применить разделитель тысяч, например class="thousand-sep", и вместо этого выбрать входы с этим классом, чтобы избежать получение недопустимых входных значений, если вход не является допустимым числом (в вашем случае это нормально, потому что все входные данные предназначены для чисел, хотя вы даже можете вместо этого установить тип на число).

//////////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>