Jquery ajax function not working while submitting form - php

Question

I'm trying to submit a form using ajax and php but for some reason my ajax is not working, when I try to hi the submit button it takes me to the page where my form will be process.
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 type="submit" class="btn d-block mx-auto" id="save" name="save">Save</button>
</form>
Ajax Code
$('document').ready(function(e) {
console.log('readyyyy');
$("#save").on('submit', function(e) {
e.preventDefault();
console.log('donwwwww');
var data = $("#formData").serialize();
$.ajax({
async: true,
url: '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);
}
});
});
e.preventDefault();
});
Note: I've removed my .php extension using .htaccess so didn't added .php in action attribute
I don't know why it is not working, I've tried all the possible methods
Appreciate your help