I have the following JS
script :
jQuery('#form-recherche').submit(ajaxSubmit);
function ajaxSubmit(){
var newFormRecherche = jQuery(this).serialize();
jQuery.ajax({
type:"post",
data: {
action: "mon_action",
newFormRecherche: newFormRecherche,
},
url: ajaxurl,
success: function(response){
console.log(response);
}
});
return false;
}
On PHP
side :
add_action( 'wp_ajax_mon_action', 'mon_action' );
add_action( 'wp_ajax_nopriv_mon_action', 'mon_action' );
function mon_action() {
if (isset($_POST["newFormRecherche"])) {
$field1= $_POST["field1"];
$field2= $_POST["field2"];
}
}
As you guessed, I'm able to access $_POST["newFormRecherche"]
while I can't retrieve $_POST["field1"]
nor $_POST["field2"]
.
jQuery serialize()
works properly : I tested newFormRecherche
var with an alert and it is displayed under the right form : $field1=whatever&$field2=anything
.
Normally, I shouldn't have to parse the results in order to access the $_POST[] variables, according to what I've read here, but obviously it's not working. Where does this problem come from ? Should I use something else than data
to pass my arguments ?
EDIT : $_POST["newFormRecherche"]
exists on PHP side, and contains the expected string $field1=whatever&$field2=anything
.
EDIT #2 : Here is an update, according to the interesting remark from @czerspalace and the very detailed post from @bosco. I try here to put what they said in a nutshell, and give some solutions.
The problem here was a double serialization, one made "by hand", one made by jQuery while making the AJAX call. The fact that the $_POST[]
vars can't be properly retrieved on server side comes from data
, that has to match the Wordpress formalism, that is to say : an action
(which is a PHP function) and the data sent (usually, from a form).
Solution by @Bosco - Use the jQuery method
serializeArray()
. In this case, the data sent is composed of 2 objects. In order to properly retrieve the fields on server side, I have to handle an associative array like this :$_POST['newFormRecherche'][0]['name']
and$_POST['newFormRecherche'][0]['value']
. Same thing for the other fields (replacing [0] by other numbers). To solve that, @Bosco proposes below theformFieldsToObject
function which is called on the data, when performing the AJAX call.Solution by @czerspalace - Use the
serialize()
jQuery method, and make a manual deserialization on server side, usingparse_str( $_POST[ 'newFormRecherche' ], $newFormRecherche );
in order to be able to retrieve the fields I want : $newFormRecherche['field1'],...and so on.
In both cases, the data on server side has to be properly sanitized, as data sent by an user via forms always must be. It implies : checking field types, checking (and even truncate) fields length..., in other words : never trust the user.
EDIT #3 : In the case you use FormData
, make sure you add this line within your AJAX call : processData: false,
. However, I didn't implement a full solution with this technique.
$_POST["newFormRecherche"]["field1"]
anf$_POST["newFormRecherche"]["field2"]
$_POST["newFormRecherche"]
) to see if the contains the expected values and writing these values in the question. look also this page : stackoverflow.com/questions/12769982/…$_POST['newFormRecherche']
likeparse_str($_POST["newFormRecherche"], $output);
and then try$output["field1"]