Send Javascript local storage variables to MySql database using JQuery

Question

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>

**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) — Dharman, Oct 04 '21 at 09:08
this is all research for my uni project that starts in April, it all lives on my local computer — Matthew, Oct 04 '21 at 09:47
That doesn't matter even one bit. Just fix the bug instead of making excuses. Sorry if I sound rude, but there's absolutely no excuse to do it the wrong way. Your code is broken whether it's only you using it or not. — Dharman, Oct 04 '21 at 09:49
You need to stop manually checking for errors. Please read: [Should we ever check for mysqli_connect() errors manually?](https://stackoverflow.com/q/58808332/1839439) and [Should I manually check for errors when calling “mysqli_stmt_prepare”?](https://stackoverflow.com/q/62216426/1839439) — Dharman, Oct 04 '21 at 09:49

score 1 · Accepted Answer · answered Oct 04 '21 at 00:44

1

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.

answered Oct 04 '21 at 00:44

Rawley Fowler

1,366
7
15

thanks for the help, pardon my ignorance, but should this go in the same code as the form? so it calls auditConfirm.php – Matthew Oct 05 '21 at 21:53
@Matthew it depends on what route you keep your auditConfirm.php, you'll want the `URL` to correspond with that route on your server. – Rawley Fowler Oct 09 '21 at 18:26

Send Javascript local storage variables to MySql database using JQuery

1 Answers1