Question

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

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

我一直在寻求来自不同资源（大多是https://www.youtube.com/watch?v=GrycH6F-ksY之类的youtube视频）的帮助来创建此表单并使用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"
$...

当选择了男性选项时。

非常感谢您

Answer 1

问题出在您的JS中。您正在按顺序遍历具有name属性的所有内容，并将其值添加到提交数据中。如果是单选按钮，则必须检查是否已选中它们，只有在选择时才添加，否则，如您所见，最后一个总是赢。

由于您似乎正在使用jQuery，您可能只需让其serialize helper为您完成这项工作即可。

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

1 个答案: