Untitled
unknown
plain_text
2 years ago
7.2 kB
5
Indexable
<!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);
}
Editor is loading...