How to display Form data on click without reloading the page?-CodePudding

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

CodePudding user response：

You have the following declaration:

<button
      onclick="clearInput"
      id="submit"
      type="submit"
      
    >
      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"
      
    >
      Calculate
    </button>

And then add the below statements.

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

CodePudding user response：

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.

CodePudding user response：

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"
  
>
Calculate
</button>