Send Javascript local storage variables to MySql database using JQuery-CodePudding

For what is probably a pretty easy thing to do, I am not sure I have implemented it correctly,

I am trying to send 2 local storage variables that are created using javascript, I understand that this data generated at the client-side and that it needs to be sent server-side, and after trying to get my head around AJAX, I found this https://www.quora.com/Is-it-possible-to-get-localstorage-key-value-into-a-php-variable-If-so-how-can-we-do-it, that pointed me in the right direction.

After looking at a few other tutorials I think I have written the correct code, but after trying it the script doesn't seem to be functioning correctly.

The radio button form functions correctly and will submit data to firebase firestore with no issues, but that is not viable for the rest of the app, so I decided to use mysql database instead.

The problem that occurs, from the console, is that when I click the submit button that is revealed on performing the form action is

Uncaught ReferenceError: firebase is not defined
at HTMLFormElement.<anonymous> (auditConfirm.js:1)

but as far as I can tell I'm not referencing auditConfirm.js in either of the 2 files I am using.

I don't think I have coded it correctly and am quite stumped on where to go from here, If someone could please tell me where I have gone wrong that would be great.

These are the local storage variables created, veneuPercentage & auditPercentage

// output results on page
// local storage has to go at the end as this is the final value of each item.

venueResult.querySelector('span').textContent = `${venuePercentage}%`;
venueResult.classList.remove('hide');
auditResult.querySelector('span').textContent = `${auditPercentage}%`;
auditResult.classList.remove('hide');

formConfirm.classList.remove('hide');

this is the PHP file I have written, auditConfirm.php, that should then access these variables from javascript and send them to the database using a JQuery post method, that allows for a sql query to add them to the database.

<?php

if(isset($_POST["confirmResult"])){

$venueScore = $_POST['jsVenuePercentage'];
$auditScore = $_POST['jsAuditPercentage'];

include('static/connection.php');

$auditQuery = "INSERT INTO bar 13 (venueScore, auditScore, submissionDate) VALUES ('$auditScore', '$auditScore', CURRANT_TIMESTAMP)";

if( !mysqli_query($connection, $auditQuery)){
    echo "Error: ". $auditQuery."<br>". mysqli_error($connection);
    
}
?>

<script>
var localVenuePercentage = localStorage.getItem("venuePercentage"); 
var localAuditPercentage = localStorage.getItem("auditPercentage");

$("confirmResult").click(function(){
    $.post("auditConfirm.php",{jsVenuePercentage: localVenuePercentage});
    $.post("auditConfirm.php",{jsAuditPercentage: localAuditPercentage});
});
</script>

but again, I'm not sure if I have implemented it correctly.

finally this is the section of the form that I have assigned the above script too.

<div class="container blue-grey-text text-lighten-1">
<form class="submitResults-form hide brown lighten-5 p-b-10"> 
        <div class="row">
            <div class="col s3"></div>
            <div class="col s6 center-align">
                <a href="../php/auditConfirm.php"><button class="btn brand waves-effect waves-light red lighten-1" type="post" name="confirmResult" id="confirmResult">Confirm result<i class="material-icons right">send</i></button></a>
            </div>
            <div class="col s3"></div>
        </div>
</form>

CodePudding user response：

When using Ajax I recommend trying the non-shorthand:

   $.ajax({
      type: "POST",
      url: 'auditConfirm.php',
      data: {
                jsAuditPercentage: localAuditPercentage,
                jsVenuePercentage: localVenuePercentage, 
            }
    });

This solution works on my end.