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