形成与按钮HTML分配最后一个按钮的价值，无论选择哪一个

Question

我想创建与不同类型的输入（诸如姓名，日期，以及单选按钮选项）HTML形式，并且当我要打印在形式输入的控制台上的数据对象，则该值从单选按钮没有被正确存储。

首先，这是我在这方面的第一个项目，也计算器上我第一次贴的问题，所以我将不胜感激就如何提出问题提出了一些建议更好，如果我忘了一些重要的数据。

我一直在下面从不同的资源（主要是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: "[email protected]", inputGender: "female", …}
$inputDate: "2019-12-13"
$inputEmail: "[email protected]"
$inputGender: "female"
$inputName: "myName"
$inputNumber: "1"
$inputSurname: "mySurname"
$_proto_: Object

但我认为这将是展示：

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

当阳选项被选中。

非常感谢你

Answer 1

问题是在你的JS。你通过一切有name属性循环，才能，并增加它的价值，你提交的数据。在单选按钮的情况下，你必须检查，如果他们选择和只添加如果是这样，否则，最后一个总是赢，因为你看到的。

既然你似乎是使用jQuery，你可能只是让其serialize helper为你做这项工作。