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.

@PatoSalazar no, I thought error was an object that comes back from the response and I saw other articles that had error.message being used. I tried just using error and printing it out just prints the word "object" so I assumed it has a property called message and gave it a shot. I am not sure how to view the error from the response. — Nick
– Nick, Commented Aug 6, 2018 at 3:29
@Nick can you console.log the error so that it can easily identity — Raheel Aslam
– Raheel Aslam, Commented Aug 6, 2018 at 3:31
@RaheelAslam where does console.log print out to? How can I view the error? Also I don't know how to get the error to print out. — Nick
– Nick, Commented Aug 6, 2018 at 3:33
@Nick you can console.log(returnedData) and console.log(error) and share the output of both. — Raheel Aslam
– Raheel Aslam, Commented Aug 6, 2018 at 3:36

Louys Patrice Bessette · Accepted Answer · 2018-08-06 04:03:59Z

2

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...

edited Aug 6, 2018 at 4:03

answered Aug 6, 2018 at 3:51

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Nick Over a year ago

When I check logs, nothing gets printed out but it says "Navigated to" and then my server url with username and password parameters in there but no data response.

Louys Patrice Bessette Over a year ago

That's because the form was submitted by the "normal behavior" of the <form> element... Not by .post(). Look for .preventDefault()

Louys Patrice Bessette Over a year ago

If you still hava a "Navigated to"... The normal submit is not prevented and the page reloaded. I added a "look closely" in the code posted in my answer. ;)

Nathan Over a year ago

@Nick The other possibility is that you have the JavaScript code before your form element. Make sure it is after the form element, or wrap it in a $(document).ready callback so it won't run until the HTML has been parsed.

Nathan Over a year ago

@Nick It can be at the top, but what was happening is the JS code was running before the HTML parser reached the form element. In other words the form element did not exist at the time the JS code $('form').on('submit') ran. Typically, you'll want to wrap your code in $(document).ready so the order of the code on the page doesn't matter. But in general, it is better to put JavaScript at the bottom of the page so it doesn't prevent the page from being parsed (if it takes longer to load).

|

gitguddoge · Accepted Answer · 2018-08-06 03:56:35Z

0

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

edited Aug 6, 2018 at 3:56

answered Aug 6, 2018 at 3:37

gitguddoge

1721 silver badge9 bronze badges

3 Comments

gitguddoge Over a year ago

@Nick in the error function parameter change to error:function((error) and console.log(error(jqXHR, textStatus, errorThrown))

Nick Over a year ago

jqXHR is not defined

gitguddoge Over a year ago

@Nick my fault, it should be console.log(error(textStatus, errorThrown))

Collectives™ on Stack Overflow

PHP JQuery Ajax Not Working

2 Answers 2

11 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related