时间戳

首页 > 解决方案 > Form in HTML with button assigns the value of the last button, no matter which one was selected

javascript - Form in HTML with button assigns the value of the last button, no matter which one was selected

问题描述

I want to create a form with HTML with different types of inputs (such as name, surname, dates, and radio-button options), and when I want to print the object with the data inputted in the form on the console, the value from the radio-buttons is not stored correctly.

First of all, this is my first project on this area and also my first posted question on stackoverflow, so I would appreciate some suggestions on how to pose the question better if I'm forgetting some crucial data.

I have been following help from different resources (mostly youtube videos such as: https://www.youtube.com/watch?v=GrycH6F-ksY ) to create this form and submit the data with AJAX, and the code of my javascript application comes mainly from that video.

All the data is stored correctly and I can see it in the console, except from the data comming from the radio-buttons. No matter what option is selected (either "male" or "female"), the console always shows the value of the last button, which in this case is "female". I suppose I am doing something wrong when defining these buttons, and why they are not being "selected" (I suppose that's what is happening since the data shown is always the last default value) but I haven't been able to find out where I am doing something wrong.

I'm including the part of the code that I think might be relevant

<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 function

$('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 file

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

In the console I'm getting this:

${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

but I thought it would be showing:

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

when the male option is selected.

Thank you very much

标签： javascripthtmlajaxformsradio-button

解决方案

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

而且由于您似乎在使用 jQuery，您可以让其序列化助手为您完成这项工作。

推荐阅读