Usando la función Ajax jQuery $.post() , estoy enviando datos de formulario jQuery serialized() a una función PHP que los recibe con éxito en $_POST[] pero las variables individuales $_POST['form_field'] están vacías.
En mi función PHP, print_r($_POST) muestra correctamente los datos del formulario:
Array ( [action] => send_message [data] => modal_name=olivier&modal_email=olivier%40hotmail.com&modal_message=Hello+world ) Sin embargo, $_POST['modal_name'] , $_POST['modal_email'] y $_POST['modal_message'] están vacíos. ¿Por qué?
HTML:
<form id='contact'> <input type='text' name='modal_name' id='modal_name' /> <input type='email' name='modal_email' id='modal_email' /> <textarea name='modal_message' id='modal_message'></textarea> </form>JS:
$('#contact').on('submit', function(e) { e.preventDefault(); if (modal_name && modal_email && modal_message) { var data = { action: 'send_message', data: $(this).serialize() }; $.post(WPaAjax.ajaxurl, data, function(response) { $('.modal').append(response); }); } });use $(this).serializeArray() en lugar de $(this).serialize()
Referencia: - https://api.jquery.com/serializeArray/
La diferencia entre ambos:- https://stackoverflow.com/a/10430571/4248328
Tienes que hacer lo siguiente: -
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id='contact'> <input type='text' name='modal_name' id='modal_name' /> <input type='email' name='modal_email' id='modal_email' /> <textarea name='modal_message' id='modal_message'></textarea> <input type="submit" value = "submit"> </form> <script type="text/javascript"> $('#contact').on('submit', function(e) { e.preventDefault(); if (modal_name && modal_email && modal_message) { var data = $(this).serializeArray(); data.push({name: 'action', value: 'send_message'}); $.post('query.php', data, function(response) { $('.modal').append(response); }); } }); </script>Y en php:-
<?php if(!empty($_POST)){ echo "<pre/>";print_r($_POST); } ?>Saldrá así: -
<pre/>Array ( [modal_name] => sdsadsa [modal_email] => a@gmail.com [modal_message] => sadada [action] => send_message ) Nota: - si desea usar serialize() solo, haga lo siguiente: -
<script type="text/javascript"> $('#contact').on('submit', function(e) { e.preventDefault(); if (modal_name && modal_email && modal_message) { var data = $(this).serialize()+ '&action=send_message'; $.post('query.php', data, function(response) { $('.modal').append(response); }); } }); </script>Debería usar $_POST['data']['modal_name'] , $_POST['data']['modal_email'] y $_POST['data']['modal_message'] en su lugar. También use $.serializeArray() de jQuery.
La razón es que envía datos de formulario como param llamado data .