Saving data to database using Jquery - php

Question

I'm creating a browser RPG game. I want to allow a user to save their current stats by updating the mysql db without having to reload the page... So I thought jquery could help.
The user will not be adding their own stats. The stats are generated through user actions, such as solving a challenge. I want the user to be able to save those updated stats to the database whenever they would like.
The issues are:
the jQuery is outputting the echo "saved..." . $stats . ", " . $stats2; before I click the Save button.
When I click save, the database field isn't being updated.
I'm wondering why this isn't working. When I click save, the stats fields shouldn't be 0, but should be the stats that are shown- 11. The database fields should also be updated.
For testing purposes, I've just created js variable var stats that is updated when the arrow keys are pressed.
I call the function updateHUD() to do $('#stats').html(stats); which updates the HTML.
function updateHUD() {
$('#stats').html(stats);
}
Then updateHUD is called after arrow key is pressed.
HTML
<div class="span12">
<button onclick="saveData(stats)" name="input" value="">Save Data</button>
<br /><span id="output"></span><br />
<ul>
<li><b>Stats 1:</b> <span id="stats"></span> </li>
</ul>
</div>
jQuery
//Pass saved data to store in DB
$(document).ready(function() {
saveData();
});
function saveData() {
$.get("php/CRUD.php", {"_input" : $('input[name=input]').val()},
function(returned_data) {
$("#output").html(returned_data);
}
);
}
PHP
<?php
//store all player data in array and save to/update db
include 'DbConnect.php';
session_start();
$stats = (isset($_GET['_input']) ? ($_GET['_input']) : 0);
$formvars = array();
array_push($formvars, $stats);
echo $stats;
echo $_SESSION['username'];
$qry = 'UPDATE users SET stats="'.$stats.'" WHERE username="' . $_SESSION['username'] . '"';
$mysqli->query($qry) or die(mysqli_error($mysqli));
echo "saved..." . $stats;
mysqli_close($mysqli);
?>
Output
saved...0 //this should be 11
Stats 1: 11

Answer 1

You do a
$('input[name=input]').val()
but you have named the submit button "input" instead of adding a input box with this name.
But the question is unclear anyways.
You want to give a user the permission to update his stat with the value that he wants? You should update the question to make it more clear since it does not make much sense at the moment.

Answer 2

First your selector where you are getting your data from is incorrect. You need to either change your html...
<button name="input"></button>
to an...
<input type="button" name="input" />
or change your jQuery selector...
$('input[name=input]')
to select the correct element
$('button[name=input]')
Second you need to make sure your button's 'value=""' actually has data in it when the ajax function is being called.
<button onclick="saveData(stats)" name="input" value="[Data Value Goes Here]">Save Data</button>
Finally the reason your jQuery is outputting before you click the the save button is because you are executing the function as soon as the document loads.
$(document).ready(function() {
saveData();
});
Try something more like this:
HTML
<button name="input" value="[data goes here]">Save Data</button>
JavaScript / jQuery
//Pass saved data to store in DB
$('button[name=input]').on('click', saveData);
function saveData() {
$.get("php/CRUD.php", {"_input" : $(this).val()},
function(returned_data) {
$("#output").html(returned_data);
}
);
}

Answer 3

Also you can try using load:
//Pass saved data to store in DB
$(document).ready(function() {
saveData();
});
$.fn.saveData=function(){
$('#divforload').css('display','none');
$('#divforload').load("php/CRUD.php?stats="+$('#stats').val(),function(){$('#divforload').fadeIn();});
}
//Just call the function onClick...
//Need an input called 'stats'
});