1
显示图像和按钮我使用JQuery如何提交表单,并隐藏和使用jquery
我有以下的html:
HTML代码:
<div id="skywardsLogin" style="display: none;">
<div class="formContainer" id="loginDetails">
<form action="#" id="frmLogin" class="homeWidget">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="formLabel" width="100">
<label for="skywardsNumber" title="Skywards Number">
Skywards Number</label></td>
<td>
<input class="formField" id="skywardsNumber" name="skywardsNumber" size="25" type="text" /></td>
<td class="formLink">
<a class="iconHelpBox" href="#">Forgot number</a></td>
</tr>
<tr>
<td class="formLabel">
<label for="password">
Password</label></td>
<td>
<input class="formField" id="password" name="password" size="25" type="password" /></td>
<td class="formLink">
<a class="iconHelpBox" href="#">Forgot password</a></td>
</tr>
</table>
</form>
</div>
<div class="horRuleWhite">
<hr />
</div>
<div class="continueBar">
<div class="continueBarLeft">
<p class="validateTips" style="color: Red">
</p>
</div>
<div class="continueBarRightButton">
<input alt="Log In" id="loginButton" src="system/images/form_buttons/button_log_in.gif"
title="Log In" type="image" />
<div id="ajaxloading" style="display: none">
<img align="absmiddle" src="system/images/spinner.gif" alt="Processing..."/> Processing...
</div>
</div>
</div>
</div>
的JQuery代码:
/ Dialog
$('#skywardsLoginLink').click(function(){
$('#skywardsLogin').dialog({
autoOpen: true,
width: 450,
modal: true,
title: 'Login to your Skywards Account'
});
if($('#skywardsLogin').is(':visible')) {
hideSelect();
} else {
showSelect();
}
});
//Login Button Clicked
$('#loginButton').click(function()
{
var bValid = true;
bValid = bValid && checkLength(skywardNo, "Skyward No", 3, 16);
bValid = bValid && checkLength(password, "password", 5, 16);
if (bValid)
{
$("#loginDetails > form").submit();
allFields.val("");
tips.text("");
}
});
//Submitting the form
$("#loginDetails > form").submit(function()
{
//Hiding the Login button
("#loginButton").hide();
//Showing the ajax loading image
("#ajaxloading").show();
// 'this' refers to the current submitted form
var str = $(this).serialize();
// -- Start AJAX Call --
$.ajax({
type: "POST",
url: "Login.aspx", // Send the login info to this page
data: str,
success: function(msg)
{
$("#loginDetails").ajaxComplete(function(event, request, settings){
// Show 'Submit' Button
$('#loginButton').show();
// Hide Gif Spinning Rotator
$('#ajaxloading').hide();
if(msg == 'OK') // LOGIN OK?
{
$('a.modalCloseImg').hide();
$(this).html(login_response); // Refers to 'status'
// After 3 seconds redirect the
//setTimeout('go_to_private_page()', 3000);
}
else // ERROR?
{
var login_response = msg;
$('#login_response').html(login_response);
}
});
}
});
// -- End AJAX Call --
return false;
});
我试图调用模态弹出对话框,它将验证用户名和密码,如果全部是有效的形式#loginDetails>表格将被提交,表格正在提交,但其给出的错误(# loginButton” .hide不低于上线的功能)
//Hiding the Login button
("#loginButton").hide();
//Showing the ajax loading image
("#ajaxloading").show();
任何想法什么都可以,因为我们已经在我的HTML有两个ID的原因。
谢谢。
很好抓,都没仔细看过这个如此密切 – kobe 2010-12-15 06:45:18
我对this..anyway感谢 – 2010-12-15 06:45:39
@MKS遗憾,恰好是最好的。我用吸烟雪茄时,事情搞乱我:) – yoda 2010-12-15 06:46:29