jQuery Ajax not working with $.ajax()

Question

I am trying use for fetching data and displaying it through jQuery. This is my script

<script>
    $("#kys_SignUp_form").submit(function(event){
    event.preventDefault();

    var $form = $(this);
    var $url = $form.attr('action');
    var $email = $("#email").val();
    var $username = $("#username").val();
    var $password = $("#password").val();

    $.ajax({
          type: 'POST',
          url: $url,
          data: { email: $email, password: $password, username: $username },

          success: function(data) {
                alert("Transaction Completed!");
           }

            });
    });

 </script>

And this is my form:

 <form role="form" action="kys_SignUp.php" method="post" id="kys_SignUp_form">
   <div class="form-group">
       <label for="email" >Email address:</label>
       <input type="email" style="width: 300px" class="form-control"  name="email" id="email" required>
    </div>

  <div class="form-group">
    <label for="Username" >Username:</label>
    <input type="text" style="width: 300px" class="form-control" name="username" id="Username" required>
   </div>

  <div class="form-group">
     <label for="password" >Password:</label>
     <input type="password" style="width: 300px" class="form-control" id="password" name="password" required>
  </div>

   <button type="submit"  class="btn btn-default">Submit</button>

</form>

I am new to jQuery. The problem that I am facing is the page is being redirected to the php file even after using ajax, I think ajax function is not at all called.

This is my php file:

 <?php 

 include "kys_DbConnect.php";

 $email = $username = $password = "";

if($_SERVER["REQUEST_METHOD"] == "POST"){

    $email = cleanData($_POST["email"]);
    $username = cleanData($_POST["username"]);
    $password = cleanData($_POST["password"]);        
}

$stmt = $con->prepare("SELECT * FROM kys_users WHERE username=? OR email=?");
$stmt->bind_param("ss",$username,$email);
$stmt->execute();
$stmt->bind_result($kys_id,$kys_email,$kys_username,$kys_password);
$stmt->fetch();

    if(isset($kys_username)){
         echo "Username or Email already exists";         
    }  
   else{

        $insert = $con->prepare("INSERT INTO kys_users (username, email, password) VALUES (?, ?, ?)"); 
        $insert->bind_param("sss",$username,$email,$password);
        $insert->execute();
         header("Location: http://localhost/KeyStroke/index.html");
        exit();

   }
function cleanData($data){

    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;        
}
?>

I am not able find out what's wrong with my code.

Add a alert/logging statement in the submit handler to see whether it is getting called — Arun P Johny, Apr 04 '16 at 05:46
@aldrin that doesnt make any difference because submit() will be called with the button is clicked — Sumanth Jois, Apr 04 '16 at 05:46
after `ajax` call add `return false;`. You need to stop form submission from browser. — Yash, Apr 04 '16 at 05:48
I tried adding an alert statement on submit() is called but alert is not being displayed at all ! so that means function is not being called at all? — Sumanth Jois, Apr 04 '16 at 05:51
Try reading this. https://api.jquery.com/ready/. Submit will not trigger because the DOM is not yet ready. — aldrin27, Apr 04 '16 at 05:52
I believe that jquery selectors are case sensitive - `$("#username").val();` vs `id="Username"` — Sean, Apr 04 '16 at 05:56
@Sean ThankYou i changed it . But ajax is not working. Infact it's not been called — Sumanth Jois, Apr 04 '16 at 05:58
@AslamPatel Can i know why??? and the thing is i am not sending a Json. This is how you send data using jquery in post method — Sumanth Jois, Apr 04 '16 at 05:59
@AslamPatel PLEASE go through on how to send post data using jquery — Sumanth Jois, Apr 04 '16 at 06:01
there could be some erros returned from your php script which is not received by `$.ajax`, because you are not handling the errors, so why dont you add a error callback and try to print the error message in your `$.ajax` call. `$.ajax({ url....,error:function(jqXHR jqXHR, String textStatus, String errorThrown ) { console.log('Error:'+errorThrown);}` — dreamweiver, Apr 04 '16 at 06:02
Have you tried wrapping your script in a document ready? ie. `` — Sean, Apr 04 '16 at 06:02
@Sean i did but the thing here is form handler is not being called at all!! — Sumanth Jois, Apr 04 '16 at 06:03
are you sure you do not see any error in Firebug onload of the page or on click of submit? — techie_28, Apr 04 '16 at 06:13
daat being updated?is it inserting fine in the database table? — techie_28, Apr 04 '16 at 06:23
@techie_28 yep, see rafique's answer i am facing one more problem now — Sumanth Jois, Apr 04 '16 at 06:26

Rafique Mohammed · Accepted Answer · 2016-04-04T06:43:52.497

Updated try this :

<form role="form" action="kys_SignUp.php" method="post" id="kys_SignUp_form">
    <div class="form-group">
        <label for="email" >Email address:</label>
        <input type="email" style="width: 300px" class="form-control"  name="email" id="email" required>
    </div>

    <div class="form-group">
        <label for="Username" >Username:</label>
        <input type="text" style="width: 300px" class="form-control" name="username" id="Username" required>
    </div>

    <div class="form-group">
        <label for="password" >Password:</label>
        <input type="password" style="width: 300px" class="form-control" id="password" name="password" required>
    </div>

    <button id="submit_btn"  class="btn btn-default">Submit</button>

</form>

UPDATED 2 :

<script>

      $(function() {
             // Handler for .ready() called.
             $("#submit_btn").on('click',function(event){
         //alert is not being called at all . That means .submit() is never beign called
               alert("hello there");
              event.preventDefault();

              var form = $('#kys_SignUp_form'); //changed from $(this)
              var url = form.attr('action');
              var email = $("#email").val();
              var username = $("#username").val();
              var password = $("#password").val();


                 $.ajax({
                      type: 'POST',
                      url: url,
                      dataType:"json", //<-- add this
                      data: { email: email, password: password, username: username },

                     success: function(data) {
                               if(data.success){
                            window.location.href=data.result;
                          }else {
                            alert("ERROR. "+data.result);
                             }

                             }

                 });

          });



    });
</script>

and in your PHP code

 <?php 

 include "kys_DbConnect.php";

 $email = $username = $password = "";

if($_SERVER["REQUEST_METHOD"] == "POST"){

    $email = cleanData($_POST["email"]);
    $username = cleanData($_POST["username"]);
    $password = cleanData($_POST["password"]);        
}

$stmt = $con->prepare("SELECT * FROM kys_users WHERE username=? OR email=?");
$stmt->bind_param("ss",$username,$email);
$stmt->execute();
$stmt->bind_result($kys_id,$kys_email,$kys_username,$kys_password);
$stmt->fetch();

    if(isset($kys_username)){
         echo json_encode(array("success"=>false,"result"=>"Username or Email already exists"));         
    }  
   else{

        $insert = $con->prepare("INSERT INTO kys_users (username, email, password) VALUES (?, ?, ?)"); 
        $insert->bind_param("sss",$username,$email,$password);
        $insert->execute();
        echo json_encode(array("success"=>true,"result"=>"http://localhost/KeyStroke/index.html"));

   }
function cleanData($data){

    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;        
}
?>

ThankYou for your answer. I have edited my code please check it out now — Sumanth Jois, Apr 04 '16 at 06:11
Thanks a lot it's working, Can you please tell me why .submit() dint work?? — Sumanth Jois, Apr 04 '16 at 06:20
and Rafique now i am facing one more problem. in my php if the username already exists i will display the error using ajax else i want to redirect to a different page . i am using header function in php! after ajax is working i am not able to redirect — Sumanth Jois, Apr 04 '16 at 06:23
php header function wont redirect if called by ajax call I believe. — techie_28, Apr 04 '16 at 06:28
also its better to use `jQuery('#form').serialize()` to prepare form data for submit. — techie_28, Apr 04 '16 at 06:38
i tried it again . ajax() is not being called. it just says hello there and thats it — Sumanth Jois, Apr 04 '16 at 06:40
@Jois what shows in your console? any error or anything undefined? — Rafique Mohammed, Apr 04 '16 at 06:41
he is referring to FIREBUG of mozilla.. or other tools like that. @Jois — techie_28, Apr 04 '16 at 06:44
@Jois i have changed the code. since we are not using .submit() so replace var form=$(this) to var form=$('#kys_SignUp_form') — Rafique Mohammed, Apr 04 '16 at 06:44
tools like firebug or any other browser console will help you monitor Ajax calls & tell you about JavaScript errors if any.It is recommended to use that.. press `F12` if you are testing this on FireFox or `ctrl+shift+i` in chrome. — techie_28, Apr 04 '16 at 06:49

score 1 · Answer 2 · answered Apr 04 '16 at 06:21

<script>

$("#clickbutton").click(function(){


var $url = 'kys_SignUp.php';
var $email = $("#email").val();
var $username = $("#Username").val();
var $password = $("#password").val();


$.ajax({
type: 'POST',
url: $url,
data: 'email='+$email+'&password='+$password+'&username='+$username,

success: function(data) {
alert("Transaction Completed!");

}

});

});
</script>

and also remove action in your form and change your submit button

<button type="button" id="clickbutton"  class="btn btn-default">Submit</button>

madalinivascu · Answer 3 · 2016-04-04T07:27:41.907

Try this function:

<script>

      $(function() {

             $('#kys_SignUp_form button[type="submit"]').on('click',function(event){

               alert("hello there");
              event.preventDefault();

              var form =  $("#kys_SignUp_form");//note here we select the form element to get the url
              var url = form.attr('action');
              var email = form.find("#email").val();
              var username = form.find("#username").val();
              var password = form.find("#password").val();


                 $.ajax({
                      type: 'POST',
                      url: url,
                      dataType:"json", 
                      data: { email: email, password: password, username: username },

                     success: function(data) {
                       if(data.message == "Success") {
                            window.location ='http://localhost/KeyStroke/index.html';
                       } else {alert(data.message)}

                 });

          });



    });
</script>

php:

 include "kys_DbConnect.php";
function cleanData($data){

    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;        
}
function isUser($username,$email)
$stmt = $con->prepare("SELECT * FROM kys_users WHERE username=? OR email=?");
$stmt->bind_param("ss",$username,$email);
$stmt->execute();
$stmt->bind_result($kys_id,$kys_email,$kys_username,$kys_password);
$stmt->fetch();

    if(isset($kys_username)){
       return true;      
    }
}  
function inserNewUser($username,$email,$password)
        $insert = $con->prepare("INSERT INTO kys_users (username, email, password) VALUES (?, ?, ?)"); 
        $insert->bind_param($username,$email,$password);
        $insert->execute();

   }


if($_SERVER["REQUEST_METHOD"] == "POST"){
    $email = cleanData($_POST["email"]);
    $username = cleanData($_POST["username"]);
    $password = cleanData($_POST["password"]);  
    if (isUser($username,$email)) {
      echo json_encode(['message'=>'Username or Email already exists'])
    } else {
      inserNewUser($username,$email,$password);
      echo json_encode(['message'=>'Success']);
    }

} else {
echo json_encode(['message'=>'Error get method not allowed'])
}

I don't know why your submit event wasn't triggering i just addapted Rafique answer and changed the form variable to the form id to get the url — madalinivascu, Apr 04 '16 at 06:51
from what i can see your submit wasn't triggering because it wasn't in a document ready statement — madalinivascu, Apr 04 '16 at 06:53
I already changed it on my answer long ago. you should have edited it in my answer itself rather than posting it separately. Bcz this soultion is incomplete without actual php code. — Rafique Mohammed, Apr 04 '16 at 07:07

score 0 · Answer 4 · edited Apr 04 '16 at 06:11

0

Why Use $ in js variable this is wrong.

Use This One.

var form = $(this);  
var url = $form.attr('action');  
var email = $("#email").val();  
var username = $("#username").val();  
var password = $("#password").val();

edited Apr 04 '16 at 06:11

Vinoth Krishnan

2,925
6
29
34

answered Apr 04 '16 at 05:49

user3305857

1
2

i did but it dint make any difference – Sumanth Jois Apr 04 '16 at 05:53

score 0 · Answer 5 · answered Apr 04 '16 at 06:04

Look at my way, may be it will help you.

$('#frmReportWithparams').submit(function () {        
    $.ajax({
        url: "@Url.Content("~/LeftMenu/SendReportWithParameter")",
        type: "POST",
        data: $('#frmReportWithparams').serialize(),
        success: function (result) {
            if (result.IsSuccess == true) {
                alert("Thank You.")
                $('#modalHomeIndex').dialog('close')
            }
            else {
                alert("'Error Occurs.Try Later.")
                $('#modalHomeIndex').dialog('close')
            }
        }
    })
    return false;
})

actually the code is for C#, but i just set where to post a form in ajax.
look at @Url.content where i passed the values where my form will be posted. and the parameters are serialized in data field.
if you have any other query then ask further...

My problem is that .submit() is never called. Can you please look into that once — Sumanth Jois, Apr 04 '16 at 06:09
yes, debugger will help you to debugg your jquery/javascript code in browser, it's important functionality. also you can add alert when submit is called, so you can check whether your form is posting via jquery or not. — Bharat, Apr 04 '16 at 06:20

score 0 · Answer 6 · answered Apr 04 '16 at 06:12

try this may be this will work

<script> 
$(document ).ready(function() { 
    $('#kys_SignUp_form').on('submit', function(e) {
      e.preventDefault();
    });
});

 // ================ SUBMIT  =====================
$('#kys_SignUp_form .form_submit').on('click', function(e){
    e.preventDefault();
    var $form = $(this);      
    var $email = $("#email").val();
    var $username = $("#username").val();
    var $password = $("#password").val();

    $.ajax({
        type: 'POST',
        url: 'kys_SignUp.php',
        dataType: 'json',
        data: { email: $email, password: $password, username: $username },
        success: function(data) {
            alert("Transaction Completed!");
        },
       error : function( errorThrown) {

         alert('errorThrown ' + errorThrown);
      }
    });
});
</script>

HTML

<form role="form"  method="post" id="kys_SignUp_form">
<div class="form-group">
    <label for="email" >Email address:</label>
    <input type="email" style="width: 300px" class="form-control"  name="email" id="email" required>
</div>

<div class="form-group">
    <label for="Username" >Username:</label>
    <input type="text" style="width: 300px" class="form-control" name="username" id="Username" required>
</div>

<div class="form-group">
    <label for="password" >Password:</label>
    <input type="password" style="width: 300px" class="form-control" id="password" name="password" required>
</div>

<button type="submit"  class="btn btn-default form_submit">Submit</button>

score 0 · Answer 7 · answered Apr 04 '16 at 06:17

You need to do two things.

1- Change var var url = $form.attr('action'); to

var url = $("#kys_SignUp_form").attr('action');

2- Add a return statement just before you submit function ends

complete script will look like below-

<script>
  $( document ).ready(function() {
         // Handler for .ready() called.
         $("#kys_SignUp_form").submit(function(event){

          alert("hello there");
          event.preventDefault();
          var form = $(this);
          var url = $("#kys_SignUp_form").attr('action');
          var email = $("#email").val();
          var username = $("#username").val();
          var password = $("#password").val();

          $.ajax({
                  type: 'POST',
                  url: url,
                  data: { email: email, password: password, username: username },

                 success: function(data) {
                           alert("Transaction Completed!");

                         }
             });
        return false;
      });
});
</script>

jQuery Ajax not working with $.ajax()

7 Answers7