CODEWITHSUNDEEP
javascriptphpjqueryajax
Kenshinh
Kenshinh

Reputation: 173

PHP is not returning data to AJAX

I'm testing a login form that submits data via Ajax to the PHP processing file. Once I click the submit button it just redirects me to PHP file and not returning data from PHP. The form is inside a bootstrap modal. I'm just new to jquery and ajax so I hope someone helps. Thanks

HTML

<form action="login-process.php" id="test-form" method="post">
                    <div class="form-group">
                    <input type="hidden" name="login-form">
                        <input type="email" class="form-control form-control-lg" name="login-email" id="loginEmail" placeholder="Email address" required>
                    </div>

                    <div class="form-group">
                        <input type="password" class="form-control form-control-lg" name="login-pass" id="loginPassword" placeholder="Password" required>
                    </div>

                    <button type="submit" class="btn btn-lg btn-block btn-primary mb-4">Sign in</button>
                </form>

JQuery script is placed at site footer after jquery.js cdn

$(document).ready(function(){

    // Process form
    $('#test-form').submit(function(event){

        // get form data
        var formData = {
            'email' :           $('input[name=login-email]').val(),
            'password' :        $('input[name=login-pass]').val();
        };

        // process the form
        $.ajax({
            type        : 'POST', // define the HTTP method we want to use
            url         : 'process.php', // url to send data
            data        : formData, // data object
            dataType    : 'json', // what type of data to expect back from server
            encode      : true
        })
        // using done promise call back
        .done(function(data){

            // log data to console
            console.log(data);

            if (data.email-msg) {
                alert("success");
            }

        });

        // stop the form from submitting and refresing the page
        event.preventDefault();
    });
});

process.php

<?php 

$data = array();    // array to hold pass back data

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

    $email = $_POST['login-email'];
    $password = $_POST['login-pass'];

    $data['email-msg'] = $email;
    $data['pw-msg'] = $password;

    echo json_encode($data);
} ?>

Upvotes: 0

Views: 271

Answers (2)

Gaurav
Gaurav

Reputation: 442

You Have syntax error in javascript code.

change your code 

var formData = {
            'email' :           $('input[name=login-email]').val(),
            'password' :        $('input[name=login-pass]').val();
        };

to 

var formData = {
            'email' :           $('input[name=login-email]').val(),
            'password' :        $('input[name=login-pass]').val()
        };

It will solve the problem

Upvotes: 1

Jose carlos
Jose carlos

Reputation: 36

try this brother 

$(document).ready(function(){
  $('#test-form').on('submit', function(event){
    event.preventDefault();
    $.ajax({
      url:"action="login-process.php" ",
      method:"POST",
      data:$(this).serialize(),
      success:function(data){
        console.log("data send");     
      }
    })
  });
});
<form id="test-form" method="post">
                    <div class="form-group">
                    <input type="hidden" name="login-form">
                        <input type="email" class="form-control form-control-lg" name="login-email" id="loginEmail" placeholder="Email address" required>
                    </div>

                    <div class="form-group">
                        <input type="password" class="form-control form-control-lg" name="login-pass" id="loginPassword" placeholder="Password" required>
                    </div>

                    <button type="submit" class="btn btn-lg btn-block btn-primary mb-4">Sign in</button>
                </form>

Upvotes: 1

Related Questions