AJAX Wordpress Insert - php

Question

I have a complete/completed button on a custom post type page.
And It works, When someone clicks the button it sends the right data to the db and adds marks it complete but I want to conver this to ajax but the button itself doesn't send any data. I send the post type and the user id to the server based on the post they are on. And I am trying to figure this out.
In single.php
<form action='' method="post" class='comp-btn'>
<input class='workout-submit' id="workout-submit"type='submit' name='complete' value='Complete'/>
</form>
This is the post req
//Inserts row into database
if (isset($_POST['complete'])):
$wpdb->insert('wp_completed_workouts',
array(
userID => $current_userID,
postID => $current_postID,
)
);
endif;
TLDR: I have this post request (that works)I would like to turn into an AJAX call. Cause I don't want it to reload every time someone hits the complete button.

Answer 1

Since you are using Wordpress, AJAX works best in sending data to functions.php.
First, in your html/js file:
$('.comp-btn').on('submit', function(){
$.ajax({
type: 'POST',
url: "../../../../wp-admin/admin-ajax.php",
data: {'action':'sendworkout','complete':$('.workout-submit').val()},
success: function(response){
console.log(response); // shows 'success'
// do things here
}
});
});
Second, in your WP functions.php
add_action('wp_ajax_sendworkout', 'sendworkout');
add_action('wp_ajax_nopriv_sendworkout', 'sendworkout');
function sendworkout(){
$workoutcomplete = $_POST['complete'];
if($workoutcomplete){
//DB insert here
}
wp_send_json_success('success');
}
Note that the 'action' in ajax syntax is referring to the function name in your functions.php, and the 'complete' refers to the $_POST['complete'] in your functions.php