PHP JQuery Ajax Not Working

Question

I have the following script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>
        function createUser(username, password) {

            $.post('/php/Create_User.php', { username: username, password : password},

                function(returnedData){

                    alert(returnedData);

                }).fail(function(error){

                alert(error.message);
            });

        }
    </script>

And I am calling it like this:

 <form onsubmit="createUser(this.username.value, this.password.value)" method="post">
        Username:<br>
        <input type="text" name="username"><br>
        Password:<br>
        <input type="password" name="password"><br><br>
        <input type="submit" value="Submit">
    </form>

Whenever I submit the form, the function gets called but it keeps going into the .fail block but the error message just says "undefined". I do not know how to print out errors or find out why my post is not returning data from my CreateUser page.

Answer 1

Since you use jQuery .post()... Stop using the inline onsubmit attribute. Use a submit event handler where you can prevent the normal submit behavior.

Then if you still have an error, console.log what is returned to determine the nature of the issue.

$("form").on("submit",function(e){  // <-- Look closely here
  e.preventDefault();               //     And here.
  
  var username = $(this).find("[name='username']").val();
  var password = $(this).find("[name='password']").val();
  console.log(username+" "+password);
  
  $.post('/php/Create_User.php', { username: username, password : password})
    .done(function(returnedData){ 
      console.log(returnedData);
    })
    .fail(function(xhr, status, error) {
      console.log(xhr);
      console.log(status);
      console.log(error);
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  Username:<br>
  <input type="text" name="username"><br>
  Password:<br>
  <input type="password" name="password"><br><br>
  <input type="submit" value="Submit">
</form>

The request in this snippet obviously can't work here...

Answer 2

function createUser(username,password){
            $.ajax({
                url : "/php/Create_User.php",
                method : "POST",
                data : { username: username, password : password},
                dataType : "text",
                success:function(data){
                    console.log(data);
                },error:function(xhr,data){
                    console.log(data+xhr);
                }
            })
        }

I'm not sure what's wrong with your code but you can try mine tho, by the way try to remove the "method=post" in the form tag.
Using console.log and watch the output in Chrome by pressing F12 and go to console tab