jquery hide form when selecting login submit button, not just any button
I have a form, if submitted correctly, it hides the form.
I added a cancel button, to close the pop-up thickbox window, but when I hit cancel, it hides the form.
How do I go about hiding the form if the login button is selected?
$(document).ready(function() {
$("#login_form").submit(function() {
var unameval = $("#username").val();
var pwordval = $("#password").val();
$.post("backend.php", { username: unameval,
password: pwordval }, function(data) {
if(data === "ok") {
$('#login_form').remove();
开发者_如何学C $("#success p").html(data);
} else {
$("#success p").html(data);
}
});
return false;
});
});
<form id="login_form" method="post">
<p>Username: <input type="text" id="username" name="username" /></p>
<p>Password: <input type="password" id="password" name="password" /></p>
<p><input type="submit" name="login" value="Login" /> <input type="submit" name="cancel" value="Cancel" /></p>
</form>
Also, how do I go about closing the window by selecting the cancel button? I'd like to close the window and auto-refresh the parent window.
Try using the button input type, instead of the submit type, here is an example...
In place of..
<input type="submit" name="cancel" value="Cancel" />
Use...
<input type="button" onclick="$('#thickbox-selector').remove()" />
I don't know how to properly close a thickbox (there might be a close() method or something), but you get the idea :P.
Or add the command to the button itself-
$("#login").click(...
this is my code:
In file user.create.validation.js
$(document).ready(function(){
//global vars
var form = $("#Form-Profile");
var btnsubmit = $("#send");
var username = $("#Register-username");
var usernameInfo = $("#Register-usernameInfo");
var fullname = $("#Register-fullname");
var fullnameInfo = $("#Register-fullnameInfo");
var address = $("#Register-address");
var addressInfo = $("#Register-addressInfo");
var email = $("#Register-email");
var emailInfo = $("#Register-emailInfo");
var pass1 = $("#Register-pass1");
var pass1Info = $("#Register-pass1Info");
var pass2 = $("#Register-pass2");
var pass2Info = $("#Register-pass2Info");
//On blur
username.blur(validateUsername);
fullname.blur(validateFullname);
address.blur(validateAddress);
email.blur(validateEmail);
pass1.blur(validatePass1);
pass2.blur(validatePass2);
//On key press
username.keyup(validateUsername);
fullname.keyup(validateFullname);
address.keyup(validateAddress);
pass1.keyup(validatePass1);
pass2.keyup(validatePass2);
function frmRegisterValidate(){
if(validateEmail() & validateFullname() & validateUsername() & validateAddress() & validatePass1() & validatePass2()) {
return true;
}else{
return false;
}
}
//On Submitting validateAddress
form.submit(function(){
if(validateEmail() & validateFullname() & validateUsername() & validateAddress() & validatePass1() & validatePass2()) {
$('#waiting').show(500);
form.hide(0);
$.ajax({
type : 'POST',
url : '/vn/ajax.php',
dataType : 'json',
data: {action : 'register',UserName:username.val(),Password1: pass1.val(),Password2: pass2.val(),Address: address.val(),MobileAlias:$('#Register-phone').val(),FullName:fullname.val(),Email:email.val()},
success : function(data){
$('#waiting').hide(500);
if(data.error == true){
$('#waiting').hide(500);
$('#message span').addClass("error");
form.show(500);
} else {
$('#message span').removeClass();
}
$('#message span').text(data.message).show(500);
},
error : function() {
$('#waiting').hide(500);
$('#message span').addClass("error").text('Có lỗi phát sinh trong quá trình xử lý dữ liệu.').show(500);
form.show(500);
}
});
}
else {
$('#waiting').hide(500);
$('#message span').addClass("error").text('Hãy nhập đầy đủ các thông tin vào những phần bắt buộc.').show(500);
form.show(500);
}
return false;
});
//validation functions
function validateEmail(){
//testing regular expression
var a = email.val();
var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
//if it's valid email
if(filter.test(a)){
email.removeClass("error");
emailInfo.text("Địa chỉ e-mail bạn thường dùng!");
emailInfo.removeClass("error");
return true;
}
//if it's NOT valid
else{
email.addClass("error");
emailInfo.text("E-mail của bạn không hợp lệ!");
emailInfo.addClass("error");
return false;
}
}
function validateUsername(){
//if it's NOT valid
if(username.val().length < 4){
username.addClass("error");
usernameInfo.text("Tên đăng nhập của bạn phải lớn hơn 3 ký tự!");
usernameInfo.addClass("error");
return false;
}
//if it's valid
else{
username.removeClass("error");
usernameInfo.text("Tên đăng nhập của bạn.");
usernameInfo.removeClass("error");
return true;
}
}
function validateFullname(){
//if it's NOT valid
if(fullname.val().length < 4){
fullname.addClass("error");
fullnameInfo.text("Họ và Tên của bạn phải lớn hơn 3 ký tự!");
fullnameInfo.addClass("error");
return false;
}
//if it's valid
else{
fullname.removeClass("error");
fullnameInfo.text("Họ và tên đầy đủ của bạn.");
fullnameInfo.removeClass("error");
return true;
}
}
function validateAddress(){
//if it's NOT valid
if(address.val().length < 10){
address.addClass("error");
addressInfo.text("Địa chỉ của bạn phải lớn hơn 9 ký tự!");
addressInfo.addClass("error");
return false;
}
//if it's valid
else{
address.removeClass("error");
addressInfo.text("Địa chỉ nơi bạn đang sinh sống.");
addressInfo.removeClass("error");
return true;
}
}
function validatePass1(){
//it's NOT valid
if(pass1.val().length <5){
pass1.addClass("error");
pass1Info.text("Mật khẩu phải lớn hơn 4 ký tự!");
pass1Info.addClass("error");
return false;
}
//it's valid
else{
pass1.removeClass("error");
pass1Info.text("Mật khẩu đăng nhập của bạn!");
pass1Info.removeClass("error");
validatePass2();
return true;
}
}
function validatePass2(){
//are NOT valid
if( pass1.val() != pass2.val() ){
pass2.addClass("error");
pass2Info.text('"Xác nhận mật khẩu" phải lớn hơn 4 ký tự và phải giống "Mật khẩu"!');
pass2Info.addClass("error");
return false;
}
//are valid
else{
pass2.removeClass("error");
pass2Info.text('"Xác nhận mật khẩu" phải lớn hơn 4 ký tự và phải giống "Mật khẩu"!');
pass2Info.removeClass("error");
return true;
}
}
});
and html (action=? and onsubmit=?):
<form method="POST" id="Form-Profile" action="<?=$_SERVER['REQUEST_URI']?>" onsubmit="return frmRegisterValidate();">
<fieldset>
<div>
<label for="Register-username"><?=translate('Tên tài khoản')?>:<em class="red">*</em></label>
<input id="Register-username" name="Register-username" type="text" />
<span id="Register-usernameInfo"><?=translate('Tên tài khoản')?></span>
</div>
<div>
<label for="Register-pass1"><?=translate('Mật khẩu')?>:<em class="red">*</em></label>
<input id="Register-pass1" name="Register-pass1" type="password" />
<span id="Register-pass1Info"><?=translate('Mật khẩu phải lớn hơn 4 ký tự!')?></span>
</div>
<div>
<label for="Register-pass2"><?=translate('Xác nhận mật khẩu')?>:<em class="red">*</em></label>
<input id="Register-pass2" name="Register-pass2" type="password" />
<span id="Register-pass2Info"><?=translate('"Xác nhận mật khẩu" phải lớn hơn 4 ký tự và phải giống "Mật khẩu"!')?></span>
</div>
<div>
<label for="Register-fullname"><?=translate('Họ và tên')?>:<em class="red">*</em></label>
<input id="Register-fullname" name="Register-fullname" type="text" />
<span id="Register-fullnameInfo"><?=translate('Họ và tên đầy đủ của bạn')?>.</span>
</div>
<div>
<label for="Register-address"><?=translate('Địa chỉ')?>:<em class="red">*</em></label>
<input id="Register-address" name="Register-adress" type="text" />
<span id="Register-addressInfo"><?=translate('Địa chỉ nơi bạn đang sinh sống')?>.</span>
</div>
<div>
<label for="Register-email"><?=translate('E-mail')?>:<em class="red">*</em></label>
<input id="Register-email" name="Register-email" type="text"/>
<span id="Register-emailInfo"><?=translate('Địa chỉ email mà bạn thường dùng')?>.</span>
</div>
<div>
<label for="Register-phone"><?=translate('Điện thoại')?>:</label>
<input id="Register-phone" name="Register-phone" type="text" />
<span id="Register-phoneInfo"><?=translate('Số cố định')?>.</span>
</div>
<div>
<input id="send" name="send" type="submit" value="<?=translate('Xác nhận')?>" />
<input id="reset" name="reset" type="reset" value="<?=translate('Làm lại')?>" />
</div>
</fieldset>
</form>
精彩评论