javascript - 带按钮的 HTML 表单分配最后一个按钮的值，无论选择哪个按钮

Question

我想使用 HTML 创建一个具有不同类型输入(例如姓名、日期和单选按钮选项)的表单，并且当我想在控制台上使用表单中输入的数据打印对象时，单选按钮的值未正确存储。

首先，这是我在该领域的第一个项目，也是我在 stackoverflow 上发布的第一个问题，因此，如果我忘记了一些关键数据，我将不胜感激有关如何更好地提出问题的一些建议。

我一直在遵循不同资源(主要是 YouTube 视频，例如: https://www.youtube.com/watch?v=GrycH6F-ksY )的帮助来创建此表单并使用 AJAX 提交数据，而我的 javascript 应用程序的代码主要来自该视频。

所有数据都已正确存储，除了来自单选按钮的数据外，我可以在控制台中看到它。无论选择什么选项(“男性”或“女性”)，控制台始终显示最后一个按钮的值，在本例中为“女性”。我想我在定义这些按钮时做错了什么，以及为什么它们没有被“选择”(我想这就是发生的事情，因为显示的数据始终是最后一个默认值)但我无法找出在哪里我做错事了。

我添加了我认为可能相关的代码部分

<form action="ajax/contact.php" method="post" class="ajax">
  <div class="form-row">
    <div class="form-group col-md-6">
      <label>Name</label>
      <input type="text" class="form-control" name="inputName" required>
    </div>
    <div class="form-group col-md-6">
      <label>Surname</label>
      <input type="text" class="form-control" name="inputSurname" required>
    </div>
  </div>
  <div class="form-group">
    <label>Date of birth</label>
    <input type="date" class="form-control" name="inputDate">
  </div>
  <div class="form-group">
    <label>Email</label>
    <input type="email" class="form-control" name="inputEmail" required>
  </div>
  <div class="form-row">
    <div class="form-group col-md-4">
      <label>Gender</label>
    </div>
    <div class="form-group col-md-4">
      <div class="radio-inline"><input type="radio" name="inputGender" 
value="male">Male</div>
    </div>
     <div class="form-group col-md-4">
      <div class="radio-inline"><input type="radio" name="inputGender"  
value="female">Female</div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label>Number of children</label>
    </div>
     <div class="form-group col-md-6">
      <input type="number" class="form-control" name="inputNumber">
    </div>
  </div>
 <div class="text-center">
  <button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>

---

Javascript函数

$('form.ajax').on('submit', function() {

  var that = $(this),
  url = that.attr('action'),
  method = that.attr('method'),
  data = {};

  that.find('[name]').each(function(index, value) {
    var that = $(this),
    name = that.attr('name'),
    value = that.val();

    data[name] = value;
  });

  console.log(data);


  return false;
});

---

PHP 文件

<?php
if (isset($_POST['inputName'],$_POST['inputSurname'],$_POST['inputDate'],$_POST['inputEmail'],$_POST['inputGender'],$_POST['inputNumber'])) {
print_r($_POST);
}

在控制台中我得到这个:

${inputName: "myName", inputSurname: "mySurname", inputDate: "2019-12-13", 
$inputEmail: "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e08d99ad81898ca0878d81898cce838f8d" rel="noreferrer noopener nofollow">[email protected]</a>", inputGender: "female", …}
$inputDate: "2019-12-13"
$inputEmail: "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd9084b09c9491bd9a909c9491d39e9290" rel="noreferrer noopener nofollow">[email protected]</a>"
$inputGender: "female"
$inputName: "myName"
$inputNumber: "1"
$inputSurname: "mySurname"
$_proto_: Object

但我认为它会显示:

$...
$inputGender: "male"
$...

当选择男性选项时。

非常感谢

Answer 1

问题出在你的JS上。您将按顺序循环遍历具有 name 属性的所有内容，并将其值添加到您的提交数据中。对于单选按钮，您必须检查它们是否被选中，并且只有在选中时才添加，否则，最后一个总是获胜，正如您所看到的。

由于您似乎正在使用 jQuery，您可能可以让它 serialize helper为您做这项工作。