JQuery soumettre forme après avoir cliqué sur le lien

Question

Voici le 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) { 
      // 
     }); 
    }); 
}); 

Qu'est-ce qu'il est censé faire:

Après avoir cliqué sur le lien #autosave, la première forme dans le #content div sur la La page est soumise avec la méthode POST. Après cela, l'utilisateur est amené à la cible du lien.

Ce:

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

recueille des données de la forme et ajoute également le bouton d'envoi à la fin (car dans le code PHP Je vérifie si le bouton d'envoi a été présenté d'abord et ensuite faire la validation du formulaire et de manutention).

Ce:

var url = window.location.pathname; 

est l'URL où le formulaire est soumis (la même page que le formulaire est situé).

Le problème est, bien sûr, que cela ne fonctionne pas. Après avoir cliqué sur le lien, je suis redirigé vers la cible du lien, mais le formulaire n'a pas été envoyé (car il n'y a aucun changement dans la base de données).

Des idées?

EDIT:

extrait de XHTML:

 <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

Essayez:

$(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: Mon mauvais, window.location.href = url; devrait être window.location.href = $(this).attr('href'); comme tvanfosson a dans sa réponse.

EDIT2:

Cela fonctionne pour moi (testé à l'aide d'un script backend PHP), en utilisant votre code HTML (enveloppé dans un <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

Vous devez naviguer vers le lien cible après le poste est effectivement retourné. De cette façon, la demande de publication en attente ne sera pas déchargée (et non soumise) lorsque le lien href est suivi.

$(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 
    }); 
}); 

Modifier la fonction de rappel pour travailler avec les données si le lien ne doit pas être pris dans le cas où elle échoue la validation côté serveur. Une simple vérification des données renvoyées à l'aide d'une instruction if devrait suffire.