带有按钮的 HTML 中的表单分配最后一个按钮的值，无论选择哪个按钮答案

【问题标题】：Form in HTML with button assigns the value of the last button, no matter which one was selected带有按钮的 HTML 中的表单分配最后一个按钮的值，无论选择哪个按钮
【发布时间】：2019-06-27 14:56:19
【问题描述】：

我想创建一个带有不同类型输入（例如姓名、姓氏、日期和单选按钮选项）的 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: "myMail@gmail.com", inputGender: "female", …}
$inputDate: "2019-12-13"
$inputEmail: "myMail@gmail.com"
$inputGender: "female"
$inputName: "myName"
$inputNumber: "1"
$inputSurname: "mySurname"
$_proto_: Object

但我认为它会显示：

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

选择了男性选项。

非常感谢

【问题讨论】：

你尝试添加一个作为第一顺序
- Non Specifi （不显示 *CSS） - 男 - 女

标签： javascript html ajax forms radio-button

【解决方案1】：

问题出在你的 JS 中。您将按顺序遍历所有带有name 属性的内容，并将其值添加到您的提交数据中。在单选按钮的情况下，您必须检查它们是否被选中，如果选中则仅添加，否则，最后一个总是获胜，如您所见。

而且由于您似乎在使用 jQuery，您可以让其 serialize helper 为您完成这项工作。

【讨论】：