Page 298 - Web Applications (803) Class 12
P. 298

<form id=”userForm”>
                          <label for=”name”>Name:</label>

                          <input type=”text” id=”name” name=”name” required><br><br>
                          <label>Gender:</label>
                          <input type=”radio” id=”male” name=”gender” value=”male”>

                          <label for=”male”>Male</label>
                          <input type=”radio” id=”female” name=”gender” value=”female”>
                          <label for=”female”>Female</label>

                          <input type=”radio” id=”other” name=”gender” value=”other”>
                          <label for=”other”>Other</label><br><br>
                          <label for=”address”>Address:</label>

                          <textarea id=”address” name=”address”></textarea><br><br>
                          <label for=”mobile”>Mobile Number:</label>
                          <input type=”tel” id=”mobile” name=”mobile”><br><br>
                          <button type=”submit”>Submit</button>

                      </form>
                      <div id=”greeting”></div>
                      <script src=”Pscript.js”></script>

                  </body>
                  </html>
              File 2: Pscript.js
                  const userForm = document.getElementById(“userForm”);

                  const greeting = document.getElementById(“greeting”);
                  userForm.addEventListener(“submit”, function (event) {
                       event.preventDefault(); // Prevent the form from submitting and refreshing
                         the page

                      const name = document.getElementById(“name”).value;
                      const gender = document.querySelector(‘input[name=”gender”]:checked’);
                      const address = document.getElementById(“address”).value;
                      const mobile = document.getElementById(“mobile”).value;

                      if (name) {
                           let  greetingMessage  =  `Hello,  ${name}!  Welcome  to  the  Interactive
                              Form.`;
                          if (gender) {

                              greetingMessage += ` Your gender is ${gender.value}.`;
                          }
                          if (address) {
                              greetingMessage += ` Your address is ${address}.`;

                          }
                296   Touchpad Web Applications-XII
   293   294   295   296   297   298   299   300   301   302   303