Як контролювати поведінку відправки форми за допомогою JavaScript

8 Березня 2024 в 21:27 45

При розробці веб-додатків часто виникає потреба управління поведінкою форм на сторінці. Зокрема, може знадобитися запобігти автоматичній відправці форми для проведення додаткових перевірок даних або для виконання асинхронного запиту до сервера. У цій статті ми розглянемо, як використовувати JavaScript для контролю відправки форм і детально зупинимося на рішенні поширеної проблеми з відправкою форми без перезавантаження сторінки.

Підготовка форми

Перш за все, давайте створимо HTML-структуру форми. Важливо, щоб у форми був унікальний ідентифікатор, оскільки це дозволить легко звернутися до неї в JavaScript:

&lt;form id="formDistrict" action="submit"&gt;
    &lt;div class="input-group"&gt;
        &lt;input type="text" id="district_autocomplete" name="district" class="form-control" required&gt;
        &lt;button type="submit" class="btn btn-primary"&gt;Search&lt;/button&gt;
    &lt;/div&gt;
&lt;/form&gt;

<button type="submit" class="btn btn-primary">Search</button>

</div>

</form>

У цьому прикладі ми маємо форму з текстовим полем і кнопкою відправки. Така форма без додаткових налаштувань при натисканні на кнопку відправить дані методом GET або POST (залежно від атрибута method у тегу <form>) і перезавантажить сторінку.

Запобігання відправки форми

Щоб запобігти стандартній поведінці відправки форми, ми використаємо метод preventDefault() об’єкта події, який передається як аргумент у функцію обробника події. Додамо обробник події submit на нашу форму:

document.addEventListener("DOMContentLoaded", function() {
    var form = document.getElementById('formDistrict');
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        getPlot();
    });
});

document.addEventListener("DOMContentLoaded", function() {

var form = document.getElementById('formDistrict');

form.addEventListener('submit', function(e) {

e.preventDefault();

getPlot();

});

У цьому коді спочатку додається обробник події DOMContentLoaded, який гарантує, що весь DOM завантажений і готовий до інтерактиву. Після цього для форми додається обробник події submit, у функції якого викликається e.preventDefault() для запобігання стандартній поведінці відправки. Функція getPlot() може містити будь-який користувацький код, наприклад, виконання асинхронного запиту до сервера.

Асинхронна відправка даних з форми

Розглянемо приклад функції getPlot(), яка виконує асинхронний POST-запит до сервера з даними, отриманими з форми:

function getPlot() {
    var district = document.getElementById('district_autocomplete').value;
    var csrf_token = document.querySelector('meta[name="_token"]').content;
    fetch('/get_graph', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrf_token
        },
        body: JSON.stringify({district: district})
    })
    .then(response => response.json())
    .then(data_geojson => {
        drawGraph(data_geojson);
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

function getPlot() {

var district = document.getElementById('district_autocomplete').value;

var csrf_token = document.querySelector('meta[name="_token"]').content;

fetch('/get_graph', {

method: 'POST',

headers: {

'Content-Type': 'application/json',

'X-CSRF-TOKEN': csrf_token

body: JSON.stringify({district: district})

})

.then(response => response.json())

.then(data_geojson => {

drawGraph(data_geojson);

})

.catch(error => {

console.error('Error:', error);

});

}

У цьому прикладі, за допомогою fetch() відправляється POST-запит на адресу /get_graph. У тілі запиту передається JSON-об’єкт з даними з форми. Після отримання відповіді від сервера в форматі JSON, можна обробити ці дані, наприклад, для побудови графіка за допомогою функції drawGraph.

Висновок

Контроль за поведінкою відправки форм за допомогою JavaScript дозволяє розробникам веб-додатків забезпечити більш гнучку та користувацьки орієнтовану взаємодію з користувачем. Запобігання стандартній відправці форми та використання асинхронних запитів для обробки даних форми може знач