Username Availability Check using PHP

Mi_Mom · December 25, 2018, 10:03am

Mình có hàm check-availability như này, đó là khi mình bấm vào Find out availability thì mới kiểm tra.
Mình muốn khi bấm username và tự động kiểm tra luôn thì phải làm sao.
Giống như Create Account của daynhauhoc á.

<div class="form-group">
      <label for="user_login">
              <?php _e('Username (E-mail Address)', 'iii-dictionary') ?>
       </label>
        <input id="user_login_signup" class="form-control" name="user_login" type="text" value="" required>
 </div>
 <a href="#" id="check-availability" class="check-availability">
      <img style="height: 15px;" src="<?php echo get_template_directory_uri(); ?>/library/images/Icon_Questions.png">
              Find out availability
       <span class="icon-loading"></span>
 </a>


$("#check-availability").click(function (e) {
                            e.preventDefault();
                            if (availability_checking) {
                                return;
                            }
                            var tthis = $(this);
                            var user_login = $("#user_login_signup").val().trim();
                            if (user_login != "") {
                                tthis.popover("destroy");
                                availability_checking = true;
                                tthis.find(".icon-loading").fadeIn();
                                $.getJSON(home_url + "/?r=ajax/availability/user", {user_login: user_login}, function (data) {
                                    if (isValidEmail(user_login)) {

                                        if (data [0] == 0) {
                                            var p_c = '<span class="popover-alert"><?php _e('Not Available', 'iii-dictionary') ?></span>';
                                        } else {
                                            var p_c = '<span class="popover-alert"><?php _e('Available', 'iii-dictionary') ?></span>';
                                        }
                                    } else {
                                        var p_c = '<span class="popover-alert"><?php _e('Invalid', 'iii-dictionary') ?></span>';
                                    }
                                    tthis.find(".icon-loading").fadeOut();
                                    tthis.popover({
                                        placement: "bottom",
                                        content: p_c,
                                        trigger: "click",
                                        html: true
                                    }).popover("show");
                                    setTimeout(function () {
                                        tthis.popover("hide")
                                    }, 3000);
                                    availability_checking = false;
                                });
                            }
                        });

hieudien · December 25, 2018, 9:38am

mình chưa rõ ý bạn lắm, nhưng có lẽ từ khóa bạn cần là sự kiện onChange của thẻ input

Mi_Mom · December 25, 2018, 9:44am

ý mình là mình muốn làm cái username giống của daynhauhoc á.
tại source code của mình là phải click mới kiểm tra

hieudien · December 25, 2018, 9:48am

Y bạn là cứ gõ 1 chữ là chạy hàm check 1 lần đúng không ?
Nếu đúng vậy thì bạn sử dụng onChange của thẻ input nhé, onChange sẽ bắt sự kiện khi bạn thay đổi giá trị input.

Mi_Mom · December 25, 2018, 10:10am

bạn có teamviewer không. giúp mình với nha

mình thêm onchange vô vẫn không được

hieudien · December 25, 2018, 9:55am

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_oninput

mình nhầm chút nhé bạn, sự kiện oninput mới chuẩn
mình không có teamviewr

Mi_Mom · December 25, 2018, 10:01am

đây là hàm kiểm tra

$("#check-availability").click(function (e) {
                            e.preventDefault();
                            if (availability_checking) {
                                return;
                            }
                            var tthis = $(this);
                            var user_login = $("#user_login_signup").val().trim();
                            if (user_login != "") {
                                tthis.popover("destroy");
                                availability_checking = true;
                                tthis.find(".icon-loading").fadeIn();
                                $.getJSON(home_url + "/?r=ajax/availability/user", {user_login: user_login}, function (data) {
                                    if (isValidEmail(user_login)) {

                                        if (data [0] == 0) {
                                            var p_c = '<span class="popover-alert"><?php _e('Not Available', 'iii-dictionary') ?></span>';
                                        } else {
                                            var p_c = '<span class="popover-alert"><?php _e('Available', 'iii-dictionary') ?></span>';
                                        }
                                    } else {
                                        var p_c = '<span class="popover-alert"><?php _e('Invalid', 'iii-dictionary') ?></span>';
                                    }
                                    tthis.find(".icon-loading").fadeOut();
                                    tthis.popover({
                                        placement: "bottom",
                                        content: p_c,
                                        trigger: "click",
                                        html: true
                                    }).popover("show");
                                    setTimeout(function () {
                                        tthis.popover("hide")
                                    }, 3000);
                                    availability_checking = false;
                                });
                            }
                        });

còn đây là input

 <label for="user_login">
            <?php _e('Username (E-mail Address)', 'iii-dictionary') ?>
 </label>
            <input id="user_login_signup"oninput="check-availability()" class="form-control" name="user_login" type="text" value="" required>

hieudien · December 25, 2018, 10:18am

đây không phải là “hàm” bạn ạ.
để mình phân tích đoạn code trên nhé:

Đoạn này là sử dụng jquery để trỏ tới phần tử có id = ‘check-availability’

Đoạn này là add một function không tên (anonymous function) cho event click của phần tử được trỏ tới phía trước.

Để sử dụng oninput, bạn cần tạo một hàm xử lí check, rồi gọi hàm đó trong oninput.

hieudien · December 25, 2018, 10:19am

Bạn xem lại định nghĩa thế nào là 1 hàm nhé

hieudien · December 25, 2018, 10:24am

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_oninput
Bạn xem demo này rất dễ hiểu.