Question

我正在尝试控制台记录整个表单，但是JavaScript代码变得太长。谁能帮我遵循DRY（请勿重复自己），因为我在脚本标签中重复了很多代码

{
    "uid": "AFMyBRRDdjNN00G5s8ydnLkRJgw2",
    "email": "me@example.org",
    "emailVerified": false,
    "photoURL": null,
    "disabled": false,
    "metadata": {
        "lastSignInTime": "Mon, 04 Feb 2019 07:36:24 GMT",
        "creationTime": "Mon, 08 Nov 2010 07:30:26 GMT"
    },
    "passwordHash": "hVV9HPnhiiiwUs_1n7AvFF72biSrGRrN3g6lRfUDsuH6Gz3qy7CHUpzXyQJOVrJ65BbAoDvyNQRWXneJDCzh1g==",
    "passwordSalt": "",
    "tokensValidAfterTime": "Mon, 04 Feb 2019 06:56:33 GMT",
    "providerData": [
        {
            "uid": "me@example.org",
            "email": "me@example.org",
            "photoURL": null,
            "providerId": "password"
        }
    ]
}

这是我的脚本标签。我想遵守DRY规则。我试过将值保存到每个单独的变量。

<form class="form" action="register.jsp" method="post">
<ul class="fieldlist">
    <li>
<label for="simple-input"> UserName < /label> < input id="simple-input1" name="userid" type="text" class="k-textbox" style="width: 100%;" />
 </li>
 <li>
 <label for="simple-input">Password</label>
 <input id="simple-input2" name="pwd" type="password" class="k-textbox" style="width: 100%;" />
        </li>
<li>
<input onclick="myFunction()" id="button" type="submit">
</li> </ul>
</form>

Answer 1

您的两个听众都在听同一件事-提交。通过使用console.log()的模板文字和换行符，将代码合并到简化的侦听器中，使代码更简单：

document.querySelector("form.form").submit = function(e) {
    e.preventDefault();
    console.log(`Username: ${nameInput.value}\nPassword: ${nameInput1.value}`);
}

Answer 2

您可以使用FormData并将form元素作为参数传递。然后使用FormData.entries()获取所有值的迭代器

document.querySelector('form.form').addEventListener('submit', function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  const entires = formData.entries();

  for (var input of entires) {
    console.log(input[0] + ': ' + input[1]);
  }
});

<form class="form" action="register.jsp" method="post">
  <ul class="fieldlist">
    <li>
      <label for="simple-input"> UserName </label> <input id="simple-input1" name="userid" type="text" class="k-textbox" style="width: 100%;" />
    </li>
    <li>
      <label for="simple-input">Password</label>
      <input id="simple-input2" name="pwd" type="password" class="k-textbox" style="width: 100%;" />
    </li>
    <li>
      <input id="button" type="submit">
    </li>
  </ul>
</form>

Answer 3

您可以使用document.querySelector('form.form').elements

获取表单元素

document.querySelector('form.form').addEventListener('submit', function(e) {
  e.preventDefault();
  let x = document.querySelector('form.form').elements;
  console.log("Username: ", x['userid'].value);
  console.log("Password: ", x['pwd'].value);
});

<form class="form" action="register.jsp" method="post">
  <ul class="fieldlist">
    <li>
      <label for="simple-input"> UserName</label>
      <input id="simple-input1" name="userid" type="text" class="k-textbox" style="width: 100%;">
    </li>
    <li>
      <label for="simple-input">Password</label>
      <input id="simple-input2" name="pwd" type="password" class="k-textbox" style="width: 100%;">
    </li>
    <li>
      <input id="button" type="submit">
    </li>
  </ul>
</form>

如何控制台记录整个HTML表单？

3 个答案: