Ajax call php function breaks all javascript functions and page

Question

I'm trying to validate if a username is already taking or not. This onchange of an input field. I already got other checks but they don't work anymore since I added the ajax call. I'm new to ajax and javascript so the error can be there.

the html form:

 <form action="test" method="post"> <input id="username" type="text" placeholder="Gebruikersnaam" name="username" required onchange="checkUserName()"> <br> <input id="email" type="text" placeholder="Email" name="email" required onchange="validateEmail()"> <br> <input id="pass1" type="password" placeholder="Type wachtwoord" name="password1" required> <br> <input id="pass2" type="password" placeholder="Bevestig wachtwoord" name="password2" required onchange="passwordCheck()"> <br> <select name="typeAccount"> <option value="bedrijf">Bedrijf</option> <option value="recruiter">Recruiter</option> <option value="werkzoekende">Talent zoekt job</option> </select> <p id="demo1"> </P> <p id="demo2"> </P> <button type="submit">Scrijf mij in!</button> </form> 

the javascript that I use:

    <script src="jquery.js">
        function passwordCheck(){
            var password1 = document.getElementById('pass1').value;
            var password2 = document.getElementById('pass2').value;

            if(password1 !== password2){
                document.getElementById("pass1").style.borderColor = "#ff3333";
                document.getElementById("pass2").style.borderColor = "#ff3333";
            }else{
                document.getElementById("pass1").style.borderColor = "#1aff1a";
                document.getElementById("pass2").style.borderColor = "#1aff1a";
            }
        }
        function validate(email){
            var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(email);
        }
        function validateEmail(){
            var email = document.getElementById('email').value;
            if(validate(email)){
                document.getElementById("email").style.borderColor = "#1aff1a";
            }else{
                document.getElementById("email").style.borderColor = "#ff3333";
            }
        }
        function checkUserName(){
            var username = document.getElementById('username').value;
            if(username === ""){
                document.getElementById("username").style.borderColor = "#ff3333";
            }else{
                $.ajax({
                    url: "userCheck.php",
                    data: { action : username },
                    succes: function(result){
                        if(result === 1){
                            document.getElementById("username").style.borderColor = "#1aff1a";
                        }else{
                            document.getElementById("username").style.borderColor = "#ff3333";
                        }
                    }
                });
            }
        }
    </script>

The php script I use this is in a different file:

<?php
    include("connect.php");
    $connect = new Connect();
    $username = mysql_real_escape_string($_POST['username']); 
    $result = mysql_query('select username from usermaindata where username = "'. $username .'"'); 
    if(mysql_num_rows($result)>0){  
        echo 0;  
    }else{  
        echo 1;  
    }  
?>

The script and the html form is in the same html-file and the php is in a seperate PHP-file. I just want to check if the name is already in the database or not.

Answer 1

I assume your database connection is perfect.

$username = mysql_real_escape_string($_POST['username']);

change above code to

$username = mysqli_real_escape_string($db_connection,$_REQUEST['action']);

because in your ajax you're doing like

$.ajax({
                    url: "userCheck.php",
                    data: { action : username },
                    succes: function(result){
                        if(result === 1){
                            document.getElementById("username").style.borderColor = "#1aff1a";
                        }else{
                            document.getElementById("username").style.borderColor = "#ff3333";
                        }
                    }
                });

You have not specified request type and you're fetching value using $_POST with different variable name username which is actually value You should use $_REQUEST['action'] And make sure you've added jquery.js file in your html.