JQuery的點擊鏈接

Question

這裏後提交表單是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) { 
      // 
     }); 
    }); 
}); 

什麼它應該做的事：

點擊#autosave鏈接，在上的＃內容股利第一張表單後使用POST方法提交頁面。之後，用戶被帶到鏈接目標。

此：

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

從表單收集數據，並且還增加了提交按鈕結束（因爲在PHP代碼我檢查，如果提交按鈕提交第一，然後做表單驗證和處理）。

此：

var url = window.location.pathname; 

是在表單提交的URL（同一頁的形式所在）。

問題是，它當然不起作用。

點擊鏈接後，我被帶到鏈接目標，但表單尚未提交（因爲數據庫中沒有更改）。

任何想法？

編輯：

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

嘗試：

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

編輯：我的壞，window.location.href = url;應該是window.location.href = $(this).attr('href');爲tvanfosson在他的回答。

EDIT2：

這對我的作品（使用PHP後臺腳本測試），使用HTML代碼（裹成<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

您需要導航鏈接該職位實際返回後的目標。這樣，當鏈接href被遵循時，待處理的發佈請求將不會被卸載（並且未被提交）。

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

更改回調函數與數據工作，如果該鏈接不應該在失敗服務器端驗證的情況下采取 。使用if語句簡單檢查返回的數據應該足夠了。