I'm getting "Bad request" using ajax in custom WordPress plugin

I am trying to create a form in my first WordPress app, but the moment I send the Post data using $.ajax() I get the error "Bad request".

I tried several solutions, even using Chat GTP, but I can't fix this error.

Any help will be really appreciated.

My JS code:

jQuery(document).ready(function($) {
    // Verificar si my_ajax_obj está definido
    if (typeof my_ajax_obj !== 'undefined') {
        console.log(my_ajax_obj);
        
        // Capturamos el evento submit del formulario
        $("#dhl_guias_form").on("submit", function(event) {
            event.preventDefault();
            
            // Serializamos los datos del formulario y los convertimos en JSON
            var formData =  $("#dhl_guias_form").serialize()

            console.log(formData);
    
         
            
      
          
            // Realizamos la solicitud POST utilizando $.ajax
            jQuery.ajax({

                type: "POST",
            
                url: my_ajax_obj.ajax_url,        
                
                data: formData,
                action: 'astral_save_form',
                beforesend: function(){
                    alert("hello");
                    console.log("ajax");                    
                    console.log(my_ajax_obj);
                    console.log(my_ajax_obj.ajax_url);
                },
                nonce: my_ajax_obj.nonce,
                
               
                success: function(response) {
                    // Éxito en la solicitud
                    console.log(response);
                    console.log("OK");
                },
                error: function(xhr, status, error) {
                    // Error en la solicitud
                    console.log(error);
                    console.log("error");
                }
            });
        });
    } else {
        console.log("my_ajax_obj no está definido");
    }
});

My PHP code:

<?php
/*
Plugin Name: Astral
Plugin URI: https://www.ejemplo.com
Description: Descripción del plugin.
Version: 1.0
Author: Tu Nombre
Author URI: https://www.tunombre.com
*/

// Activar el plugin
register_activation_hook(__FILE__, 'astral_plugin_activation');

function astral_plugin_activation() {
    // Código para activar el plugin
    global $wpdb;
    $table_name = $wpdb->prefix . 'dhl_guias'; // Nombre de la tabla
    $charset_collate = $wpdb->get_charset_collate();
    $sql = "CREATE TABLE $table_name (
        id INT NOT NULL AUTO_INCREMENT,
        nombre VARCHAR(100) NOT NULL,
        direccion VARCHAR(100) NOT NULL,
        PRIMARY KEY (id)
    ) $charset_collate;";
    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql);
}

// Desactivar el plugin
register_deactivation_hook(__FILE__, 'astral_plugin_deactivation');

function astral_plugin_deactivation() {
    // Código para desactivar el plugin
}


function astral_create_menu() {
    add_menu_page(
        'Astral',               // Título de la Página
        'Astral Menu',          // Título del Menú
        'manage_options',       // Capability
        'astral-menu',          // Slug del Menú
        'astral_menu_callback', // Callback para mostrar el contenido del menú
        'dashicons-admin-generic', // Icono
        1                       // Posición del menú en el panel de administración
    );
}

add_action('admin_menu', 'astral_create_menu'); // Crear Menú

function astral_menu_callback() {
    // Código para mostrar el contenido del menú Astral
    include plugin_dir_path(__FILE__) . 'astral_visual.php';
}

add_action( 'admin_enqueue_scripts', 'my_enqueue' );
function my_enqueue( $hook ) {
   if ( 'toplevel_page_astral-menu' !== $hook ) {
      return;
   }

   wp_enqueue_script(
      'ajax-script',
      plugins_url( 'js/astral.js', __FILE__ ),
      array( 'jquery' ),
      
   );

   $title_nonce = wp_create_nonce( 'title_example' );
   wp_localize_script(
      'ajax-script',
      'my_ajax_obj',
      array(
         'ajax_url' => admin_url( 'admin-ajax.php' ),
         'nonce'    =>wp_create_nonce( 'nonce' )
         
      )
   );
}

add_action('wp_ajax_astral_save_form', 'astral_save_form');

function astral_save_form() {
    check_ajax_referer('astral_ajax_nonce', 'nonce'); // Verificar el nonce para mayor seguridad

    global $wpdb;
    $table_name = $wpdb->prefix . 'dhl_guias';

    $field1 = sanitize_text_field($_POST['field1']);
    $field2 = sanitize_text_field($_POST['field2']);

    $wpdb->insert(
        $table_name,
        array(
            'id' => NULL,
            'nombre' => $field1,
            'direccion' => $field2
        )
    );

    wp_die(); // Finaliza la ejecución de la solicitud AJAX
}

My form (astral_visual.php):

<form id="dhl_guias_form" method="POST">
    <input type="text" name="field1" placeholder="Campo 1" /><br>
    <input type="text" name="field2" placeholder="Campo 2" /><br> 
    <button type="submit" id="save" name="save">GUARDAR</button>
</form>

Solution

There are some mistakes and errors in your code.

Note: As Stack Overflow is an English-speaking community, I have translated mostly everything.

The PHP main plugin code:

<?php
/*
Plugin Name: Astral
Plugin URI: https://www.example.com
Description: Plugin description.
Version: 1.0
Author: Your name
Author URI: https://www.yourname.com
*/

// Plugin activation - Create 'dhl_guias' table in database
register_activation_hook(__FILE__, 'astral_plugin_activation');
function astral_plugin_activation() {
    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');

    global $wpdb;
    
    dbDelta("
        CREATE TABLE {$wpdb->prefix}dhl_guias (
        id INT NOT NULL AUTO_INCREMENT,
        nombre VARCHAR(100) NOT NULL,
        direccion VARCHAR(100) NOT NULL,
        PRIMARY KEY (id)
    ) {$wpdb->get_charset_collate()}");
}

// Plugin deactivation
register_deactivation_hook(__FILE__, 'astral_plugin_deactivation');
function astral_plugin_deactivation() {
    // your code
}

// Add a menu in the WordPress admin
add_action('admin_menu', 'astral_create_menu'); 
function astral_create_menu() {
    add_menu_page(
        'Astral',               // Page title
        'Astral Menu',          // Menu title
        'manage_options',       // Capability
        'astral-menu',          // Menu slug
        'astral_menu_callback', // The function to be called for content output
        'dashicons-admin-generic', // Icon
        1                       // Position in the Admin menu order
    );
}

// Function called by the menu
function astral_menu_callback() {
    // Code to display the content (calling an external file)
    include plugin_dir_path(__FILE__) . 'astral_visual.php';
}

// Register JavaScript external files
add_action( 'admin_enqueue_scripts', 'my_enqueue' );
function my_enqueue( $hook ) {
   if ( 'toplevel_page_astral-menu' !== $hook ) {
      return;
   }

    wp_enqueue_script( 'astral-ajax-script', 
        plugins_url( 'js/astral.js', FILE ), 
        array( 'jquery' ),'1.0.0', true ); 

   wp_localize_script(
      'astral-ajax-script',
      'astral_params',
      array(
         'ajax_url' => admin_url( 'admin-ajax.php' ),
         'nonce'    => wp_create_nonce( 'astral_nonce' )
      )
   );
}

add_action('wp_ajax_astral_save_form', 'astral_save_form');
function astral_save_form() {
    // Check the Ajax request to prevent external insecure requests
    check_ajax_referer('astral_nonce', 'security'); 

    global $wpdb;

    if( isset($_REQUEST['form_data'])) {
        $data = array(); // initializing
        parse_str($_REQUEST['form_data'], $data);  

        if( isset($data['fullname'])  && isset($data['address'])
        && ! empty($data['fullname']) && ! empty($data['address']) ) {

            // Inserting the some data in the database
            $wpdb->insert( "{$wpdb->prefix}dhl_guias",  array(
                'id' => NULL,
                'nombre' => sanitize_text_field($data['fullname']),
                'direccion' => sanitize_text_field($data['address'])
            ) );
            echo "Success! The data has been saved to the database";
        } else {
            echo "Warning: Some form fields have not been filled";
        }
    } else {
        echo "Warning: The form data has not ben sent";
    }
    wp_die(); // End silently (mandatory)
}

The HTML form (added to astral_visual.php external file):

<form id="dhl-guias" method="POST">
    <label for="fullname">Nombre completo:</label><br>
    <input type="text" id="fullname" name="fullname" placeholder="Agrega tu nombre completo aquí" /><br>
    <label for="address">Dirección:</label><br>
    <input type="text" id="address" name="address" placeholder="Añade tu dirección aquí" /><br><br>
    <button type="submit" id="save" name="save">Guardar</button><br>
    <p class="message"></p>
</form>

The jQuery / JavaScript astral.js external file

jQuery( function($) {
    // check that the localized variable astral_params is defined
    if (typeof astral_params !== 'undefined') {
        console.log(astral_params);
        
        // On submitting the form event
        $('form#dhl-guias').on('submit', function(e) {
            e.preventDefault(); // Stop default form post action
            
            // Serializing form data
            var formData =  $(this).serialize()

            // Sending the post request via Ajax
            $.ajax({
                type: "POST",
                url: astral_params.ajax_url,
                datatype: 'json',
                data: { 
                    'action': 'astral_save_form',
                    'form_data': formData,
                    'security': astral_params.nonce
                },
                beforesend: function( xhr ){
                    console.log("beforesend");
                    console.log(xhr);                    
                },
                success: function(response) {
                    $('form p.message').html(response); // add a message

                    console.log("success");
                    console.log(response);
                },
                error: function(xhr, status, error) {
                    console.log("error");
                    console.log(xhr);
                    console.log(error);
                }
            });
        });
    } else {
        console.log('"astral_params" is not defined');
    }
});

Tested and works. When the form is filled, an entry is added to the database table.