Ajax working but getting redirected to processing page php

Question

I want to submit a form in php using Ajax, but I don't know why its not working out. The console logs in my ajax are executing but I'm getting redirected to the page where my form data is processed and inserted into database!

Form

<form id='formData' action="process/profile-settings" method="POST">
         <div class="col-md-8">
              <div class="form-group">
                   <label>Name</label>
                   <input type="text" name="name" class="form-control" value="<?php echo $user->userName(); ?>" disabled />
              </div>
              <div class="form-group">
                   <label>Description/Bio</label>
                   <input type="text" name="bio" class="form-control" value="" />
              </div>
          </div>
<button class="btn d-block mx-auto save" name="save">Save</button>
</form>

Here is my ajax code

 $('document').ready(function(){
            console.log('readyyyy');
            $("#formData").on('submit',function(e){
            e.preventDefault();
            console.log('donwwwww');
            var data = $("#formData").serialize();
            $.ajax({
                async: true,
                url: '../user/process/profile-settings.php',
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                type: 'post',
                success: (response) => {
                    console.log('Doneeeee');
                },
                error: function(status, exception) {
                    alert('Exception:', exception);
                }
            });
        });
        });

Form Processing Code

<?php
    include_once '../../core/init.php';

    $dbqueries = new dbQueries;
    $userId = $_SESSION['userId'];

    if(isset($_POST['save'])){
        echo 'PHP';
        $bio = filter_var($_POST['bio'], FILTER_SANITIZE_STRING);
        echo 'DOneeeeeee';
        if($dbqueries->Query('UPDATE users SET bio = ? WHERE id = ?', [$bio, $userId])){
           return 1;
        }
    }


?>

UPDATED

My form is processed in the 'process/profile-settings'. I've removed .php extension using .htaccess. Whenever I click on save the ajax is processed and I'm getting console.log but I'm getting redirected to the page where my form is processed! Appreciate your help!

Answer 1

$('document').ready(function(){
    console.log('readyyyy');
    $("#formData").on('submit',function(e){
        e.preventDefault();
        console.log('donwwwww');
        var data = $("#formData").serialize();
        $.ajax({
            async: true,
            url: '../user/process/profile-settings.php',
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'post'
        }).done(function( msg ) {
            console.log('Doneeeee');
        }).fail(function( jqXHR, textStatus ) {
            alert( "Request failed: " + textStatus );
        });

    });
});

Answer 2

Your main issue is here, $('#save').on('submit', function(e). You don't have a #save button or form, you have .save. Also, change it back to a click event then you don't need e.preventDefault();, but you need to specify the type as button to prevent the page from reloading.

$('.save').on('click', function(e) {
  console.log('doneeee');
  var data = $("#formData").serialize();
  $.ajax({
    type: 'POST',
    url: 'process/profile-settings.php',
    data: data,
    cache: false,
    success: function(response) {
      console.log(response);
    },
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form id='formData' action="process/profile-settings" method="POST">
  <div class="col-md-8">
    <div class="form-group">
      <label>Name</label>
      <input type="text" name="name" class="form-control" value="<?php echo $user->userName(); ?>" disabled />
    </div>
    <div class="form-group">
      <label>Description/Bio</label>
      <input type="text" name="bio" class="form-control" value="" />
    </div>
  </div>
  <button type="button" class="btn d-block mx-auto save" name="save">Save</button>
</form>