$('form').serialize() 在本地返回空白，在 jsFiddle 上工作正常

Question

我目前正在尝试序列化我页面上的表单；但是，当我在本地运行它并使用警报查看序列化的结果时，它返回空白。当我将相同的确切代码放入 jsFiddle 时，它​​会显示序列化形式（FirstName=somethinghere&LastName=somethinghere... 等等）。我一生都无法弄清楚问题所在。

我在本地没有收到任何错误，只是一个空白警报。

jsFiddle

这是我的 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>

这是我在 $('#contact-submit').on('click', function(){}); 区域中包含的我遇到问题的函数的 jQuery（整个文件）：

// 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），就像 $('#FirstName').serialize() 那样，它就可以了，但在表单的基础上它什么都没有。

为什么这不能在本地工作？！？

Answer 1

最终我有两个元素具有相同的 id contact，正如 Arun 在 cmets 中所指出的那样。只需将一个更改为其他内容即可解决问题，现在它可以完美运行。