我目前正在尝试序列化页面上的表单;但是，当我在本地运行它并使用警报来查看序列化的结果时，它返回空白。当我把这个完全相同的代码放到jsFiddle中时，它显示了序列化的形式（FirstName = wherehere＆amp; LastName = wherehere ......等等）。我不能为我的生活找出问题所在。
我在本地没有收到任何错误，只是一个空白警报。
这是我的HTML：
<div class="container">
<h1 class="white-text lobster">get in touch</h1>
<br />
</div>
<div class="jumbotron no-margin no-padding peter-river inset-top-bottom">
<div class="container">
<form id="contact" role="form" style="margin-top: 15px; margin-bottom: 15px;">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="form-group has-feedback">
<input type="text" id="FirstName" name="FirstName" class="form-control input-lg" placeholder="first name" data-invalid-field="This field is required" required /> <!--FIRST NAME -->
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="form-group has-feedback">
<input type="text" name="LastName" class="form-control input-lg not-required" placeholder="last name" /> <!-- LAST NAME -->
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group has-feedback">
<input type="email" name="Email" class="form-control input-lg" placeholder="email address" data-invalid-field="This field is required" data-invalid-email="Please enter a valid email" required /> <!-- EMAIL -->
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group has-feedback">
<input type="text" name="Subject" class="form-control input-lg" placeholder="subject" data-invalid-field="This field is required" required /> <!-- SUBJECT -->
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group has-feedback">
<textarea name="Body" class="form-control input-lg" placeholder="your message" rows="9" data-invalid-field="This field is required" style="resize: none;" required></textarea> <!-- MESSAGE -->
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-12">
<p><button id="contact-submit" type="button" class="btn btn-block btn-primary btn-lg">send</button></p> <!-- "SUBMIT" BUTTON-->
</div>
</div>
</form>
</div>
</div>
这是我的jQuery（整个文件），其中包含$('#contact-submit').on('click', function(){});区域中包含begin的问题：
// nav stuff
function goToSection($link) {
var $elem = $('#' + $link.attr('id'));
var offset = $elem.offset().top - 50;
$('html,body').animate({
scrollTop: offset
}, 1000);
$elem.addClass('visible-jumbo');
};
function getCurrentSection() {
return $(document.getElementsByClassName('visible-jumbo')[0]);
};
$(document).ready(function () {
// make sure we always start at the top on page reload
// make sure #home-sect has the visible class
$('html,body').animate({
scrollTop: 0
}, 1000);
$('#home-sect').addClass('visible-jumbo')
$.stellar({ horizontalScrolling: true, verticalOffset: 40 });
// nav functions
$('.linker').on('click', function () {
getCurrentSection().removeClass('visible-jumbo');
var $elem = $(document.getElementById($(this).attr('id') + '-sect'));
goToSection($elem);
});
// display/hide popover stuff
$('#contact input[required], #contact textarea[required]').on('focus', function () {
$(this).popover('destroy');
});
$('#contact-submit').on('click', function () {
$('#contact').validate();
// can't get the form .validate() to work, this is a work-around for the time being albeit sloppy
// TODO: cleanup (possible optimization, check timing on this with Firebug)
// current steps
// 1. remove any form-control-feedback divs/has-[status] classes from all form-groups
// 2. validate each field one at a time, if one fails, it exits on that one and doesn't check any of the subsequent fields
// 3. if there weren't any errors send the email and ajax in the result
var errors = true;
// cleanup
$('#contact .form-group').removeClass('has-error').removeClass('hasSuccess');
$('#contact .form-group .form-control-feedback').remove();
// actual work
$.each($('#contact input[required], #contact textarea[required]'), function (index, val) {
var $ele = $(val) // get reference to element
var $parent = $($ele.parent()); // get reference to parent
if (!($ele.valid())) { // not valid
$ele.popover({
trigger: 'manual',
placement: 'bottom',
container: 'body',
template: '<div class=\"popover\" style=\"width: 200px; border-color: #f1c40f\"><div class=\"arrow\" style=\"border-bottom-color: #f1c40f\"></div><div class=\"popover-inner\"><div class=\"row\"><div class=\"col-md-2 col-sm-2\" style=\"padding: 1px;\"><span class=\"glyphicon glyphicon-warning-sign sunflower-text\" style=\"padding: 11px 28px;\"></span></div><div class=\"col-md-9 col-sm-9\" style=\"padding: 1px;\"><div class=\"popover-content\"><p></p></div></div></div></div></div>'
}).data('bs.popover').options.content = $ele.data('invalid-field');
$ele.popover("show").click(function (e) { e.preventDefault(); });
$parent.addClass('has-error'); // add error class to parent
$parent.append('<span class=\"glyphicon glyphicon-remove form-control-feedback alizarin-text\"></span>'); // add error icon to parent
} else { // valid
$parent.addClass('has-success');
$parent.append('<span class=\"glyphicon glyphicon-ok form-control-feedback emerald-text\"></span>');
}
errors = !($ele.valid()); // if valid, errors will be set to false
return (!(errors)); // return the opposite of errors, if there were no errors (errors = false), return true
// if it returns false, it will stop the .each()
});
// send the mail
if (!(errors)) {
var data = $('#FirstName').serialize() + "$" $('#LastName')
/*$.ajax({
url: '/Home/_SendMessage',
type: 'POST',
data: $('#contact').serialize(),
success: function (data) {
alert(data);
}
});*/
}
});
});
如果我序列化每个字段（如果我添加了ID，则会添加ID），就像$('#FirstName').serialize()一样，它可以正常运行，但在表单的基础上它不会提取任何内容。
为什么在本地赢得这项工作？！？
答案 0 :(得分：1)
结果是我在评论中有两个具有相同身份contact的元素，如Arun所述。只需将其中一个更改为其他内容就可以解决问题，现在它可以完美运行。