0

I've been on the struggle with ajax recently. I'm trying to submit an username to "return.php". And if successful i want it to alert the username.

But it's not going to the success: function. Does anyone have input on this? Would be of great help!

    <!DOCTYPE html>
<html lang="en">
<head>
    <title>js login test</title>
    <meta charset="UTF-8">
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" charset="utf8" src="js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
</head>
<body>

<form>
    <input type="text" placeholder="Your username" name="username" id="username">
    <button type="button" id="login-btn" name="login-btn">Login</button>
</form>


</body>
<script>
$(document).ready(function() {
   $(document).on('click', '#login-btn', function() {
       var username = $('#username').val();
       if(username === "") {
           alert("No username found");
       }

       $.ajax({
          url: "return.php",
          method: 'POST',
          data:{
            'username': username,
          },
          success: function(data){
            if(data === "success") {
               alert(username);
            }
          },
           error: function () {
               alert("error");
           }
       });
   });
});
</script>
<script src="js/sweetalert.min.js"></script>
</html>

return.php:

<?php

if(isset($_POST)){
    echo "success";
}

?>
Bas Kruithof
  • 67
  • 8
  • 2
    "But it's not going to the success: function" — How do you know? Is it going to the error function instead? Is an error message displayed in the console? Is it perhaps *going* to the success function but then failing your `if` condition? – Quentin Feb 19 '19 at 14:07
  • try this-> `if(isset($_POST['username']))` ,also i think you have extra comma after username--> ` 'username': username,` – Swati Feb 19 '19 at 14:08
  • @prasanth — It's an HTML response, it's going to be treated as a string, not a boolean. – Quentin Feb 19 '19 at 14:09
  • Inside your success function write console.log(data); and change your ajax error function to contain a parameter e.g. error: function(error).. then inside the error function write console.log(error); now refresh your page and check your console. Would also suggest that you return json from php, and define correct headers in php (https://stackoverflow.com/a/4064468/2906013). – Andrew Larsen Feb 19 '19 at 14:11
  • yes,@Quentin it appears that is going to the error function. Though no errors are displayed in console. I'm not to sure why it's doing it. Will be trying the suggested that i just received. – Bas Kruithof Feb 19 '19 at 14:12
  • You do not cancel the form submission – epascarello Feb 19 '19 at 14:12
  • @epascarello the button has type `button` so it shouldn't submit the form – Robin Zigmond Feb 19 '19 at 14:13
  • 1
    @BasKruithof what do you see as the response code in the network tab when you click the button? Is it 500? Or 404? Or something else? – Robin Zigmond Feb 19 '19 at 14:14

0 Answers0