How to access PHP super global post variable after AJAX request

Question

I have a form in index.php:

<form action="submit.php" method="post" id="registerSubmit">
    <input type="text" name="name" id="name" placeholder="Name">
    <button id="submit" type="submit">Submit</button>
</form>
<div id="result"></div>

When the form is submitted it gets intercepted by Jquery:

$(document).ready(function(){
    $("#registerSubmit").submit(function( e ) {
    e.preventDefault();
        $.ajax({
            url: "load.php",
            method: "post",
            data: "",
            dataType: "text",
            success: function(Result) {
                $('#result').text(Result)
            }
        })

    });
});

However, when the AJAX request gets sent to load.php. I am not able to access the super global post variable:

<?php
$name = $_POST['name']; 
echo $name;
?>

I'm able to access the form data through Jquery, but I didn't want to have to parse JSON to send to Mysql. How can I access the super global post form data after the AJAX request and if it's not accessible, what are best practices for sending php form data through Ajax to Mysql?

Answer 1

You need to pass data through AJAX call

$(document).ready(function(){
    $("#registerSubmit").submit(function( e ) {
    e.preventDefault();
        $.ajax({
            url: "load.php",
            method: "POST",
            data: $(this).serialize(), // Send all form data to AJAX
            dataType: "text",
            success: function(Result) {
                $('#result').text(Result)
            }
        })

    });
});

Answer 2

You need to pass data through AJAX call When the form is submitted.

 $(document).ready(function(){
        $("#registerSubmit").submit(function( e ) {
        e.preventDefault();

        var name = document.getElementById("name").value;
        var dataString ='name=' + name;
            $.ajax({
                url: "load.php",
                method: "post",
                data: "dataString",
                dataType: "text",
                success: function(Result) {
                    $('#result').text(Result)
                }
            })

        });
    });


In the load.php page

<?php
$name = $_POST['name']; 
echo $name;

// code for insert in mysql with PHP.

?>