Untitled

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Student Form</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <h1>Student Form</h1>
    <form id="studentForm" enctype="multipart/form-data">
        <label for="name">Name:</label>
        <input type="text" id="name" required><br><br>
        
        <label for="age">Age:</label>
        <input type="number" id="age" required><br><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" required><br><br>
        
        <label for="profilePic">Profile Picture:</label>
        <input type="file" id="profilePic" accept="image/*" required><br><br>
        
        <input type="submit" value="Submit">
    </form>

    <script>
        document.getElementById("studentForm").addEventListener("submit", function(e) {
            e.preventDefault(); // Prevent form submission
            
            // Get form values
            var name = document.getElementById("name").value;
            var age = document.getElementById("age").value;
            var email = document.getElementById("email").value;
            var profilePic = document.getElementById("profilePic").files[0];
            
            // Create object to store student data
            var studentData = {
                name: name,
                age: age,
                email: email
            };
            
            // Create a FileReader object to read the file
            var reader = new FileReader();
            
            // When the file is loaded, convert it to a data URL
            reader.onload = function(event) {
                var dataURL = event.target.result;
                
                // Add profile picture data URL to studentData object
                studentData.profilePic = dataURL;
                
                // Store studentData in sessionStorage
                sessionStorage.setItem("studentData", JSON.stringify(studentData));
                
                // Redirect to the next page
                window.location.href = "display.html";
            };
            
            // Read the file as a data URL
            reader.readAsDataURL(profilePic);
        });
    </script>
</body>
</html>
Editor is loading...