I am working on a simple signup page using jQuery and PHP using AJAX. Here is the script for making the ajax call: and the PHP script which responds to the call: signup.php: using PDO. dbconnect.php: Problem Neither of the two responses are being returned to the jQuery ajax call. I checked with console.log() but nothing shows up in the

No response from PHP on AJAX request

I am working on a simple signup page using jQuery and PHP using AJAX.

Here is the script for making the ajax call:

<script>
    function submitForm(){
      var data1=$('#regform').serialize();
      $.ajax({
        type:'POST',
        url:'signup.php',
        data:data1,
        success: function(response){
          console.log(response);
          if(response==1)
            alert('taken');
            else if(response==2)
              alert('registered');
              else
                alert(response);
        }
      });
    }
  </script>

and the PHP script which responds to the call:

signup.php:

<?php
require_once 'dbconnect.php';
if($_POST) {
    $user_name = $_POST['user_name'];
    $user_email = $_POST['user_email'];
    $user_password = $_POST['password'];  
    try {
        $sth = $dbh->prepare("SELECT * FROM logindata WHERE email=:email");
        $sth->execute(array(":email"=>$user_email));
        $count = $sth->rowCount();   
        if($count==0){    
            $sth = $dbh->prepare("INSERT INTO logindata(username,email,pass) VALUES(:uname, :email, :pass)");
            $sth->bindParam(":uname",$user_name);
            $sth->bindParam(":email",$user_email);
            $sth->bindParam(":pass",$user_password);   
            if(!$sth->execute()) {
                echo "3";  
            } else {
                echo "2";
            }
        } else{    
        echo "1"; 
        }    
    }
    catch(PDOException $e){
        echo $e->getMessage();
    }
}
?>

using PDO.

dbconnect.php:

<?php
  $dbhost='localhost';
  $dbuser='root';
  $dbpass='';
  $dbname='ambitio';  
  try{
    $dbh=new PDO("mysql:host={$dbhost};dbname={$dbname}",$dbuser,$dbpass);
    $dbh->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
  }
  catch(PDOException $e){
    echo $e->getMessage();
  }  
?>

Problem

Neither of the two responses are being returned to the jQuery ajax call. I checked with console.log() but nothing shows up in the browser. Data gets stored in the MySQL database (checked it) which means that execute() is working fine in PHP, but still no alert is shown in the browser. 1 does get returned in case count evaluates to 0.

Also, when I refresh the form without actually submitting the form, I get the error POST 412 (Precondition Failed) at the browser console.

Apache access log

::1 - - [19/Jul/2016:23:51:55 +0530] "GET /ambitio/css/bootstrap.css HTTP/1.1" 304 - "http://localhost/ambitio/signup.html" "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
::1 - - [19/Jul/2016:23:51:55 +0530] "GET /ambitio/css/overboot.css HTTP/1.1" 304 - "http://localhost/ambitio/signup.html" "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
::1 - - [19/Jul/2016:23:51:55 +0530] "GET /ambitio/css/font-awesome.css HTTP/1.1" 304 - "http://localhost/ambitio/signup.html" "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
::1 - - [19/Jul/2016:23:51:55 +0530] "GET /ambitio/js/jquery.js HTTP/1.1" 304 - "http://localhost/ambitio/signup.html" "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
::1 - - [19/Jul/2016:23:51:55 +0530] "GET /ambitio/js/bootstrap.js HTTP/1.1" 304 - "http://localhost/ambitio/signup.html" "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
::1 - - [20/Jul/2016:00:43:36 +0530] "GET /ambitio/signup.html HTTP/1.1" 200 1454 "-" "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
::1 - - [20/Jul/2016:00:43:46 +0530] "POST /ambitio/signup.html HTTP/1.1" 200 1454 "http://localhost/ambitio/signup.html" "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"
::1 - - [20/Jul/2016:00:43:46 +0530] "POST /ambitio/signup.php HTTP/1.1" 200 1 "http://localhost/ambitio/signup.html" "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36"

Form HTML markup

<form method="post" id="regform" onSubmit="submitForm()">
      <input type="text" placeholder="Username" id="user_name" name="user_name" />
      <input type="email" placeholder="Email" id="user_email" name="user_email" />
      <input type="password" placeholder="Password" id="password" name="password" />
      <input type="password" placeholder="Retype password" id="rpassword" name="rpassword" />
      <input type="submit" id="submit"/>
</form>

Answer

Since your form doesn’t contain a url to send to and your onSubmit-Handler (submitForm) doesn’t return false, the form will actually get posted by the browser to the page it’s currently on (which is most likely not capable of processing the form’s POST data) and will just reload the login-form containing page.

The POST will likely be send to your ajax script as well, but your browser won’t wait for the reponse, because it already moved on.

See https://html.spec.whatwg.org/multipage/forms.html#concept-form-submit for further details on the submit process.

Solution would be to either add return false to your submitForm function or to the onSubmit handler (;return false)

Advertisement

Answer