Question

document
    .getElementById('add-a-dog-to-a-member-form')
    .addEventListener('submit',async function (event){
        event.preventDefault();
        let filter={};
        const inputs=document.querySelectorAll('input[type=text],input[type=radio]:checked');
        for (const input of inputs){
            filter[input.name]=input.value;
        }

        console.log(filter['id']);
        console.log(filter['name']);
        console.log(filter['gender']);

        event.target.reset();
    });

<form id="add-a-dog-to-a-member-form">
  <p>Add a dog to a member.</p>
  id of the member: <input type="text"  name="id" ><br><br>
  name of the dog: <input type="text" name="name"><br><br>
  gender of the dog:
  <br>
  <input type="radio" id="male" name="gender" value="m">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="f">
  <label for="female">Female</label><br><br>
  <input type="submit" value="add the dog">
</form>

我想将三个值，即 id、name 和狗的性别信息传递到 javascript 代码，以便我可以使用 fetch API 执行 POST 请求。我想测试是否所有这些值都已传递到 javascript 代码中，因此在将它们用于 fetch API 之前，我将它们一一打印在控制台上。现在的问题是，这段代码只在控制台打印出姓名和性别，没有id。所以似乎id没有成功地从表单传递到javascript。我不知道哪里出错了。请帮帮我。非常感谢！

querySelectorAll 不选择第一个元素

0 个答案: