用jQuery序列化表单时遇到问题

Question

我不能为我的生活弄清楚为什么我的表单在通过AJAX发布之前使用jQuery时不会序列化.

每当我调试javascript'formData'结果为"".

我已尝试使用表单id的硬编码,它仍然导致空白序列化,.get(0)在$(this)选择器的末尾尝试并尝试没有下划线的名称,无济于事.

当调试选择器包含输入作为子项时,我已经序列化了表单之前输入嵌套在其他元素中没有问题.

我动态选择表单$(this)而不是对事件处理程序进行硬编码的原因是,这将是应用程序的一部分,我们将在其他表单上进行操作,因此我希望它简洁易懂.

非常感谢任何见解.

我的代码如下:

HTML/PHP视图(使用CodeIgniter)

<div class="tabs-content">
    <section role="tabpanel" aria-hidden="false" class="content active" id="details">
        <div class="login-form">
            <p class="lead">To change basic personal details such as name and email address use this form.</p>
            <form action="<?php echo base_url() ?>ajax/update_details" method="POST" name="updateDetailsForm" id="updateDetailsForm">
                <div class="row">
                    <div class="small-12 columns">
                        <label>First Name
                            <input type="text" placeholder="e.g. John" name="first_name" value="<?php echo $first_name ?>" />
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="small-12 columns">
                        <label>Surname
                            <input type="text" placeholder="e.g. Smith" name="last_name" value="<?php echo $last_name ?>" />
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="small-12 columns">
                        <label>Email
                            <input type="email" placeholder="e.g. me@example.com" name="email" value="<?php echo $email ?>" />
                        </label>
                    </div>
                </div>
                <input type="submit" class="button small" value="Update" />
            </form>
        </div>
    </section>
    <section role="tabpanel" aria-hidden="true" class="content" id="password">
        <div class="login-form">
            <p class="lead">You can use the form below to update your account password.</p>
            <p>Passwords must be between 8 and 50 characters in length.</p>
            <form action="<?php echo base_url() ?>ajax/update_password" method="POST" name="updatePasswordForm" id="updatePasswordForm">
                <div class="row">
                    <div class="small-12 columns">
                        <label>Old Password <small>Required</small>

                            <input type="password" name="oldpw" />
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="small-12 columns">
                        <label>New Password <small>Required</small>

                            <input type="password" name="newpw1" />
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="small-12 columns">
                        <label>Confirm New Password <small>Required</small>

                            <input type="password" name="newpw2" />
                        </label>
                    </div>
                </div>
                <input type="submit" class="button small" value="Update Password" />
            </form>
        </div>
    </section>
</div>

使用Javascript

$('form').on('submit', (function (e) {
    e.preventDefault();

    var url = $(this).attr('action');
    $(this).html(loadingHTML);

    var formData = $(this).serialize();

    $.ajax({
        type: 'POST',
        url: url,
        data: formData,
        done: function (data) {
            $(this).html(data);
        }
    });
}));

Answer 1

交换线

var formData = $(this).serialize();

$(this).html(loadingHTML);