js原生快速获取form元素

425 阅读1分钟
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>07-快速获取form表单input标签的值</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <form>
      <input type="text" name="username1" /><input
        type="text"
        name="username2"
      /><input type="text" name="username3" /><input
        type="text"
        name="username4"
      /><input type="text" name="username5" /><input
        type="text"
        name="username6"
      /><input type="text" name="username7" /><input
        type="text"
        name="username8"
      /><input type="text" name="username9" /><input
        type="text"
        name="username10"
      />
      <button>获取表单数据</button>
    </form>

    <script>
      const form = document.querySelector('form');
      form.addEventListener('submit', function (event) {
        event.preventDefault();

        const fd = new FormData(this); // this = form dom元素
        const usp = new URLSearchParams(fd);
        const query = usp.toString();
        console.log(query);
      });
    </script>
  </body>
</html>

function toQuery(form) {
            const fd = new FormData(form); // this = form dom元素
            const usp = new URLSearchParams(fd);
            const query = usp.toString();
            return query
        }