Как в onclick передать родителя?

Question

[Анастасия]

Здравствуйте. Есть вот такая форма:

<form enctype="multipart/form-data" method="post" id="formFiz1" php="mainfizcheck.php">
	<p>Фамилия Имя Отчество</p>
	<input name="formFIO" type="text">
	<p>Дата рождения</p>
	<input name="formBday" type="text" >
	<input value="Отправить" type="submit" class="btnForm" onclick="submitHandler(event, '#formFiz1')">
</form>

let sendBtn = document.querySelectorAll(".btnForm"); 

function submitHandler(event, nameform){
event.preventDefault();
form = document.querySelector(nameform);
  fetch(form.getAttribute("php"), {
    method: "POST",
    body: new FormData(form)
  })
  .then(response => response.json())
  .then(function(json) { console.log(json); })
  .catch(function(error) { console.log(error); });
}

Форм несколько. Меняется только php файл (он указывается в form, как аттрибут php). Есть ли какой-нибудь более элегантный способ, чем мой?
onclick="submitHandler(event, '#formFiz1')"

Поясняю:
есть формы. Они отправляется на сервер. Мне нужно как-то стандартизировать всё это. Я решила повесить на кнопку в форме id'шник самой формы. Оно работает, но я хотела бы увидеть, как бы поступил профессионал.

Answer 1

[Алексей Ярков]

А чё не вешать обработчик на сабмит формы? Зачем на кнопку? Ну и ваш атрибут php у нормальных пацанов action называется ))

Comments

[Анастасия]

А чё не вешать обработчик на сабмит формы?

это как?

[Алексей Ярков]

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

[Анастасия]

Если кто-то столкнётся такой же ситуацией:
в form дописываем onsubmit:
<form ......... onsubmit="submitHandler(event)">
в js делаем

function submitHandler(event){
event.preventDefault();
form = event.target;
  fetch(form.getAttribute("php"), {
    method: "POST",
    body: new FormData(form)
  })
  .then(response => response.json())
  .then(function(json) { console.log(json); })
  .catch(function(error) { console.log(error); });
}

Answer 2

[Макс]

Как в onclick передать родителя?

https://developer.mozilla.org/ru/docs/Web/API/Elem...

Есть ли какой-нибудь более элегантный способ, чем мой?

class FormSubmitHandler{

    constructor(form){

        this.form = form;

        this.isSending = false;

        this.form.addEventListener('submit', this.onSubmit.bind(this));
    }
    onSubmit(e){

        e.preventDefault();

        // не отправляем форму пока ответ не пришел
        if(this.isSending)
            return;

        const data = new FormData(this.form);

        if(!this.validate(data))
            return;

        this.isSending = true;

        this.send(this.form.getAttribute("php"), data);
    }
    send(url, data){

        fetch(url, {
            method: "POST",
            body: data,
        })
            .then(response => response.json())
            .then(this.onCommit.bind(this))
            .catch(this.onBadRequest.bind(this));
    }
    onCommit(responseData){

        console.log(responseData, this.form);

        this.isSending = false;
    }
    onBadRequest(error){

        console.log(error, this.form);

        this.isSending = false;
    }
    validate(data){

        console.log(data.getAll(), this.form);

        // проверка полей формы
    }
}

///////////////////////////////////////////////

document.querySelectorAll('form').forEach((formElm) => {

    new FormSubmitHandler(formElm);
});