我的表单似乎只以某种方式发送了最后一个数据条目（user_feel）。 这是我第一次使用表格，我不知道为什么其他条目没有随表格的其余部分一起发送：
<!DOCTYPE html>
<head>
<title>How was your day? (So far)</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link href='custom.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xl-8 offset-xl-2 py-5">
<h1>Activity form</h1>
<p class="lead">Please indicate what you've eaten and which social activities (if any) you've participated in.</p>
<form id="activity-form" method="post" action="form.php">
<div class="messages"></div>
<div class="controls">
<br />
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">What is your name? *</label>
<input id="name" type="text" name="user_name" class="form-control" placeholder="Please enter your name *" required="required" data-error="Name is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="time">Which part of the day are you reporting on? *</label>
<select id="time" name="current_time" class="form-control" required="required" data-error="Please specify the time of day.">
<option value="">Select the time of day</option>
<option value="morning">Morning</option>
<option value="afternoon">Afternoon</option>
<option value="evening">Evening</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="feel">How do you feel? *</label>
<p>Level three is the base level. It's where you don't feel especially good or bad, and consider yourself feeling 'neutral' compared to how you usually feel.</p>
<select id="feel" name="user_feel" class="form-control" required="required" data-error="Please specify how you feel.">
<option value="">Select how you feel</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-12">
<input type="submit" class="btn btn-success btn-send" value="Save data">
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-muted">
<strong>*</strong> These fields are required.</p>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js" integrity="sha256-dHf/YjH1A4tewEsKUSmNnV05DDbfGN3g7NMq86xgGh8=" crossorigin="anonymous"></script>
<script src="form.js"></script>
</body>
</html>
我序列化表单并使用ajax发送，php脚本回显了它从帖子中获得的所有key：value对。在这里，我只获得user_feel选择，而表单中的所有其他选择似乎都将被忽略。
这是JS文件：
$(function () {
// init the validator
// validator files are included in the download package
// otherwise download from http://1000hz.github.io/bootstrap-validator
$('#activity-form').validator();
// when the form is submitted
$('#activity-form').on('submit', function (e) {
// if the validator does not prevent form submit
if (!e.isDefaultPrevented()) {
var url = "form.php";
// POST values in the background the the script URL
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
// data = JSON object that contact.php returns
// we recieve the type of the message: success x danger and apply it to the
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
// let's compose Bootstrap alert box HTML
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
// If we have messageAlert and messageText
if (messageAlert && messageText) {
// inject the alert to .messages div in our form
$('#activity-form').find('.messages').html(alertBox);
// empty the form
$('#activity-form')[0].reset();
}
}
});
return false;
}
})
});
这是PHP脚本：
<?php
$okMessage = 'Your data has been submitted succesfully! Thanks a bunch!';
$errorMessage = 'There was an error while submitting the form. Please try again later';
error_reporting(E_ALL & ~E_NOTICE);
try
{
if(count($_POST) == 0) throw new \Exception('Form is empty');
foreach ($_POST as $key => $value) {
$debug = "";
$debug .= "$key: $value\n";
}
$responseArray = array('type' => 'success', 'message' => $okMessage."\r\n".$debug);
}
catch (\Exception $e)
{
$responseArray = array('type' => 'danger', 'message' => $errorMessage);
}
// if requested by AJAX request return JSON response
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$encoded = json_encode($responseArray);
header('Content-Type: application/json');
echo $encoded;
}
// else just display the message
else {
echo $responseArray['message'];
}
它基于以下代码：https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form