2010-03-29 50 views
0

我有一個表單,如果提交正確,它會隱藏表單。jquery隱藏表單選擇登錄提交按鈕時,不只是任何按鈕

我添加了一個取消按鈕,關閉彈出厚框窗口,但是當我點擊取消時,它隱藏了窗體。

如何選擇登錄按鈕來隱藏表單?

$(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(); 
       $("#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> 

另外,如何通過選擇取消按鈕關閉窗口?我想關閉窗口並自動刷新父窗口。

回答

1

嘗試使用,而不是提交類型的按鈕輸入類型,這裏有一個例子...

在地方..

<input type="submit" name="cancel" value="Cancel" /> 

使用...

<input type="button" onclick="$('#thickbox-selector').remove()" /> 

我不知道如何正確地關閉thickbox(可能有一個close()方法或其他東西),但是你明白了:P。

+0

找到了close方法 Brad 2010-03-29 14:35:03

+0

嘿,剛剛在厚盒子文檔中發現它。在這種情況下,最好只有一個提交輸入,除非取消需要服務器處理。所以嘗試... 2010-03-29 14:45:51

-1

或添加命令按鈕itself-

$("#login").click(... 
-1

這是我的代碼:

在文件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_-][email protected][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; 
    } 
} 
}); 

和HTML(行動= ?和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> 
+0

爲了更容易理解你可以縮短你的代碼,並在jsfiddle – surfmuggle 2012-11-03 21:27:03