Пытаюсь реализовать встроенное редактирование на карте с помощью 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
