PHP is not returning data to AJAX

Question

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);
} ?>

you have syntax error in your javascript code

Gaurav
– Gaurav

2020-03-22 05:55:34 +00:00
Commented Mar 22, 2020 at 5:55 — Gaurav
– Gaurav, Commented Mar 22, 2020 at 5:55

Jose carlos · Accepted Answer · 2020-03-22 03:49:02Z

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>

Gaurav · Accepted Answer · 2020-03-22 05:58:03Z

1

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

answered Mar 22, 2020 at 5:58

Gaurav

4423 silver badges7 bronze badges

Collectives™ on Stack Overflow

PHP is not returning data to AJAX

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related