Применены атрибуты HX к HTML-форме, но форма по-прежнему отправляется традиционным способом. ⇐ Html

[Anonymous]

Пытаюсь реализовать встроенное редактирование на карте с помощью HTMX. Пользователь нажимает кнопку редактирования, и JS заменяет карточку , содержащуюся в HTML. Элемент формы при отправке должен сделать запрос hx-post, но вместо этого он делает традиционный запрос на отправку.
Пытался воспроизвести проблему на новой странице и получил hx-запрос. для отправки, заменив form.submit() на form.requestSubmit(). Однако на реальной странице это не работает. Попробовал заменить значок svg «подтвердить» настоящей кнопкой отправки, поместил ее в элемент , но проблема все равно не решена.
Вот соответствующие фрагменты кода:
Вот соответствующие фрагменты кода: р>


Personal Details












First Name:
{{user_data.firstname | default('-', true)}}

Last Name:
{{user_data.lastname | default('-', true)}}

Phone:
{{user_data.phone_number | default('-', true)}}




Email:
{{user_data.email | default('-', true)}}

City:
{{user_data.city | default('-', true)}}

Country:
{{user_data.country | default('-', true) }}









Personal Details




























First Name:


Last Name:


Phone:





Email:


City:


Country:



Sumbit






//when DOM is loaded:
document.addEventListener('DOMContentLoaded', () => {
const editBtn = document.querySelector('.pdEdit');
const formTemplate = document.querySelector('template');
const cardContainer = document.querySelector('#personalData');
const ogCard = document.querySelector('#personalData > div');
let editFormContainer; //to be used AFTER the template is added to DOM
editBtn.addEventListener('click', () => {
ogCard.style.display = 'none';
if (editFormContainer == null) { //if form is NOT already added to DOM
cardContainer.appendChild(formTemplate.content.cloneNode(true)); //add the form to DOM
editFormContainer = cardContainer.querySelector('.editFormContainer'); //get the form

//apply event listeners to confirm and cancel buttons:
document.querySelector('.confirm').addEventListener('click', () => {
console.log('svg clicked');
let form = document.querySelector('form');
if(form){
console.log('form found');
form.requestSubmit();
}
else{
console.log('form not found');
}
});

editFormContainer.querySelector('.cancel').addEventListener('click', () => {
editFormContainer.style.display = 'none';
ogCard.style.display = 'block';
});
}
else {
ogCard.style.display = 'none';
editFormContainer.style.display = 'block';
}
});
});



Подробнее здесь: https://stackoverflow.com/questions/789 ... ditionally