JQuery submit form after clicking on link

Question

Here is the JQuery:

$(document).ready(function() {
    $('#autosave').click(function() {
        var url = window.location.pathname;
        $postData = $('#content form:first').serialize() + '&'
                    + $('#content form:first .input-submit').attr('name')
                    + '=Save';
        $.post(url, $postData, function(data) {
            //
        });
    });
});

What it's supposed to do:

After clicking on the #autosave link, the first form in the #content div on the page gets submitted with POST method. After that the user is taken to the link target.

This:

$postData = $('#content form:first').serialize() + '&'
            + $('#content form:first .input-submit').attr('name')
            + '=Save';

collects data from the form and also adds the submit button to the end (because in PHP code I am checking if the submit button was submitted first and then do the form validation and handling).

This:

var url = window.location.pathname;

is the URL where the form is submitted (the same page as the form is located).

The problem is, of course, that it doesn't work.

After clicking on the link, I am taken to the link target but the form hasn't been submitted (because there are no changes in the database).

Any ideas?

EDIT:

XHTML snippet:

        <form enctype="application/x-www-form-urlencoded" method="post"
              action="/my-account/account-details"><ol>

<fieldset id="fieldset-your_details"><legend>Your Details</legend>

<li><label for="name" class="optional">Name</label>
<div class="element">
<input type="text" name="name" id="name" value="Name..." class="input-text" /></div></li>
<li><label for="town_city" class="optional">Town/City</label>
<div class="element">
<input type="text" name="town_city" id="town_city" value="Town/City..." class="input-text" /></div></li>
<li><label for="country" class="optional">Country</label>
<div class="element">
<select name="country" id="country">
    <option value="United Kingdom" label="United Kingdom" selected="selected">United Kingdom</option>

    <option value="United States" label="United States">United States</option>
    ...
    <option value="Zimbabwe" label="Zimbabwe">Zimbabwe</option>
</select></div></li>
<li><label for="county" class="optional">County</label>
<div class="element">
<input type="text" name="county" id="county" value="County..." class="input-text" /></div></li></fieldset>

<fieldset id="fieldset-about"><legend>About Me</legend>

<li><label for="about_me" class="optional">About Me</label>
<div class="element">
<textarea name="about_me" id="about_me" rows="10" cols="50">Tell people about yourself...</textarea></div></li></fieldset>
<fieldset id="fieldset-looks"><legend>Looks</legend>

<li><label for="hair" class="optional">Hair</label>
<div class="element">
<input type="text" name="hair" id="hair" value="Hair..." class="input-text" /></div></li>
<li><label for="eyes" class="optional">Eyes</label>

<div class="element">
<input type="text" name="eyes" id="eyes" value="Eyes..." class="input-text" /></div></li>
<li><label for="height" class="optional">Height</label>
<div class="element">
<input type="text" name="height" id="height" value="Height..." class="input-text" /></div></li>
<li><label for="weight" class="optional">Weight</label>
<div class="element">
<input type="text" name="weight" id="weight" value="Weight..." class="input-text" /></div></li>
<li><label for="body_type" class="optional">Body Type</label>
<div class="element">
<input type="text" name="body_type" id="body_type" value="Body Type..." class="input-text" /></div></li>
<li><label for="dress_size" class="optional">Dress Size</label>
<div class="element">

<input type="text" name="dress_size" id="dress_size" value="Dress Size..." class="input-text" /></div></li>
<li><label for="bust_size" class="optional">Bust Size</label>
<div class="element">
<input type="text" name="bust_size" id="bust_size" value="Bust Size..." class="input-text" /></div></li>
<li><label for="waist" class="optional">Waist</label>
<div class="element">
<input type="text" name="waist" id="waist" value="Waist..." class="input-text" /></div></li>
<li><label for="best_features_looks" class="optional">Best Features</label>
<div class="element">
<input type="text" name="best_features_looks" id="best_features_looks" value="Best Features..." class="input-text" /></div></li>
<li><label for="tattoos_piercings" class="optional">Any Tattoos/Piercings</label>
<div class="element">
<input type="text" name="tattoos_piercings" id="tattoos_piercings" value="Any Tattoos/Piercings..." class="input-text" /></div></li></fieldset>

<fieldset id="fieldset-personal"><legend>Personal</legend>

<li><label for="gender" class="optional">Gender</label>
<div class="element">
<select name="gender" id="gender">
    <option value="Male" label="Male" selected="selected">Male</option>
    <option value="Female" label="Female">Female</option>
</select></div></li>
<li><label for="job" class="optional">Job</label>
<div class="element">

<input type="text" name="job" id="job" value="Job..." class="input-text" /></div></li>
<li><label for="star_sign" class="optional">Star Sign</label>
<div class="element">
<input type="text" name="star_sign" id="star_sign" value="Star Sign..." class="input-text" /></div></li>
<li><label for="sexuality" class="optional">Sexuality</label>
<div class="element">
<input type="text" name="sexuality" id="sexuality" value="Sexuality..." class="input-text" /></div></li>
<li><label for="marital_status" class="optional">Marital Status</label>
<div class="element">
<input type="text" name="marital_status" id="marital_status" value="Marital Status..." class="input-text" /></div></li>
<li><label for="hobbies" class="optional">Hobbies And Interests</label>
<div class="element">
<input type="text" name="hobbies" id="hobbies" value="Hobbies And Interests..." class="input-text" /></div></li>

<li><label for="cigarettes" class="optional">Do You Smoke</label>
<div class="element">
<input type="text" name="cigarettes" id="cigarettes" value="Do You Smoke..." class="input-text" /></div></li>
<li><label for="alcohol" class="optional">Do You Drink Alcohol</label>
<div class="element">
<input type="text" name="alcohol" id="alcohol" value="Do You Drink Alcohol..." class="input-text" /></div></li>
<li><label for="drugs" class="optional">Do You Take Drugs</label>
<div class="element">
<input type="text" name="drugs" id="drugs" value="Do You Take Drugs..." class="input-text" /></div></li>
<li><label for="best_features_personal" class="optional">Best Features</label>
<div class="element">
<input type="text" name="best_features_personal" id="best_features_personal" value="Best Features..." class="input-text" /></div></li></fieldset>
<fieldset id="fieldset-profile_theme"><legend>Profile Theme</legend>

<li><label for="username_color" class="optional">Username Color</label>
<div class="element">
<input type="text" name="username_color" id="username_color" value="" class="input-text" /></div></li>
<li><label for="menu_color" class="optional">Menu Color</label>
<div class="element">
<input type="text" name="menu_color" id="menu_color" value="" class="input-text" /></div></li>
<li><label for="header_color" class="optional">Header Color</label>
<div class="element">
<input type="text" name="header_color" id="header_color" value="" class="input-text" /></div></li>
<li><label for="front_color" class="optional">Front Color</label>
<div class="element">
<input type="text" name="front_color" id="front_color" value="" class="input-text" /></div></li></fieldset>

<li class="clear"><div class="button">
<input type="submit" name="account_details" id="account_details" value="Save" class="input-submit left" /></div></li></ol></form>
        <div class="clear">&nbsp;</div>
        <p class="pad-top"><a href="/view/profile/id/2" class="blue" id="autosave">View Profile</a></p>

Answer 1

Try:

$(document).ready(function() {
    $('#autosave').click(function() {
        var url = window.location.pathname;
        $postData = $('#content form:first').serialize() + '&'
                    + $('#content form:first .input-submit').attr('name')
                    + '=Save';
        $.post(url, $postData, function(data) {
            window.location.href = url;
        });

        return false;
    });
});

EDIT: My bad, window.location.href = url; should be window.location.href = $(this).attr('href'); as tvanfosson has in his answer.

EDIT2:

This works for me (tested using a PHP backend script), using your HTML code (wrapped into a <div id="content">YOUR HTML</div>):

$('#autosave').click(function() {
 var url = window.location.pathname;

 $postData = $('#content form:first').serialize() + '&'
    + $('#content form:first .input-submit').attr('name')
    + '=Save';

 $.post(url, $postData, function(data) {
  window.location.href = $('#autosave').attr('href');
 });

 return false;
});

Answer 2

You need to navigate to the link target after the post has actually returned. This way the pending post request won't be unloaded (and not submitted) when the link href is followed.

$(document).ready(function() {
    $('#autosave').click(function() {
        var url = $(this).closest('form').attr('action');
        $postData = $('#content form:first').serialize() + '&'
                    + $('#content form:first .input-submit').attr('name')
                    + '=Save';
        $.post(url, $postData, function(data) {
            // take link after post
            window.location.href = $(this).attr('href');
        });
        return false;  // stops initial link action
    });
});

Change the callback function to work with the data if the link shouldn't be taken in the case where it fails server-side validation. A simple check of the returned data using an if statement should be sufficient.