Untitled

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

form {
  margin-bottom: 20px;
}

label {
  display: inline-block;
  width: 100px;
}

input[type="submit"] {
  margin-top: 10px;
}

#studentDetail {
  margin-top: 20px;
  border: 1px solid #ccc;
  padding: 10px;
}

<!DOCTYPE html>
<html>
<head>
  <title>Student Detail Form</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>Student Detail Form</h1>
  <form id="studentForm">
    <label for="name">Name:</label>
    <input type="text" id="name" required><br>

    <label for="age">Age:</label>
    <input type="number" id="age" required><br>

    <label for="phone">Phone:</label>
    <input type="tel" id="phone" required><br>

    <label for="profilePic">Profile Picture:</label>
    <input type="file" id="profilePic" accept="image/*" required><br>

    <input type="submit" value="Submit">
  </form>

  <div id="studentDetail"></div>

  <script src="script.js"></script>
</body>
</html>

document.getElementById("studentForm").addEventListener("submit", function(event) {
  event.preventDefault(); // Prevent form submission

  // Get form input values
  var name = document.getElementById("name").value;
  var age = document.getElementById("age").value;
  var phone = document.getElementById("phone").value;
  var profilePic = document.getElementById("profilePic").value;

  // Create student object
  var student = {
    name: name,
    age: age,
    phone: phone,
    profilePic: profilePic
  };

  // Display student details using callback
  displayStudentDetails(student, function() {
    alert("Form submitted successfully!");
  });
});

function displayStudentDetails(student, callback) {
  var detailDiv = document.getElementById("studentDetail");

  // Clear previous content
  detailDiv.innerHTML = "";

  // Create elements to display student details
  var namePara = document.createElement("p");
  namePara.textContent = "Name: " + student.name;

  var agePara = document.createElement("p");
  agePara.textContent = "Age: " + student.age;

  var phonePara = document.createElement("p");
  phonePara.textContent = "Phone: " + student.phone;

  var profilePicPara = document.createElement("p");
  profilePicPara.textContent = "Profile Picture: " + student.profilePic;

  // Append elements to the detailDiv
  detailDiv.appendChild(namePara);
  detailDiv.appendChild(agePara);
  detailDiv.appendChild(phonePara);
  detailDiv.appendChild(profilePicPara);

  // Execute the callback function
  callback();
}
Editor is loading...