Javascript auto check login availability

Question

I have a big problem that I've been trying to solve for over a few hours now.

I need to make an auto-check login availability option in my site's registration form. I want it to check the input value after an user leaves the input field (blur). Here is the important part of my HTML:

<div id="wrapper">
    <div id="register_area">
        <p id="register_description">Registration form.</p>

        <form action="security/check_register.php" method="post">

        <div id="register_form">
            <input type="text" name="login" placeholder="Login" id="input_login"/>
            <input type="password" name="password" placeholder="Password" id="input_password"/> <br />
            <input type="password" name="password2" placeholder="Re-type password"/> <br />
            <input type="text" name="mail" placeholder="E-mail"/> <br />
            <input type="text" name="birth_year" placeholder="Birth year (YYYY)"/> <br />
            <input type="submit" value="Register"/>
            <p></p>
        </div>
        </form>
    </div>
</div>

Here's my script:

$("#input_login").blur(function() {
    jQuery.ajax({
        url: "security/find_login.php",
        data:'login='+$("#input_login").val(),
        type: "POST",
        success:function(data){
            if (data) {
                $("#input_login").value = "";
                $("#input_login").style = "border: 2px solid red;"
            }
        },
        error:function (){}
    });
});

My security/find_login.php script just checks if the username already exists in database, if so it returns 1, if no, it returns 0. (This part works well)

So, the problem is... After an ajax call, my find_login.php script returns correct value, but my input field (id="input_login) doesn't change it's border and value. In fact, if I try to change anything, nothing happens. I think that after an ajax call my jQuery script can't see any element on my site. What am I doing wrong?

I found similar problem: jQuery doesn't work after content is loaded via AJAX But I don't know how to apply this idea to my script. I tried almost everything. Please, tell me what to do. Show me how to change my script so that it would work.

Thanks in advance!

include your php script also in the question. try to insert and `alert();` inside the if condition in ajax success to check if its accessing the if condition properly. — Ashraful Islam, Oct 09 '16 at 10:20

score 1 · Answer 1 · answered Oct 09 '16 at 10:24

1

You used native properties editing on a jquery object. You need to use jquery functions on this object:

$("#input_login").val("").css("border", "2px solid red");

answered Oct 09 '16 at 10:24

Danil Gudz

2,233
16
16

Okay, color of the border finally changed! Thank you! :D – puchat Oct 09 '16 at 10:41

score 0 · Answer 2 · answered Oct 09 '16 at 10:25

0

I think the problem is in this statement.

 $("#input_login").value = "";

This statement should be changed to

 $("#input_login").val() = "";

answered Oct 09 '16 at 10:25

Chintan Palan

1,016
1
10
15

Unfortunately, when I tried like this, in Crome's console I get this error: Uncaught ReferenceError: Invalid left-hand side in assignment :( – puchat Oct 09 '16 at 10:34
Gudz Daniel's answer seems to solve my problem, but thank for your help! :) – puchat Oct 09 '16 at 10:42
You can't assing anything to the result of callable. Probably you wanted make it `.val("");` – Paul T. Rawkeen Oct 09 '16 at 11:32
Yes sorry, that was a mistake from my side it is `$('#input_login').val("");` – Chintan Palan Oct 11 '16 at 04:11

Javascript auto check login availability

2 Answers2