WordPress Admin Ajax 400 error, returning 0

Question

I've created an AJAX request to send data to my plugin which will then submit a job application. When submitting the form the page that it is returning is blank other than a 0 and the console is showing a 400 error for admin-ajax.php.

This code has now been updated from Plamen's suggestions, I realise the $data variable now may not be doing anything

The action of my form is below:

<form method="POST" id="job-application-form" action="<?php echo admin_url( 'admin-ajax.php' ) ?>" class="flex lg:flex-row flex-col flex-wrap">

This is the code on my form page:

<script type="text/javascript">
    jQuery(function($) {
        $('#job-application-form').on('submit', function(e) {
            var form = $(this);
            var data = form.serialize();
            
            $.post(form.attr('action'), data, function(response) {
                console.log(form.attr('action'));
                alert('Got this from the server: ' + response);
            });
            
            e.preventDefault();

            return false;
        });
    });
</script>

And this is the code on my plugin function:

<?php

    add_action( 'wp_ajax_submit_post', 'submit_post' );
    add_action( 'wp_ajax_nopriv_submit_post', 'submit_post' );

    function submit_post() { 

        $actual_link = parse_url('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF']);
        $parts = explode('/', $actual_link['path']);
        $job_id = $parts[count($parts)-1];

        $curl = curl_init();

        $firstName = $_POST['firstName'];
        $lastName = $_POST['lastName'];
        $email = $_POST['email'];
        $phone = $_POST['phone'];
        $postcode = $_POST['postcode'];
        // $info = $_GET['info'];

        $data = array(
            'firstName' => $firstName,
            'lastName'  => $lastName,
            'email'     => $email,
            'phone'     => $phone,
            'address'   => $postcode,
        );
        $payload = json_encode($data);

        var_dump($job_id);
        var_dump($payload);

        $token_url = "/home/.token";
        $file = fopen($token_url, "r") or die("Unable to open job ads file!");
        $access_token_new = fread($file,filesize($token_url));

        curl_setopt_array($curl, array(
            CURLOPT_URL => The API URL . $job_id .'/applications',
            CURLOPT_RETURNTRANSFER => true,
            CURLOPT_ENCODING => '',
            CURLOPT_MAXREDIRS => 10,
            CURLOPT_TIMEOUT => 0,
            CURLOPT_FOLLOWLOCATION => true,
            CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
            CURLOPT_CUSTOMREQUEST => 'POST',
            CURLOPT_POSTFIELDS => $payload,
            CURLOPT_HTTPHEADER => array(
                'Authorization: Bearer ' . $access_token_new,
                'Content-Type: application/json',
            ),
        ));

        fclose($file);

        $response = curl_exec($curl);

        curl_close($curl);

        var_dump($response);

        wp_die();
    }

?>

From what I've gathered my ajax request cannot find my plugin function but I'm not sure if I've messed up the naming or what's going on.

Answer 1

You need to pass the payload of the HTTP POST request in a compatible format.

The simplest would be to change your code to the following:

Add a hidden field named "action" with as follows:

<form method="POST" id="job-application-form" action="<?php echo admin_url( 'admin-ajax.php' ) ?>" class="flex lg:flex-row flex-col flex-wrap">
  ...
  <input type="hidden" name="action" value="submit_post">
</form>

Then change your JavaScript implementation like this, no need to get the Ajax URL with PHP, you have it in the <form> action attribute:

jQuery(function($) {
  $('#job-application-form').on('submit', function(e) {
    var form = $(this);
    var data = form.serialize();
      
    $.post(form.attr('action'), data, function(response) {
       console.log(form.attr('action'));
       alert('Got this from the server: ' + response);
    });
    
    e.preventDefault();

    return false;
  });
});