JQuery的点击链接
这里后提交表单是JQuery的: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"> </div>
<p class="pad-top"><a href="/view/profile/id/2" class="blue" id="autosave">View Profile</a></p>
尝试:
$(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;
});
您需要导航链接该职位实际返回后的目标。这样,当链接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语句简单检查返回的数据应该足够了。
这也行不通。 – 2009-09-28 21:23:23
我更新为使用表单操作中的网址。试试看。这也可能是你在页面上有一些javascript错误(我不能保证它们不是我的)。你能检查与Firefox/Firebug错误,看看是否可能会让你失望? – tvanfosson 2009-09-28 21:37:44
但链接应该工作,它应该带我到链接目标,当我点击它。只需将表单与AJAX一起提交即可。 – 2009-09-28 21:20:15
好的,我们可以看看你的HTML吗? – 2009-09-28 21:25:02
我发布了HTML :) – 2009-09-28 21:30:56