Tips for showing form data upon click without refreshing the webpage

Question

Tips for showing form data upon click without refreshing the webpage

Whenever I input data into the form and click on the calculate button, the result does not appear in the salary slip box at the bottom of the form.

However, if I refresh the page and then click on the calculate button, the results are displayed correctly in the box.

For more details, you can view the code by following this link: 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(&q...

javascript html css bootstrap-5

Answer 1

Answer №1

You're faced with the following declaration:

<button
      onclick="clearInput"
      id="submit"
      type="submit"
      class="btn btn-primary"
    >
      Calculate
    </button>

To address this, you need to create a function named "clearInput" to handle the button click event.

To resolve this issue, you can revise the above declaration like this:

<button
      id="submit"
      type="submit"
      class="btn btn-primary"
    >
      Calculate
    </button>

Then, include the following statements below:

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

Answer 2

You're faced with the following declaration:

<button
      onclick="clearInput"
      id="submit"
      type="submit"
      class="btn btn-primary"
    >
      Calculate
    </button>

To address this, you need to create a function named "clearInput" to handle the button click event.

To resolve this issue, you can revise the above declaration like this:

<button
      id="submit"
      type="submit"
      class="btn btn-primary"
    >
      Calculate
    </button>

Then, include the following statements below:

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

Answer 3

Answer №2

Check out the changes I made to your code snippet here: https://jsfiddle.net/yz2fn4v6/1/

Here's what I updated:

Ensured all inputs now have a name attribute.
Established a reference to the <form /> element in JavaScript.
Adjusted the event listener on the submit button to target the form instead.
Utilized the FormData API for fetching data from the form.

While there are still some issues with the final fields, I believe you can troubleshoot them moving forward.

Answer 4

Check out the changes I made to your code snippet here: https://jsfiddle.net/yz2fn4v6/1/

Here's what I updated:

Ensured all inputs now have a name attribute.
Established a reference to the <form /> element in JavaScript.
Adjusted the event listener on the submit button to target the form instead.
Utilized the FormData API for fetching data from the form.

While there are still some issues with the final fields, I believe you can troubleshoot them moving forward.

Answer 5

Answer №3

Ensure that the code snippet for retrieving values is moved within 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)}`;
});

The finalSalary function should be updated to accept totalAdditions and totalDeductions in its signature:

function finalSalary(grossPay, totalAdditions, totalDeductions)

To prevent form submission and page refresh, change the button type from submit to button:

<button
  onclick="clearInput"
  id="submit"
  type="button"
  class="btn btn-primary"
>
Calculate
</button>

Answer 6

Ensure that the code snippet for retrieving values is moved within 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)}`;
});

The finalSalary function should be updated to accept totalAdditions and totalDeductions in its signature:

function finalSalary(grossPay, totalAdditions, totalDeductions)

To prevent form submission and page refresh, change the button type from submit to button:

<button
  onclick="clearInput"
  id="submit"
  type="button"
  class="btn btn-primary"
>
Calculate
</button>

Tips for showing form data upon click without refreshing the webpage

Answer №1

Answer №2

Answer №3

Similar questions

Using Three.js to import and cast rays on a .obj model created in Blender

Stop the webpage from scrolling when clicking on a ui-grid field

How can one ensure that the column width in a Datatable adjusts dynamically based on the content within?

What is the process for changing the border color of a Select Component?

When attempting to log an AJAX/JSON request, the console.log statement is displaying 'undefined'

Creating a clickable table row in bootstrap with optimal effectiveness

Is it feasible to preserve the HTML form content data even after refreshing the page?

What could be causing the bottom of a vertical scroll bar to be cropped in Internet Explorer 11?

Scrape data from LinkedIn search results using HtmlAgilityPack

The function replace does not exist in t(…)trim

Bootstrap modal not displaying in full view

Step-by-step guide on programmatically activating a radio button

Utilizing Angular partials within specific views with the assistance of ui-router

Steps to eliminate validation following the clearing of input fields

Looking to send information to a different website and get the response back using JavaScript?

Deleting elements from the DOM in Vue.js

"Step-by-step guide on placing an order for the button

How to Use JavaScript Function to Rotate an Entire Webpage

Avoid having individual words centered on a single line of text

Is it feasible to navigate through submenus using only the [Tab] key in CSS?