Why data is giving empty for $.post

Question

I am trying to get form values with $('#myform').serialize() but from the alert box it is giving empty Data value, is there any misconfigured I am, my sample code is

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Practise</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <h2>Stacked form</h2>
    <form id="myform">
        <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
        </div>
        <div class="form-group">
            <label for="pwd">Password:</label>
            <input type="password" class="form-control" id="password" placeholder="Enter password" name="password">
        </div>
        <div class="form-group form-check">
            <label class="form-check-label">
                <input class="form-check-input" type="checkbox" name="remember"> Remember me
            </label>
        </div>
        <button type="submit" class="btn btn-primary" id="submit">Submit</button>
    </form>
</div>

</body>
<script>

    $(document).ready(function () {

        $('#submit').click(function () {

            var email = $('#email').val();
            var pass = $('#password').val();

            $.post("save_form.php", $('#myform').serialize(), function(data, status){
                alert("Data: " + data + "\nStatus: " + status);
            });
        });
    });

</script>
</html>

Thanks for the help

Check here: https://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php — Baro, Dec 24 '20 at 09:34

john Smith · Accepted Answer · 2020-12-24T12:44:35.473

you are alerting the response of save_form.php, as you said it´s empty, thats the reason why the alert is empty.

So to check your serialized data you would do this before you send the request, also as an advice, always use console to debug and never alert, because alert will interupt the js execution until dismissed and therefore lead to unexpected behaviour.

To check if the correct data will be sent just do sth like:

var the_data = $('#myform').serialize();
console.log(the_data);
$.post("save_form.php", the_data, function(data, status){
   console.log(data);
});

the second console log will be empty until you do print text in save_form.php, sth like will be sufficent to check if your values arrive:

var_dump($_POST);

you check the whole post array, there should be keys like "email" if everything works

also one of your best friends in those cases is the network inspector in the dev-tools of your browser, you can also see which data is posted, received etc.

Why data is giving empty for $.post

1 Answers1