Untitled

avatar
unknown
plain_text
2 years ago
4.8 kB
3
Indexable
<!DOCTYPE html>
<html>
<head>
  <title>Form Page 1</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>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="submitPage1()">Next</button>
  </form>
</body>
</html>


// Global variables to store form data
var nameValue, emailValue;

function submitPage1() {
  // Get values from the form
  nameValue = document.getElementById("name").value;
  emailValue = document.getElementById("email").value;

  // Redirect to the second page
  window.location.href = "page2.html";
}


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


// Global variable to store age value
var ageValue;

function submitPage2() {
  // Get value from the form
  ageValue = document.getElementById("age").value;

  // Redirect to the third page
  window.location.href = "page3.html";
}


<!DOCTYPE html>
<html>
<head>
  <title>Form Page 3</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Page 3</h1>
  <form id="formPage3">
    <label for="jobProfile">Job Profile:</label>
    <select id="jobProfile" required>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
    <br><br>
    <button type="button" onclick="submitPage3()">Next</button>
  </form>
</body>
</html>

// Global variable to store job profile value
var jobProfileValue;

function submitPage3() {
  // Get value from the form
  jobProfileValue = document.getElementById("jobProfile").value;

  // Redirect to the fourth page
  window.location.href = "page4.html";
}

<!DOCTYPE html>
<html>
<head>
  <title>Form Page 4</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Page 4</h1>
  <form id="formPage4">
    <label for="skills">Skills:</label>
    <select id="skills" multiple required>
      <option value="skill1">Skill 1</option>
      <option value="skill2">Skill 2</option>
      <option value="skill3">Skill 3</option>
    </select>
    <br><br>
    <button type="button" onclick="submitPage4()">Next</button>
  </form>
</body>
</html>



// Global variable to store skills values
var skillsValue;

function submitPage4() {
  // Get values from the form
  skillsValue = Array.from(document.getElementById("skills").selectedOptions, option => option.value);

  // Redirect to the fifth page
  window.location.href = "page5.html";
}


<!DOCTYPE html>
<html>
<head>
  <title>Form Page 5</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Page 5</h1>
  <form id="formPage5">
    <label for="experience">Experience:</label>
    <input type="radio" id="experience" name="experience" value="experienced" required> Experienced
    <input type="radio" id="fresher" name="experience" value="fresher" required> Fresher
    <br><br>
    <button type="button" onclick="submitPage5()">Submit</button>
  </form>
</body>
</html>


// Global variable to store experience/fresher value
var experienceValue;

function submitPage5() {
  // Get value from the form
  var experienceRadio = document.getElementsByName("experience");
  for (var i = 0; i < experienceRadio.length; i++) {
    if (experienceRadio[i].checked) {
      experienceValue = experienceRadio[i].value;
      break;
    }
  }

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

<!DOCTYPE html>
<html>
<head>
  <title>Form Result</title>
</head>
<body>
  <h1>Form Result</h1>
  <table>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Age</th>
      <th>Job Profile</th>
      <th>Skills</th>
      <th>Experience</th>
    </tr>
    <tr>
      <td id="nameResult"></td>
      <td id="emailResult"></td>
      <td id="ageResult"></td>
      <td id="jobProfileResult"></td>
      <td id="skillsResult"></td>
      <td id="experienceResult"></td>
    </tr>
  </table>

  <script src="script.js"></script>
  <script>
    // Display collected data in the result table
    document.getElementById("nameResult").innerText = nameValue;
    document.getElementById("emailResult").innerText = emailValue;
    document.getElementById("ageResult").innerText = ageValue;
    document.getElementById("jobProfileResult").innerText = jobProfileValue;
    document.getElementById("skillsResult").innerText = skillsValue.join(", ");
    document.getElementById("experienceResult").innerText = experienceValue;
  </script>
</body>
</html>
Editor is loading...