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>
2
Answers
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:
The HTML form (added to astral_visual.php external file):
The jQuery / JavaScript astral.js external file
Tested and works. When the form is filled, an entry is added to the database table.