开发者

jquery hide form when selecting login submit button, not just any button

开发者 https://www.devze.com 2022-12-24 19:46 出处:网络
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.

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>   
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号