Trying to activate PHP function using button click with AJAX

Question

I am trying to call a PHP script/file that will read data off of an HTML table. I want to press a button so that the PHP script/file will activate and read the data off of the HTML table into a database using MySQL.

My AJAX script is not activating the PHP file.

The HTML button code:

<button type="submit" class="btn btn-md btn-primary btn-block" id="save">Save Workout</button>

The AJAX code:

$(document).ready(function(){
        $("#save").click(function(){
            $.ajax({
                type: 'POST',
                url: 'addWorkoutTEST.php',
                success: function() {
                    alert("hello");
                }
            });
        });
});

The incomplete PHP code (does not contain DB code) - based off of https://brennanhm.ca/knowledgebase/2015/11/import-html-table-into-mysql-table/

<?php

require_once ('simple_html_dom.php');

$table = file_get_html('addWorkout.php');

$db = mysqli_connect('localhost', 'root', '', 'workoutLogger');

foreach($table ->find('tr') as $tr) {    
    $exercise = $tr->find('td', 0)->plaintext;
    $weight = $tr->find('td', 1)->plaintext;
    $sets = $tr->find('td', 2)->plaintext;
    $reps = $tr->find('td', 3)->plaintext;

    $exercise_c = mysqli_real_escape_string($db, $exercise);
    $weight_c = mysqli_real_escape_string($db, $weight);
    $sets_c = mysqli_real_escape_string($db, $sets);
    $reps_c = mysqli_real_escape_string($db, $reps);
}
?>

I can't get a success message to pop up.

Answer 1

What I ended up doing was keeping the and wrapping the button around a form with the action "addWorkoutTEST.php", that did it perfectly.

                <form action="addWorkoutTEST.php">
                    <button type="submit" class="btn btn-md btn-primary btn-block" name="save">Save Workout</button>
                </form>

Answer 2

To prevent the default Form Submit action you just need to add in the event.preventDefault();

Something like this...

$(document).ready(function(){
    $("#save").click(function(event){ // must include event here to match the object in the next line. It can be called anything.
        event.preventDefault(); // Prevent Default Submit
        $.ajax({
            type: 'POST',
            url: 'addWorkoutTEST.php',
            success: function() {
                alert("hello");
            },
            error: function (request, status, error) {
                alert("ERROR: " + request.responseText);
            }
        });
    });
});

If javascript is disabled for whatever reason, you need to decide what action to take. With what you have so far in your answer to your form with the added action, that would be the fallback in such a case. It's something you need to think out and decide upon.