Я хочу создать форму с 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"
$...
, когда выбран мужской вариант.
Большое спасибо