ajax jquery concept in php

Question

I am trying to use ajax jquery concept in my application, which is new to me. I have written out the code. But not getting exact output. My code is like:

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<form name="ajax" id="ajax" method="post" action="">
 Username: <input type="text" name="username" id="username" /><br />
 Password: <input type="text" name="pass" id="pass" value="" /><br />
 <input type="submit" name="sub_btn" id="sub_btn" value="Login" />
</form>
<script type="text/javascript">
$(document).ready(function(){
 $('#sub_btn').click(function(){
  var username = $('#username').val();
  var password = $('#pass').val();
  var datastring = "username="+username+"&password="+password;
  $.ajax({
   type:"POST",
   url: "bin/login-process.php",
   data: datastring,
   success: function(){
    alert("Success");
   },
   error: function(){
    alert("Fail");
   }
  });   
 });
});
</script>

and in the bin/login-process.php file I just echo "hello". Now if I am trying to run this page,I am getting the alert message("Fail") but that is for a very very short time and it again redirects to the same page. But I don't want to disappear the alert message until user clicks on the "ok" button.

Answer 1

change your button type from submit to button like this

<input type="button" name="sub_btn" id="sub_btn" value="Login" />

as this is submitting your form with normal POST method, that's why your page is getting redirected.

for checking returned output write your success function like this

success: function(response){
    alert("Success :"+response);
}

Answer 2

You have two ways to fix this problem.

1. Change the button type to "button"

 <input type="button" name="sub_btn" id="sub_btn" value="Login" /> 

2. Modify your click handler

 $(document).ready(function(){ $('#sub_btn').click(function(event){ event.preventDefault(); 

Reason: When you add a submit button to your form, clicking the button trigger a submit event hence submit the form to the provided action, in your case you want to submit your form using Ajax so your should prevent the default behavior by adding event.preventDefault() that means you are preventing default action of the event.

Suggestion:

Instead of hooking click event of the button, hook the submit event of the form, after all people can also submit your form but hitting "Enter" key. This will work for both mouse click and keyboard Enter key.

$(document).ready(function(){
    $('#ajax').submit(function(event){
        event.preventDefault();

Answer 3

Simply update your click handler function like this:

$('#sub_btn').click(function(e){ 
    e.preventDefault();
    ....//all your other code here.

Problem here is that you do not stop default action which is form submit. Some details about preventDefault

Another option is to add return false; at the end of you click function.

I am getting the alert message("Fail") but that is for a very very short time

When you click button, your function is executed and ajax request is started. But you do not stop default action (submit) and browser submit your form as usual. That terminates execution of your ajax call which results in error callback being called.

Answer 4

Please note that the success function is being called incase of an HTTP success (200), so you must be throwing an http error (such as unauthorized), to get the error callback, a more regular way of doing so, is by outputting json in the server, something along the lines of:

$response['Success'] = false;
if ($user = User::tryLogin($username, $password)){
  $response['Success'] = true;
}
echo json_encode($response);

and in the jquery success function, you'll need to do something along the lines:

$('#sub_btn').click(function(){
  var username = $('#username').val();
  var password = $('#pass').val();

  $.post("bin/login-process.php", {username : username, password : password}, function(data){
    if (data.Success){
    // login success
    }
    else{
    // login failed
    }
  },"json");
});

Answer 5

Use This:

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <form name="ajax" id="ajax" method="post" action="">
     Username: <input type="text" name="username" id="username" /><br />
     Password: <input type="text" name="pass" id="pass" value="" /><br />
     <input type="button" name="sub_btn" id="sub_btn" value="Login" />
    </form>
    <script type="text/javascript">
    $(document).ready(function(){
     $('#sub_btn').click(function(){
      var username = $('#username').val();
      var password = $('#pass').val();
      var datastring = $('#ajax').serialize();
      $.ajax({
       type:"POST",
       url: "bin/login-process.php",
       data: datastring,
       success: function(responce){
        alert("Success :"+ responce);
       },
       error: function(){
        alert("Fail");
       }
      });   
     });
    });
    </script>