Why is my AJAX function executing when page is reloaded?

Question

I want my database to be updated when a button on my webpage is pressed without the page being refreshed. I used an AJAX function to do so, but I noticed that it also executes whenever I reload the page.

What I've done so far: I created an ajax function inside script code to execute whenever the button is clicked and it works just fine. But when I reload the page same thing happens as if I pressed the button.

Here's the script:

$(document).ready(function() {
   $('#delAddress').click(function() {
     <?php
       $sql = "UPDATE billinginfo SET 
       fullname = '',
       address1 = '',
       address2 = '',
       zip = '',
       city = '',
       country = ''
       WHERE username = '$usernameProfile';";
       $result = mysqli_query($dbProfile, $sql);
       ?>
    return false;
   });
});

I want it to execute just as it does right now but without it executing when I reload the page.

@Eddie how do i do it then? and why is this happening? sorry i'm still new. — Bassam, Apr 26 '19 at 10:27
You can't put PHP code inside Javascript functions and expect that to work in any way. PHP is executed completely before the Javascript on the page even starts to load. This code needs a complete rewrite to make any sense. — Amunium, Apr 26 '19 at 10:29
please check https://stackoverflow.com/questions/27716499/how-to-call-a-php-script-function-on-a-html-button-click if it helps — nivendha, Apr 26 '19 at 10:30

ludovico · Answer 1 · 2019-04-26T11:33:13.373

You're mixing 2 different concepts here, the code that sends your ajax call and the code that processes this ajax call in the server. They're different things.

Code to make the ajax call:

On one side, you should have your front-end code, which makes an ajax call. Something like this:

$(document).ready(function() {
   $('#delAddress').click(function() {
    $.ajax({
      url: 'file.php',
      method:'POST',
      data: parameters,
      success: function(msg) {
         //code to execute in the browser when your ajax request has been processed
      }
    })
   });
});

Code to process the ajax call in the server:

On the other side, the code that processes this request and executes your SQL query on the server. Something like this:

<?php

  if(isset($_POST['usernameProfile'])) {

    $usernameProfile = $_POST['usernameProfile'];

    $con = mysql_connect("localhost","username","password"); //replace with your DB credentials
    if (!$con) {
      die('Could not connect: ' . mysql_error());
    }

    $sql = "UPDATE billinginfo SET 
    fullname = '',
    address1 = '',
    address2 = '',
    zip = '',
    city = '',
    country = ''
    WHERE username = $usernameProfile";

    $result = mysql_query($sql,$con);
    echo $result;

    mysql_close($con);
  }
?>

Why is my AJAX function executing when page is reloaded?

1 Answers1