Страница перезагружается при form.submit() даже при использовании preventDefault()

Question

Прошу помощи. Нужно избавиться от перезагрузки страницы при сохранении формы записи голосового сообщения. Пробовал втыкать 'preventDefault()' (возможно, не туда??), но победить пока не удается. Вот часть кода, относящегося к кнопке Save:

Update: проблема решена уходом от form.submit() и переделкой функции save под AJAX. Может кому пригодится работающий код (см ниже). Оказалось, что form.submit() перехватить и preventDefault невозможно. По крайней мере у меня не получилось.

function initVoiceMailUI() {
    saveButton = document.getElementById("easy_voice_mail_save");
    saveButton.addEventListener("click", save);
}

function updateUI(btnSave) {
    saveButton.style.display = btnSave;
}

function save() {
    var reader = new FileReader();
    reader.readAsDataURL(recordedChunks[0]);
    reader.onloadend = function () {
        var base64data = reader.result;
        var form = document.querySelector("#easy-voice-mail-form");
        form.querySelector("input").value = base64data;
        form.submit();
    }
}

Answer 1

Добавьте обработчик на форму submit

var saveButton = null;
var form = null; // по аналогии с вами

function initVoiceMailUI() {
 saveButton = document.getElementById("easy_voice_mail_save");
 saveButton.addEventListener("click", save);

 form = document.querySelector("#easy-voice-mail-form");
 form.addEventListener('submit', (event) => { 
  event.preventDefault(); 
  // при необходимости вынесите отдельно стрелочную функцию
  // ваш необходимый код тут
 });

}

function updateUI(btnSave) {
 saveButton.style.display = btnSave;
}

function save() {
 var reader = new FileReader();
 reader.readAsDataURL(recordedChunks[0]);
 reader.onloadend = function (m1) { 
    var base64data = reader.result;
    form.querySelector("input").value = base64data;
    form.submit();
 }
}

Answer 2

Как раз form.submit(); и вызывает перезагрузку страницы (точнее происходит переход на URL, указанный в атрибуте action формы). Причем вызов данного метода не перехватывается обработчиками события submit. Если нужно отправить форму без перезагрузки страницы нужно пользоваться AJAX

См. также: https://developer.mozilla.org/ru/docs/Web/API/HTMLFormElement/submit

Answer 3

Update: проблема решена уходом от form.submit() и переделкой функции save под AJAX. Может кому пригодится работающий код (см ниже). Оказалось, что form.submit() перехватить и preventDefault невозможно. По крайней мере у меня не получилось.

function initVoiceMailUI() {
    saveButton = document.getElementById("easy_voice_mail_save");
    saveButton.addEventListener("click", save);
}

function updateUI(btnSave) {
    saveButton.style.display = btnSave;
}

function save() {
    var reader = new FileReader();
    reader.readAsDataURL(recordedChunks[0]);
    reader.onloadend = function () {
        var base64data = reader.result;

        // вот это было первоначальным кодом, но его убрали и заменили + добавили function ajax.
        // var form = document.querySelector("#easy-voice-mail-form");
        // form.querySelector("input").value = base64data;
        // form.submit();

        var form = new FormData();
        var url = document.querySelector("#easy-voice-mail-form").action;

        form.append('easy_voice_mail_message', base64data);
        ajax({
            url: url,
            method: 'POST',
            data: form,
            success: function (response) {
                var button = document.querySelector('easy_voice_mail_save');

                // say to user: data saved.
            }
        })
    }
}

function ajax(options) {
    var request = new XMLHttpRequest();
    var method = options.method || 'GET';
    var url = options.url || window.location.href;
    var success = options.success || null;
    var error = options.error || null;
    var withCredentials = options.withCredentials || false;
    var async = options.async || true;

    // this is a POST data (forms, files, etc)
    var post_data = options.data || null;

    request.open(method, url, async)
    if (success)
        request.onreadystatechange = function () {
            if (request.readyState !== 4) return;

            success(request.responseText, request)
        }

    if (error)
        request.onerror = error;

    return request.send(post_data);
}

БЛОГ НА HUSL

Страница перезагружается при form.submit() даже при использовании preventDefault()

Ответы (3 шт):