Untitled

 avatar
unknown
plain_text
2 years ago
2.8 kB
4
Indexable
// Global variables to store form data
var formData = {};

function submitPage1() {
  // Get values from the form
  formData.name = document.getElementById("name").value;
  formData.email = document.getElementById("email").value;

  // Redirect to the second page
  window.location.href = "page2.html";
}

function submitPage2() {
  // Get value from the form
  formData.age = document.getElementById("age").value;

  // Redirect to the third page
  window.location.href = "page3.html";
}

function submitPage3() {
  // Get value from the form
  formData.jobProfile = document.getElementById("jobProfile").value;

  // Redirect to the fourth page
  window.location.href = "page4.html";
}

function submitPage4() {
  // Get values from the form
  var selectedSkills = Array.from(document.getElementById("skills").selectedOptions, option => option.value);
  formData.skills = selectedSkills.length > 0 ? selectedSkills : [];

  // Convert the form data to a JSON string and store it in localStorage
  localStorage.setItem("formData", JSON.stringify(formData));

  // Redirect to the fifth page
  window.location.href = "page5.html";
}

function submitPage5() {
  // Get value from the form
  var experienceRadio = document.getElementsByName("experience");
  for (var i = 0; i < experienceRadio.length; i++) {
    if (experienceRadio[i].checked) {
      formData.experience = experienceRadio[i].value;
      break;
    }
  }

  // Convert the form data to a JSON string and store it in localStorage
  localStorage.setItem("formData", JSON.stringify(formData));

  // Redirect to the result page
  window.location.href = "result.html";
}

<!DOCTYPE html>
<html>
<head>
  <title>Form Result</title>
</head>
<body>
  <h1>Form Result</h1>
  <table id="resultTable">
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Age</th>
      <th>Job Profile</th>
      <th>Skills</th>
      <th>Experience</th>
    </tr>
  </table>

  <script src="script.js"></script>
  <script>
    // Retrieve the form data from localStorage
    var storedData = localStorage.getItem("formData");
    var formData = JSON.parse(storedData);

    // Display collected data in the result table
    var resultTable = document.getElementById("resultTable");
    var newRow = resultTable.insertRow();

    var nameCell = newRow.insertCell();
    nameCell.innerText = formData.name;
    var emailCell = newRow.insertCell();
    emailCell.innerText = formData.email;
    var ageCell = newRow.insertCell();
    ageCell.innerText = formData.age;
    var jobProfileCell = newRow.insertCell();
    jobProfileCell.innerText = formData.jobProfile;
    var skillsCell = newRow.insertCell();
    skillsCell.innerText = formData.skills.join(", ");
    var experienceCell = newRow.insertCell();
    experienceCell.innerText = formData.experience;
  </script>
</body>
</html>


Editor is loading...