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
– Jay Blanchard, Commented May 12, 2015 at 17:31
Are you trying to increase the value in the database? Then you'll need an update to the db. — Jaakko Kaski
– Jaakko Kaski, Commented May 12, 2015 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
– Twisty, Commented May 12, 2015 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
– Rune, Commented May 12, 2015 at 17:50
A big problem is that it actually refreshes the page when i press the button — Rune
– Rune, Commented May 12, 2015 at 18:09

Community · Accepted Answer · 2017-05-23 12:06:33Z

1

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!

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered May 12, 2015 at 18:10

Randika Vishman

8,1443 gold badges63 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rune Over a year ago

I tried doing everything you wrote but the page still refreshes :S

Randika Vishman Over a year ago

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.

Rune Over a year ago

I even tried adding a <button onclick="return false" Which made it stop refreshing but nothing else happened... nothing in the console and the alert doesnt pop up...

Randika Vishman Over a year ago

Ok, undo those changes and do one thing for the last try with me, remove the 'method="post"' out of the <form method="post"> openning form tag and try doing the form submission. I hope this will work at last!

Collectives™ on Stack Overflow

Update MySQL database on click

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related