Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
7.2 kB
1
Indexable
Never
<!DOCTYPE html>
<html>
<head>
  <title>Page 1</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Page 1</h1>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" required>
    <label for="email">Email:</label>
    <input type="email" id="email" required>
    <button onclick="saveDataAndRedirect()">Continue</button>
  </form>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
  <title>Page 2</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Page 2</h1>
  <form>
    <label for="age">Age:</label>
    <input type="number" id="age" required>
    <button onclick="saveDataAndRedirect()">Continue</button>
  </form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Page 3</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Page 3</h1>
  <form>
    <label for="job">Job Profile:</label>
    <input type="text" id="job" required>
    <button onclick="saveDataAndRedirect()">Continue</button>
  </form>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
  <title>Page 4</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Page 4</h1>
  <form>
    <label for="skills">Skills:</label>
    <select id="skills" required>
      <option value="">Select a skill</option>
      <option value="HTML">HTML</option>
      <option value="CSS">CSS</option>
      <option value="JavaScript">JavaScript</option>
      <!-- Add more skills as needed -->
    </select>
    <button onclick="saveDataAndRedirect()">Continue</button>
  </form>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
  <title>Page 5</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Page 5</h1>
  <form>
    <label for="experience">Experience:</label>
    <select id="experience" required>
      <option value="">Select an option</option>
      <option value="Fresher">Fresher</option>
      <option value="Experienced">Experienced</option>
    </select>
    <button onclick="saveDataAndRedirect()">Continue</button>
  </form>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
  <title>Result</title>
  <style>
    table {
      border-collapse: collapse;
    }
    table, th, td {
      border: 1px solid black;
      padding: 5px;
    }
  </style>
</head>
<body>
  <h1>Result</h1>
  <table id="dataTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Age</th>
        <th>Job Profile</th>
        <th>Skills</th>
        <th>Experience</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <script src="script.js"></script>
  <script>
    displayDataInTable();
  </script>
</body>
</html>


function saveDataAndRedirect() {
  const currentPage = window.location.pathname.substring(
    window.location.pathname.lastIndexOf("/") + 1
  );
  const formData = {};

  if (currentPage === "index.html") {
    const name = document.getElementById("name").value;
    const email = document.getElementById("email").value;
    formData.name = name;
    formData.email = email;
    window.location.href = `page2.html?name=${encodeURIComponent(
      name
    )}&email=${encodeURIComponent(email)}`;
  } else if (currentPage === "page2.html") {
    const age = document.getElementById("age").value;
    formData.name = decodeURIComponent(
      window.location.search.replace("?name=", "").split("&")[0]
    );
    formData.email = decodeURIComponent(
      window.location.search.replace("?name=", "").split("&")[1].replace(
        "email=",
        ""
      )
    );
    formData.age = age;
    window.location.href = `page3.html?name=${encodeURIComponent(
      formData.name
    )}&email=${encodeURIComponent(
      formData.email
    )}&age=${encodeURIComponent(age)}`;
  } else if (currentPage === "page3.html") {
    const job = document.getElementById("job").value;
    formData.name = decodeURIComponent(
      window.location.search.replace("?name=", "").split("&")[0]
    );
    formData.email = decodeURIComponent(
      window.location.search.replace("?name=", "").split("&")[1].replace(
        "email=",
        ""
      )
    );
    formData.age = decodeURIComponent(
      window.location.search.replace("?name=", "").split("&")[2].replace(
        "email=",
        ""
      ).replace("age=", "")
    );
    formData.job = job;
    window.location.href = `page4.html?name=${encodeURIComponent(
      formData.name
    )}&email=${encodeURIComponent(
      formData.email
    )}&age=${encodeURIComponent(
      formData.age
    )}&job=${encodeURIComponent(job)}`;
  } else if (currentPage === "page4.html") {
    const skills = document.getElementById("skills").value;
    formData.name = decodeURIComponent(
      window.location.search.replace("?name=", "").split("&")[0]
    );
    formData.email = decodeURIComponent(
      window.location.search.replace("?name=", "").split("&")[1].replace(
        "email=",
        ""
      )
    );
    formData.age = decodeURIComponent(
      window.location.search.replace("?name=", "").split("&")[2].replace(
        "email=",
        ""
      ).replace("age=", "")
    );
    formData.job = decodeURIComponent(
      window.location.search.replace("?name=", "").split("&")[3].replace(
        "email=",
        ""
      ).replace("age=", "").replace("job=", "")
    );
    formData.skills = skills;
    window.location.href = `page5.html?name=${encodeURIComponent(
      formData.name
    )}&email=${encodeURIComponent(
      formData.email
    )}&age=${encodeURIComponent(
      formData.age
    )}&job=${encodeURIComponent(
      formData.job
    )}&skills=${encodeURIComponent(skills)}`;
  } else if (currentPage === "page5.html") {
    const experience = document.getElementById("experience").value;
    formData.name = decodeURIComponent(
      window.location.search.replace("?name=", "").split("&")[0]
    );
    formData.email = decodeURIComponent(
      window.location.search.replace("?name=", "").split("&")[1].replace(
        "email=",
        ""
      )
    );
    formData.age = decodeURIComponent(
      window.location.search.replace("?name=", "").split("&")[2].replace(
        "email=",
        ""
      ).replace("age=", "")
    );
    formData.job = decodeURIComponent(
      window.location.search.replace("?name=", "").split("&")[3].replace(
        "email=",
        ""
      ).replace("age=", "").replace("job=", "")
    );
    formData.skills = decodeURIComponent(
      window.location.search.replace("?name=", "").split("&")[4].replace(
        "email=",
        ""
      ).replace("age=", "").replace("job=", "").replace("skills=", "")
    );
    formData.experience = experience;

    // Send the form data to the server or perform any other necessary actions
    // Here, we are simply displaying the collected data in the table on the last page
    displayDataInTable(formData);
  }
}

function displayDataInTable(formData) {
  const tableBody = document.querySelector("#dataTable tbody");
  const newRow = document.createElement("tr");
  newRow.innerHTML = `
    <td>${formData.name}</td>
    <td>${formData.email}</td>
    <td>${formData.age}</td>
    <td>${formData.job}</td>
    <td>${formData.skills}</td>
    <td>${formData.experience}</td>
  `;
  tableBody.appendChild(newRow);
}