Нет, не нужно делать ее асинхронной, из формы и синхронно получится данные собрать.
1. Если вдруг вы переделаете форму так, чтобы у полей были name, то можете выбросить функцию getSaveData и использовать $(form).serialize();
2. сбор данных не обязательно записывать в переменную, да еще и объявленную через let. Можно делать прямо вот так:
$.ajax({
url: 'www.expample.ru/file.php',
type: 'POST',
data: { data: getSaveData() }, // переменная data не нужна
// ...
})
или, если у ваших полей есть имена
$.ajax({
url: 'www.expample.ru/file.php',
type: 'POST',
data: { data: $(form).serialize() },
// ...
})
и можно использовать встроенный в браузер способ
$.ajax({
url: 'www.expample.ru/file.php',
type: 'POST',
data: { data: new FormData(form) },
// ...
})
Кроме того, довольно странно делать отправку данных только по клику по кнопке. Обычно формы также отправляются при нажатии enter, и она таки отправится средствами самого браузера, "мимо" вашего ajax-ового отправлятора.
Соответственно правильнее будет куак-то так:
const $form = $("#idForm");
$form.on('submit', function(evt) {
evt.preventDefault(); // отмена обычной отправки
$.ajax({
type: "POST",
url: $form.attr('action'),
data: $form.serialize(),
// ...
А если вам вдруг не нужна поддержка очень старых браузеров, то можно вообще выбросить jQuery
const form = document.getElementById('myForm');
form.addEventListener('submit', function(evt){
evt.preventDefault();
fetch(form.action, {
method: 'POST',
body: new FormData(form)
});
});
https://developer.mozilla.org/ru/docs/Web/API/Fetc... 
