jq快速获取form元素

208 阅读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>06-快速获取form表单input标签的值.html</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>

    <!-- 引入jq的  -->
    <script src="./lib/jquery.js"></script>
    <script>
      const form = document.querySelector('form');
      form.addEventListener('submit', function (event) {
        event.preventDefault();
        const query = $('form').serialize();
        console.log(query);
      });
    </script>
  </body>
</html>