CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
user7207174
user7207174

Reputation:

How to use a .click function in jQuery

The following code should add 100 to an existing number in a mysql table if the button gets clicked. If I click the button nothing happens, but if I reload the page the function adds 100 to the number. What is wrong with my code?

<?php
define('DBHOST', 'localhost');
define('DBUSER', 'root');
define('DBPASS', '123');
define('DBNAME', 'dbtest');

$conn = mysql_connect(DBHOST,DBUSER,DBPASS);
$dbcon = mysql_select_db(DBNAME);
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
</head>
<body>
<a id="button" class="waves-effect btn deep-orange darken-1">Button 1</a>
</body>

<script>
$("#button").click(function(){
  <?php
  mysql_query("UPDATE users SET test = (test + 100) WHERE userId=1");
  ?>
});
</script>
</html>

Upvotes: 0

Views: 69

Answers (2)

Wesley Smith
Wesley Smith

Reputation: 19571

You cant call PHP code from a jQuery function like that. All the php runs when the page loads and thats it. You can however use jQuery and Ajax to send a message to a php script that processes that message then returns a response. The script can even be in the same actual file like you have (or in a different file altogether) something like this would do:

<?php
define('DBHOST', 'localhost');
define('DBUSER', 'root');
define('DBPASS', '123');
define('DBNAME', 'dbtest'); 
$conn = mysql_connect(DBHOST,DBUSER,DBPASS);
$dbcon = mysql_select_db(DBNAME);

if(isset($_POST['updateTest']){
    $val = $_POST['test'];
    $id + $_POST['userId'];
    // validate inputs and such....
    mysql_query("UPDATE users SET test = (test + 100) WHERE userId=1");
    // send success or error response...
    echo json_encode(['success'=>true]);
    exit; 
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
</head>
<body>
<a id="button" class="waves-effect btn deep-orange darken-1">Button 1</a>
</body>

<script>
$("#button").click(function(){ 
   var count = 100;
   var userId = 1;
   var dataObject= {updateTest: true, test: 100, userId: 1};
   $.ajax({
     type: "POST",
     // url: "page.php", // add this line to send to some page other than the this one
     data: dataObject,
     success: function(response) {
        if(response.success){
              alert('test worked');
        }
        else{
             alert('there was an error')
        }
     },
     error: function(xhr, status, error) { 
         console.log(xhr);
     }
   });    
});
</script>
</html>

Upvotes: 1

curv
curv

Reputation: 3844

As mentioned by the previous poster PHP is server side and Javascript client side so what is actually happening is the following.

When the page is returned back to the user your piece of javascript just looks like the below..

Your MySQL statement here has executed already it can not interact with client side code in this way

<script>
$("#button").click(function(){
  // nothing here.. But your MYSQL statement has executed anyway
});
</script>

Upvotes: 1

Related Questions