Trouble serializing form with jQuery

Question

I cannot for the life of me figure out why my form will not serialize when using jQuery prior to posting via AJAX.

Whenever I debug the javascript 'formData' results in "".

I've tried this with the form id's hardcoded and it still results in the blank serialization, tried .get(0) at the end of the $(this) selector and tried without underscores in names and to no avail.

When debugging the selector contains the inputs as children, and I've serialized forms before where the inputs are nested in other elements without problems.

The reason I'm dynamically selecting the form with $(this) and not hardcoding the event handlers is that this will be part of the application where we will bolt on additional forms so I'd like it to be concise and maintainable.

Any insight is greatly appreciated.

My code is below:

HTML/PHP view (using 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

Swap lines

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

$(this).html(loadingHTML);