Как привязать 2 разные формы инпута к 1 обработчику js?

Question

[Игорь]

Есть у меня js которые обрабатывает событие клик и отсылает php
а как подключить к существующему js ещё инпутов и сабминтов?

Все должно работать на нативном JS.

вот js КОТОРЫЙ ОБРАБАТЫВАЕТ ВОТ ЭТУ ФОРМУ

<script>
document.getElementById('feedback-form').addEventListener('submit', function(evt){
  var http = new XMLHttpRequest(), f = this;
  evt.preventDefault();
  http.open("POST", "/rabotay_picha.php", true);
  http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  http.send("nameFF=" + f.nameFF.value + "&contactFF=" + f.contactFF.value + "&messageFF=" + f.messageFF.value);
  http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
      alert(http.responseText + ', Ваше сообщение получено.\nНаши специалисты ответят Вам в течении 2-х дней.\nБлагодарим за интерес к нашей фирме!');    
      f.messageFF.removeAttribute('value'); // очистить поле сообщения (две строки)
      f.messageFF.value='';
    }
  }
  http.onerror = function() {
    alert('Извините, данные не были переданы');
  }
}, false);
</script>

<form method="POST" id="feedback-form">
Как к Вам обращаться:
<input type="text" name="nameFF" required placeholder="фамилия имя отчество" x-autocompletetype="name">
Email для связи:
<input type="email" name="contactFF" required placeholder="адрес электронной почты" x-autocompletetype="email">
Ваше сообщение:
<textarea name="messageFF" required rows="5"></textarea>
<input type="submit" value="отправить">
</form>

А мне нужно подключить ещё вот эту форму

<form>
            <label for="name">Имя:</label>
            <input type="text" id="name" class="input" placeholder="Ваше имя" />

            <label for="tell">Номер телефона:</label>
            <input type="tell" id="email" class="input" placeholder="Ваш номер телефона" />

            <input type="submit" class='btn' value="Отправить" />
          </form>

        <button class="btn-close" id="modal_close" type="button" aria-label="close">
          &times;
        </button>

как сделать?

Answer 1

[Дима Паутов]

Засуньте весь код в функцию и передавайте в ней id формы, либо используйте querySelector.

Вот пример через функцию.

var sendForm = function(f, evt){
	  var http = new XMLHttpRequest(), 
  	f = this;

	 evt.preventDefault();
  
  http.open("POST", "/rabotay_picha.php", true);
  http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  http.send("nameFF=" + f.nameFF.value + "&contactFF=" + f.contactFF.value + "&messageFF=" + f.messageFF.value);
  http.onreadystatechange = function() {
    if (http.readyState == 4 && http.status == 200) {
      alert(http.responseText + ', Ваше сообщение получено.\nНаши специалисты ответят Вам в течении 2-х дней.\nБлагодарим за интерес к нашей фирме!');    
      f.messageFF.removeAttribute('value'); // очистить поле сообщения (две строки)
      f.messageFF.value='';
    }
  }
  http.onerror = function() {
    alert('Извините, данные не были переданы');
  }
};

document.getElementById('feedback-form1').addEventListener('submit', function(evt){
    sendForm(this, evt);
}, false);

document.getElementById('feedback-form2').addEventListener('submit', function(evt){
    sendForm(this, evt);
}, false);

Comments

[Игорь]

весь код в функцию?
это ка?

[Игорь]

а вы ща в скайп добавите меня?))

как я понимаю у второго форма создать айди с feedback-form2 ,а инпуты?инфу откуда он будет брать чтобы ее отправить?

[Игорь]

я добавил в вк ваас