Как отдельной кнопкой отправить форму через общий скрипт XMLHttpRequest и не потерять контекст у формы?

Question

[Mesuti]

Привет!
На сайте все формы отправляются так:

Типовая форма:

<form class="enter">
    <input type="text">
    <button type="submit">Enter</button>
</form>

Отправка:

// берем форму
const enterForm = document.querySelector('.enter');

// вешаем на форму событие при отправке
enterForm.addEventListener('submit', sender);


// УНИВЕРСАЛЬНЫЙ СКРИПТ ОТПРАВКИ ВСЕХ ФОРМ
function sender(e) {
    e.preventDefault();

   // Берем все данные из отправляемой формы, здесь она в this
    var formData = new FormData(this);

   // Собираем объект из данных формы
    formData.forEach(function (value, key) {
        object[key] = value;
    });
    var xhr = new XMLHttpRequest();
    xhr.open('POST', './func/functions.php');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

   // Отправляем объект в виде JSON
    xhr.send('param=' + JSON.stringify(object));
    xhr.addEventListener("readystatechange", () => {
           console.log(xhr.response);
        }
    });
}

Однако, столкнулся с проблемой потери this из лексического пространства, если отправлять форму кнопкой вне формы:

<form class="otherForm">
    <input type="text">
</form>
<button class="otherBtn">Other</button>

ВОПРОС: как сохранить this при отправке формы через общий XMLHttpRequest, если кнопка отправки вне формы ?


Безуспешно пробовал через цепочку функций. Кнопка вызывает отправку формы

document.querySelector('.otherBtn').addEventListener('click', otherSend);
function otherSend() {
   document.querySelector('.otherForm').submit();
} 

document.querySelector('.otherForm').addEventListener('click', sender);

Comments

[Максим Морев]

В e.target ваша форма, а не в this.

[Mesuti]

Максим Морев, Спасибо за ответ. Действительно, она в e.target

Однако, это не решает вопрос отправки формы другой кнопкой через общий скрипт отправки..
Наверное, нужно будет выносить часть функции и делать еще конструкторы..

Answer 1

[Максим Морев]

Привязанное событие "submit" не вызывается, если мы руками триггерим "form.submit()".

Как вариант решения - в каждую форму добавить скрытую кнопку, и чтобы стриггерить submit, тыкать эту кнопку вместо прямого вызова .submit()

У меня, честно говоря, нет ощущения, что это идеальное решение - костыль какой-то, но этот костыль определённо лучше того, что предлагает сам автор.

Comments

[Mesuti]

Спасибо за предложение!
Интересный вариант

Уточните, пожалуйста, чем такое решение лучше, чем у автора? ?

[Максим Морев]

Mesuti, как минимум тем, что этот вариант вызывает событие submit формы, а не работает в обход него.
У событий может быть более одного обработчика.
В вашем случае, если вам понадобится назначить форме ещё один обработчик, вам придётся вызов этого обработчика вешать внутри своей функции sender с тем же самым bind(), что для взгляда стороннего наблюдателя сложнее для восприятия, чем form.addEventListener('submit', ...)

Answer 2

[Mesuti]

ОТВЕТ
Использовать .bind
Тогда у общего скрипта отправки данных нужный this - отправляемая форма

Вариант из моего примера:

// otherForm - переменная с отдельной формой
// otherBtn - переменная с отдельной кнопкой  
otherBtn.addEventListener('click', sender.bind(otherForm))

https://qna.habr.com/answer?answer_id=489919#answe...

Comments

[Максим Морев]

И чего будете делать, когда ещё одна форма появится?
Ещё по одной переменной заведёте для кнопки и для формы?

[Mesuti]

Максим Морев, В целом да, так и делаю. 1 форма = 1 переменная, 1 кнопка = 1 переменная.

Спасибо за ответ.
Задумался над 1 самым универсальным решением