For quite some time now, I've been grappling with a significant issue that has been consuming my attention.
I am determined to implement an auto-check login availability feature in the registration form of my website. My goal is for it to verify the input value once a user exits the input field (on blur). Below is the key section 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>
And here's the script I'm using:
$("#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 (){}
});
});
The find_login.php script I have set up simply checks if the username already exists in the database. If it does, it returns 1; if not, it returns 0 (this part is functioning correctly).
However, after the ajax call, although the find_login.php script returns the correct value, the input field (id="input_login") fails to modify its border and value. In fact, attempting to make any changes yields no results. It seems that following an ajax call, my jQuery script cannot locate any elements on my site. What could be going wrong?
I came across a similar issue at jQuery doesn't work after content is loaded via AJAX, but I am uncertain how to adapt this concept to my script. I have tried nearly everything. Please advise me on what steps to take. Demonstrate how I can alter my script to achieve functionality.
Your assistance is greatly appreciated!