Update MySQL database on click

Question

I am writing a website that needs to update a users credits so that it adds a javascript value to the existing credits in the database on a button click and I can't seem to find out how to do it (I'm very new to ajax so go easy...)

HTML:

<form method="post">
    <input id="depositBtn" type="submit" value="Deposit">
</form>

jQuery

$( "#depositBtn" ).submit( function() {
      $.ajax({
        url: 'deposit.php',
        dataType: 'json',
        type: 'post',
        data: {total: tot},
        success: function(data) {
            alert(data);
        }
    });
});

PHP

$db = new PDO('mysql:host='.$servername.';dbname='.$dbname.';charset=utf8', $username, $password);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$getCredits = $db->prepare("SELECT credits FROM userinfo WHERE steamid = ? ");
$getCredits->bindParam(1, $steamid, PDO::PARAM_INT);
$credits = $getCredits->fetch(PDO::FETCH_ASSOC);
$allcredits = $credits['credits'];
$bank = $_POST['total'];
$result = array(
    'success' => true,
    'credits' => $bank+$allcredits
);
echo json_encode($result);

Have you watched the request / response in the browser's console? — Jay Blanchard, May 12 '15 at 17:31
Are you trying to increase the value in the database? Then you'll need an update to the db. — Jaakko Kaski, May 12 '15 at 17:33
Agreed, if you're adding a deposit to the value in the bank, I would perform an update query first and then return the total balance in the account. — Twisty, May 12 '15 at 17:43
Problem is that the data from the ajax is supposed to be a javascript value which is calculated before.. but it doesnt seem to get posted to the php — Rune, May 12 '15 at 17:50
A big problem is that it actually refreshes the page when i press the button — Rune, May 12 '15 at 18:09
@Rune I've added an explanation and a way to try to prevent the page refreshing in my answer. you better try with it! — Randika Vishman, May 12 '15 at 18:19

score 1 · Answer 1 · edited May 23 '17 at 12:06

It seems like there is no much wrong with your coding, specially regarding the JavaScript which you have put!

But I suggest you the following:

(Assuming: that your alert box shows what is the response from the server in the success block.)

$( "#depositBtn" ).submit( function(e) {
  e.preventDefault();
  console.log('total : '+tot);
      $.ajax({
        url       : 'deposit.php',
        type      : 'POST',
        dataType  : 'json',
        data      : {total: tot},
        success   : function(data) {
            alert(data);
        }
    });
});

What my change to your code is:

1st Change:

$( "#depositBtn" ).submit( function(e) {   // you catch the submit button click event.
  e.preventDefault();  // you prevent the default event of the submit button

2nd Change:

   console.log('total : '+tot);  // which will print your 'tot' variable to web browser
                                 // console before it is sent to your PHP Script.

3rd Change:

   type      : 'POST', // You have put 'post' for the type.

For further reading on preventing the default events read the following question thread!

Note:

Don't forget to check your JS Variables before you send them to the any server side scripts written in any lang. (PHP, Java, Rubi, ...)

Hope this helps!

Cheers!

I tried doing everything you wrote but the page still refreshes :S — Rune, May 12 '15 at 18:42
Oops! ok, Open the web browser console, and reload your page once more! And if it prints out anything JavaScript error to the console then it means that is the root cause of your problem. — Randika Vishman, May 12 '15 at 18:45
Ok, undo those changes and do one thing for the last try with me, remove the 'method="post"' out of the
openning form tag and try doing the form submission. I hope this will work at last! — Randika Vishman, May 12 '15 at 19:36

Update MySQL database on click

1 Answers1