DOM/formSubmission-formData.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Form Submit Event and FormData</title>
  </head>
  <body>
    <div id="output"></div>

    <script>
      const output = document.getElementById("output");
      output.innerHTML = `
              <h1> Form Submit Event and FormData

        </h1>
                    </br>
                    <form name='order'>
                        <label>
                            Name: <input name="fullname" type="text" value="rakib">
                            </label>

                        </br>
                        <label>
                            Name: <input name="email" type="email" >
                            </label>
                        <label>
                        </br>
                        <label>
                           ID:<input name="id" type="number" >
                            </label>
                        <label>
                            
                            
                        </br>
                        <label>
                            Select Dept:
                            <select name="dept">
                                <option value="CSE">CSE</option>
                                <option value="EEE">EEE</option>
                                <option value="BBA">BBA</option>

                                </select>
                            </label>
                        </br>

                          <input name="submit" type="submit">
                            </label>


                        </form>
                `;
      const form = document.forms.order;

      //   const nameInput = form.elements.fullname;
      //   const submit = form.elements.submit;
      const { fullname, submit } = form.elements;

      function handleSubmit(event) {
        event.preventDefault();
        console.log(event.target);
        // console.log(this);
        console.log(new FormData(event.target));
      }
      function handleFormData(event) {
        // console.log(event.formData);
        // console.log([...event.formData]);
        // console.log([...event.formData.values()]);
        console.log([event.formData.entries()]);

        const entries = event.formData.entries();
        for (let i of entries) {
          console.log(i);
        }
      }
      form.addEventListener("submit", handleSubmit);
      form.addEventListener("formdata", handleFormData);
    </script>
  </body>
</html>