How to define an AJAX action? - php

Question

I am creating a form that submits with AJAX then use $_POST to get the values of the form and enter them into the database. But I don't understand why I have had to define the action inside an input in my form, usually I would just define it inside my js. But if I do this I cannot access the $_POST data. Can someone please explain why this happens.
Here's my code that works;
js
jQuery(document).ready(function($){
jQuery('#add_event_form').on('submit', function(e){
e.preventDefault();
var form = $(this);
var form_data = form.serializeArray();
$.ajax({
url: ajax_url,
type: 'post',
data: form_data,
error : function(response){
console.log(response);
},
success : function(response){
}
});
});
});
php
<?php
add_action('wp_ajax_nopriv_add_event', 'add_event');
add_action('wp_ajax_add_event', 'add_event');
function add_event(){
global $current_user;
global $wpdb;
$user_id = $current_user->ID;
$event_name = sanitize_text_field($_POST['event_name']);
$wpdb->insert('wp_events', array(
'user_id' => $user_id,
'event_name' => $event_name,
) );
die();
}
?>
html
<form action="" method="POST" id="add_event_form">
<h3>ADD EVENT</h3>
<div class="form_row">
<label>Event Name
<input type="text" name="event_name" class="event_name required">
</label>
</div>
<input type="hidden" name="action" value="add_event">
</form>
And heres how I would usually define my action, why does this not work?
jQuery(document).ready(function($){
jQuery('#add_event_form').on('submit', function(e){
e.preventDefault();
var form = $(this);
var form_data = form.serializeArray();
$.ajax({
url: ajax_url,
type: 'post',
// data: form_data,
data: {
action: 'add_event',
data: form_data,
},
dataType: 'json',
error : function(response){
console.log(response);
},
success : function(response){
}
});
});
});
This isn't finished so please excuse any security issues etc.

Answer 1

In your JavaScript you have data: form_data which is an array that contains objects like this {name: "event_name", value: "test"}. Which will result in this:
$.ajax({
url: ajax_url,
type: 'post',
data: {
action: 'add_event',
data: [{name: "event_name", value: "test"}]
}
});
This wont work.
The data property of jQuery's ajax should contain key-value pairs, like this:
$.ajax({
url: ajax_url,
type: 'post',
data: {
action: 'add_event',
event_name: 'test'
}
});
Edit: if you don't want to change your javascript code you could also get the data in PHP by using:
$data = $_POST['data']; // the 'data' array from jQuery's ajax call
$event_name = $data['event_name'];
However, I woulnd't recommend doing it in this way.