Can't send form input with AJAX and get a value returned

Question

Can't send form input with AJAX and get a value returned

635 Views Asked by Marked as Duplicate At 03 April 2025 at 17:57

I tried all the solutions in here (How to Pass Variables and Data From PHP to JavaScript) and here (Submit Form Without Reloading Using jQuery AJAX).

What I want to accomplish is that when I submit a form, it gets sent to a .php file without the user getting redirected to the .php file or the website getting restarted.

Then I want PHP to return a value which either says that registration was successful or that something failed (e.g. username is too long or the email is incorrect).

I've been stuck on this for two days now, I've been trying multiple solutions I found including putting the PHP and HTML code in the same file and somehow run the PHP function on submit (and it would display an error message using echo and script tags).

HTML/JS CODE:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    var oReq = new XMLHttpRequest();

    function reqListener() {
      console.log(this.responseText);
    }

    $('#register').submit(function () {
      oReq.onload = function () {
        alert(this.responseText);
      };
      oReq.open("post", "registeruser.php", true);
      oReq.send();
    });
</script>
</head>
<body>
<form id="register" method="post" accept-charset="UTF-8">
  Username:<br>
  <input type="text" name="u_username" id="id_username" required><br>
  First Name:<br>
  <input type="text" name="u_first" id="id_first" required><br>
  Last Name:<br>
  <input type="text" name="u_last" id="id_last" required><br>
  <input type="submit" value="SUBMIT!">
</form>
</body>
</html>

PHP CODE:

<?php

echo "Starting<br>";

submitRegister();

function submitRegister() {
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
error_reporting(E_ALL);
ini_set('display_errors',1);

function displayAlert($message) {
    echo $json_encode($message);
    die();
}

    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
        $username = $_POST['u_username'];
        $pwd = $_POST['u_firstname'];
        $pwdconfirm = $_POST['u_lastname']);
        // And here go tons of other things like sql/validation/sanitization etc.
        displayAlert("Done.");
    }
    else {
        displayAlert("Failed.");
    }
?>

And yes I know that the AJAX code is completely horrible and invalid, even though I can't seem to find out why.

Original Q&A

There are 2 best solutions below

**Georges O.** · Answer 1

You can use the following method:

On the HTML page, call the PHP page. And parse the json ajax response, and analyze a specific return code. Ex:
- {code: 0, message: "Success"}
- {code: 1, message: "Generic error message : failed"}
- {code: 4: message: "Data not found"}

And to parse the response:

oReq.onload = function () {
  var data = JSON.parse(this.responseText);
  alert('Code ' + data.code);
  alert('Message ' + data.message);
};

On the PHP page: add your code and return value:

Ex:

Header('Content-Type: application/json');
echo json_encode(['code' => $errorCode, 'message' => $message]);

**junkfoodjunkie** · Answer 2

Since you're already loading jQuery, why not just use jQuery? (I've used #register_submit as an id for the click-function, which means you will need to add that id to the submit in the form)

$(document).ready(function() {
 $('#register_submit').click(function(e) {
  e.preventDefault();
  $.post('registeruser.php',$('#register').serialize(),function(data) {
    //parse return data here
  }
 });
});

Can't send form input with AJAX and get a value returned

There are 2 best solutions below

Related Questions in PHP

Related Questions in JQUERY

Related Questions in AJAX

Related Questions in FORMS

Related Questions in PHP-7

Trending Questions

Popular # Hahtags

Popular Questions