Untitled

avatar
unknown
plain_text
2 years ago
5.6 kB
5
Indexable
<!DOCTYPE html>
<html>
<head>
    <title>Form Page 1</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Form Page 1</h1>
    <form id="formPage1">
        <label for="name">Name:</label>
        <input type="text" id="name" required><br><br>

        <label for="email">Email:</label>
        <input type="email" id="email" required><br><br>

        <button type="button" onclick="submitFormPage1()">Next</button>
    </form>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
    <title>Form Page 2</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Form Page 2</h1>
    <form id="formPage2">
        <label for="age">Age:</label>
        <input type="number" id="age" required><br><br>

        <button type="button" onclick="submitFormPage2()">Next</button>
    </form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Form Page 3</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Form Page 3</h1>
    <form id="formPage3">
        <label for="jobProfile">Job Profile:</label>
        <select id="jobProfile" required>
            <option value="">Select</option>
            <option value="Developer">Developer</option>
            <option value="Designer">Designer</option>
            <option value="Manager">Manager</option>
        </select><br><br>

        <button type="button" onclick="submitFormPage3()">Next</button>
    </form>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
    <title>Form Page 4</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Form Page 4</h1>
    <form id="formPage4">
        <label for="skills">Skills:</label>
        <select id="skills" required>
            <option value="">Select</option>
            <option value="HTML">HTML</option>
            <option value="CSS">CSS</option>
            <option value="JavaScript">JavaScript</option>
        </select><br><br>

        <button type="button" onclick="submitFormPage4()">Next</button>
    </form>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
    <title>Form Page 5</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Form Page 5</h1>
    <form id="formPage5">
        <label for="experience">Experience:</label>
        <select id="experience" required>
            <option value="Fresher">Fresher</option>
            <option value="1 Year">1 Year</option>
            <option value="2 Years">2 Years</option>
            <option value="3 Years">3 Years</option>
            <option value="4 Years">4 Years</option>
            <option value="5 Years">5 Years</option>
        </select><br><br>

        <button type="button" onclick="submitFormPage5()">Submit</button>
    </form>
</body>
</html>



<!DOCTYPE html>
<html>
<head>
    <title>Result</title>
</head>
<body>
    <h1>Result</h1>
    <table>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Age</th>
            <th>Job Profile</th>
            <th>Skills</th>
            <th>Experience</th>
        </tr>
        <script src="script.js"></script>
    </table>
</body>
</html>

// Global variables to store form data
let formData = {};

// Function to submit the form on Page 1 and redirect to Page 2
function submitFormPage1() {
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;

    // Store the collected data
    formData.name = name;
    formData.email = email;

    // Redirect to Page 2
    window.location.href = 'page2.html';
}

// Function to submit the form on Page 2 and redirect to Page 3
function submitFormPage2() {
    const age = document.getElementById('age').value;

    // Store the collected data
    formData.age = age;

    // Redirect to Page 3
    window.location.href = 'page3.html';
}

// Function to submit the form on Page 3 and redirect to Page 4
function submitFormPage3() {
    const jobProfile = document.getElementById('jobProfile').value;

    // Store the collected data
    formData.jobProfile = jobProfile;

    // Redirect to Page 4
    window.location.href = 'page4.html';
}

// Function to submit the form on Page 4 and redirect to Page 5
function submitFormPage4() {
    const skills = document.getElementById('skills').value;

    // Store the collected data
    formData.skills = skills;

    // Redirect to Page 5
    window.location.href = 'page5.html';
}

// Function to submit the form on Page 5 and redirect to the Result page
function submitFormPage5() {
    const experience = document.getElementById('experience').value;

    // Store the collected data
    formData.experience = experience;

    // Convert the form data to JSON string
    const jsonData = JSON.stringify(formData);

    // Store the form data in local storage
    localStorage.setItem('formData', jsonData);

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

// Retrieve the form data from local storage on the Result page
window.onload = function() {
    const jsonData = localStorage.getItem('formData');
    const formData = JSON.parse(jsonData);

    // Display the collected data in the table
    const table = document.querySelector('table');
    const row = table.insertRow();
    row.insertCell().textContent = formData.name;
    row.insertCell().textContent = formData.email;
    row.insertCell().textContent = formData.age;
    row.insertCell().textContent = formData.jobProfile;
    row.insertCell().textContent = formData.skills;
    row.insertCell().textContent = formData.experience;

    // Clear the stored form data from local storage
    localStorage.removeItem('formData');
}
Editor is loading...