![](/img/trans.png)
[英]Using jQuery toggle to hide/show form submit button based on checkbox being checked - how to set submit button toggled off by default?
[英]How to submit the form and hide and show the image and button using 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。
谢谢。
在这些行之前错过了$ 。
//Hiding the Login button
$("#loginButton").hide();
//Showing the ajax loading image
$("#ajaxloading").show();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.