How to intercept ajax call server side

I have been having this trouble for several days and at my wits end now, I am frustrated! I tried making an ajax call to a script using jQuery’s post method but it posts nothing and does not touch the script. I had $.post('server_script.php', $("form").serialize()); and after trying repeatedly, it neither touches/runs the script nor returns any errors. Any functions placed in the done method often run still the php script shows it was not touched.

Now I switched to .ajax:

$('form').on("submit", function(e){
                             e.preventDefault();
				$.ajax({
				type: "POST",
				url: "test.php",
				data: $("form").serialize()
				});
	});

test.php

$name = $_POST["name"];
$email = $_POST["email"];
$rand = mt_rand();

echo $name . "\n" . $email . "\n" . $rand;
var_dump($_POST);

The above outputs the rand alone and my error log shows undefined index for the rest when I run the script on its own.
I also tried passing the data manually as an object {email: "vainglorie@gmail.com"}, didn’t work. Tried parsing it as json, didn’t work. Please someone help me as I am desperate. I have tried asking friends but no one seems forthcoming and I’ve been at this for days now

    $('.submitBtn').on('click', function (e) {
        e.preventDefault();
        var data = $('.groceryForm :input').serialize(); // Put form data into serialize format:

        /* Save Function by grabbing & sending data to saveList.php */
        $.post($('.groceryForm').attr('action'), data, function (info) {
            displayMyTimer(5);
            $('#result').text(info); // Display the result back when saved: 
            displayList();
        }); // End of Save:
        $('#product').val(''); // Clear the input field:
    });

A portion of the form

<form class="groceryForm" action="saveList.php" method="post">

You have to prevent the submit form from firing naturally in HTML (e.preventDefault). Since it looks like you are using jQuery you could use the $.post function instead? I find it easier to use, but you could do it your way also. I posted an old script that I know works as an example. HTH John

You don’t understand; the problem is the php code is not being run at all. I mean, the form serializes properly. When I do

.done(function() {
console.log($("form-div form").serialize());
});

It logs a key/value pair string but the php code remains stagnant i.e. it does not grab the variables thrown by either .post or .ajax

Can you show the html for your form input please? And is serialize() correct, the example code I just saw suggests serializeArray() for form data. And is the URL for the script correct, nothing missing from it? Does your server provide 404 error logging if the ajax tries to call an invalid URL?

Do you see that request in browser’s console when form is submitted?

Yes! I see this also just to be sure

No, I mean the XHR request itself, on the “Network” tab of the DevTools

<div id=form-div>
<form method="POST" action="" >
First Name: <br> <input type="text" name=first_name required pattern="[A-Za-z]{2,}" /> <br> <br>
Last Name: <br> <input type="text" name=last_name required pattern="[A-Za-z]{2,}" /> <br> <br>
Email: <span id=emailReport></span> <br> <input type="email" name='email' id=email required /> <br> <br>
Password: <br> <input type="password" name=password required pattern=".{6,}" title="Password must be six or more characters" /> <br> <br>
Confirm password: <br> <input type=password name=password required /> <br> <br>
<input type=submit value='sign up' />
</form>

</div>
$("#email").on("change", function(){
	$.post('test.php', $("#form-div form").serialize()).done(function() {
console.log($("#form-div form").serialize());
});
				/*$.ajax({
				type: "POST",
				url: "test.php",
				data: $("#form-div form").serialize()
				});*/
	});

test.php


$first_name = $_POST["first_name"];
$last_name = $_POST["last_name"];
$email = $_POST["email"];
$password = password_hash($_POST["password"], PASSWORD_BCRYPT);
$username = $first_name . '_' . $last_name;
$confirm_id = mt_rand();

//added this clause just in case it works miraculously
if(isset($_POST["first_name"])==true){
$first_name=$_POST["first_name"];
}
else {
log("Name value is missing from POST");
}

echo $first_name . "\n" . $last_name . "\n" . $email . "\n" . $username . "\n" . $confirm_id;
var_dump($_POST);
print_r($_POST);

I’d say an id or name attribute would be essential, looking at the sample code I’ve seen. Trouble is, the sample uses the same value for “name” and “id” for the form, so I can’t tell which it’s using. This is the page in case it helps: http://hayageek.com/jquery-ajax-form-submit/

Also, if you use serialize() (or maybe serializeArray() ) to send the data, don’t you need to unserialize it when it arrives in your script?

Sorry. I was missing this “#” but I’ve edited my post now. See my console

OK, so the data is being found. So is it sufficient to put “test.php” in the URL, or should there be more to it?

Sorry. I don’t understand this.

How do I unserialize at the php script? $first_name = unserialize($_POST['first-name']); or $first_name = unserialize($_POST)['first-name'];?

Well, I’m not entirely sure - it just seems logical that it would need to be done. But it doesn’t matter until you’ve got it to actually run the script - at that point, you can display what the script receives and go from there.

ETA - reading a bit more it does seem that it will need to be extracted in the PHP script once it’s running - add var_dump($_POST) at the start of the script to show the incoming data. One post suggested you need:

parse_str($_POST['data'], $_POST);

var_dump post and print_r post both return empty arrays :cry:

So it’s running the script then?

How about using serializeArray()?

It is NOT running the script. I run the first page containing ajax stuff then on another tab I test the php script

Oh, I see. Well, if you’re running it separately it’s not surprising there are no values in the $_POST array, serialize or not. So the issue is still that the script doesn’t run? And you’re sure the URL is correct for the test environment?

Script runs @droopsnoot but no variables

In post #16 you said

But now you say it does run, but no variables.

So, to clarify, does the script run when you call it from your javascript, or not? Without you manually running it in another tab.

1 Like

Apologies over the seeming discrepancies. What I meant in post #16 was “variables not being picked” since it seems I shouldn’t be running the script in another tab; the variables are not static and clear after the caller lets go of it. The script I posted earlier is dummy to test the functionality of the post and ajax methods since I did’nt see them work in the original script I intend running them on. The original script can be found here and the ajax doc original can be found here. Those are where I intend using them. You can replicate it on your localhost and see if anything can be done about it. Thanks a lot.