Stack Exchange
How to display Form data on click without reloading the page?
After filling in the form inputs, When i press the calculate button on the form the result does not get displayed in the salary slip box(At the bottom of the box).
But when i do refresh the page and then press the calculate button the results do get displayed in the box.
Here is the link to the code:
JsfiddleLink
"use strict";

const employeeName = document.querySelector("#input-name").value;
const grossPay = document.querySelector("#input-pay").value;
const bonus = document.querySelector("#input-bonus").value;
const allowance = document.querySelector("#input-allowance").value;
const incomeTax = document.querySelector("#input-tax").value;
const ei = document.querySelector("#input-ei").value;
const cpp = document.querySelector("#input-cpp").value;
const selectGender = document.querySelector(
  'input[name="gender"]:checked'
).value;
const selectDependent = document.querySelector(
  'input[name="dependent"]:checked'
).value;
const btnCalculate = document.querySelector("#submit");
const btnClear = document.querySelector("#clear");
const myForm = document.querySelectorAll(".form-control");
let inputAll = document.querySelectorAll("input");

function addition(bonus, allowance) {
  let total = Number(bonus) + Number(allowance);
  return total;
}
function deduction(ei, cpp) {
  let total = (Number(ei) + Number(cpp)) / 100;
  return total;
}

// console.log(addition(bonus, allowance));
// console.log(deduction(incomeTax, ei, cpp));

// gross salary plus additions minus deductions
// if female employee then minus 1%
// else deduction is 0

// if dependents === 2 then no deductions
// if dependents === 3 then 2 % deduction
// else if dependents === 4 then 4% deductions

// display the results on the salary slip

function genderDeduction(selectGender) {
  return selectGender === "Female" ? 0.01 : null;
}

function dependentDeduction(selectDependent) {
  if (selectDependent === "1") {
    return null;
  } else if (selectDependent === "2") {
    return 0.02;
  } else if (selectDependent === "3") {
    return 0.04;
  }
}

function incomeTaxDeduction(incomeTax) {
  return Number(incomeTax) / 100;
}
// console.log(genderDeduction("Female"));
// console.log(dependentDeduction("2"));

let totalAdditions = addition(bonus, allowance);
let totalDeductions = Number(
  grossPay * deduction(ei, cpp) +
    grossPay *
      (incomeTaxDeduction(incomeTax) -
        genderDeduction(selectGender) -
        dependentDeduction(selectDependent))
);

totalDeductions.toFixed(2);
function finalSalary(grossPay) {
  return Number(grossPay) + totalAdditions - totalDeductions;
}

const nameSlip = document.querySelector(".name");

const grossSalary = document.querySelector(".gross-salary");

const sumOfAdditions = document.querySelector(".total-additions");

const sumOfDeductions = document.querySelector(".total-deductions");

const netSalary = document.querySelector(".final-salary");

// function salarySlip() {}

// function clearInput() {
//   employeeName = "";
//   grossPay = "";
// }

btnCalculate.addEventListener("click", (e) => {
  e.preventDefault();
  nameSlip.innerText = employeeName;
  grossSalary.innerText = `$ ${grossPay}`;
  sumOfAdditions.innerText = `$ ${totalAdditions}`;
  sumOfDeductions.innerText = `$ ${totalDeductions.toFixed(2)}`;
  netSalary.innerText = `$ ${finalSalary(grossPay)}`;
});

// btnClear.addEventListener("click", () => {
//   myForm.reset();
// });



The error message is very clear. Uncaught ReferenceError: clearInput is not defined"

I've partially updated your code here: https://jsfiddle.net/y7hbnv18/1/
what I did:

updated all inputs to have a name property.
created a reference to the <form /> element in JS
updated the listener on submit button to be on the form instead
used the FormData API to retrieve the data from the form.

it's still somewhat in a broken state, in the last few fields, but I think you'll figure it out from here.

Yes, it is partially working right now.Thanks. I tried to fix the code but it gives me null on few of the fields. https://jsfiddle.net/samre/abtcxpgn/13/

Yeah, sorry I'm not gonna fix the whole thing for you, but good luck!

You need to move the code that gets the values to the body of the event handler function.
btnCalculate.addEventListener("click", (e) => {
  e.preventDefault();
  const employeeName = document.querySelector("#input-name").value;
  const grossPay = document.querySelector("#input-pay").value;
  const bonus = document.querySelector("#input-bonus").value;
  const allowance = document.querySelector("#input-allowance").value;
  const incomeTax = document.querySelector("#input-tax").value;
  const ei = document.querySelector("#input-ei").value;
  const cpp = document.querySelector("#input-cpp").value;
  const selectGender = document.querySelector(
    'input[name="gender"]:checked'
  ).value;
  const selectDependent = document.querySelector(
    'input[name="dependent"]:checked'
  ).value;

  let totalAdditions = addition(bonus, allowance);

  let totalDeductions = Number(
    grossPay * deduction(ei, cpp) +
      grossPay *
        (incomeTaxDeduction(incomeTax) -
          genderDeduction(selectGender) -
          dependentDeduction(selectDependent))
  );
  totalDeductions.toFixed(2);

  nameSlip.innerText = employeeName;
  grossSalary.innerText = `$ ${grossPay}`;
  sumOfAdditions.innerText = `$ ${totalAdditions}`;
  sumOfDeductions.innerText = `$ ${totalDeductions.toFixed(2)}`;
  netSalary.innerText = `$ ${finalSalary(grossPay, totalAdditions, totalDeductions)}`;
});

Also update the finalSalary function so you can pass in totalAdditions and totalDeductions the signature should be
function finalSalary(grossPay, totalAdditions, totalDeductions)

You may also need to change the button type to button from submit to stop the form being submitted as this will refresh the page.
<button
  onclick="clearInput"
  id="submit"
  type="button"
  class="btn btn-primary"
>
Calculate
</button>


You have the following declaration:
<button
      onclick="clearInput"
      id="submit"
      type="submit"
      class="btn btn-primary"
    >
      Calculate
    </button>

So you have to declare a function called "clearInput" to handle the button click event.
To solve your problem, you can modify the above declaration as below:
<button
      id="submit"
      type="submit"
      class="btn btn-primary"
    >
      Calculate
    </button>

And then add the below statements.
let myForm=document.getElementById("my-form");
myForm.addEventListener("submit",(e)=>{
    //do your work here
    e.preventDefault(); 
})


I have tried this, it does not work.

Would you help to update your code?

Tried it, it just refreshes the form and does not give me any values.
