Question

我不能为我的生活找出为什么我的表单在通过AJAX发布之前使用jQuery时不会序列化。

每当我调试javascript＆＃39; formData＆＃39;结果＆＃34;＆＃34;。

我已尝试使用表单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);

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

1 个答案: