Как объединить две формы?

Question

[Даниил Чернов]

Есть две формы на странице, допустим:

<form class="haha">
    <input type="text" id="name" name="user_name" />
</form>

<form class="haha">
  <input type="email" id="mail" name="user_email" />
</form>

И есть кнопка где то в другом месте.

Как соединить две этих формы без изменения html?

Comments

[dollar]

Уточните, почему нельзя менять HTML.

[Вадим]

И есть кнопка где то в другом месте

Кнопка чего? Сабмита?
И что значит "соединить"?

Answer 1

[Stalker_RED]

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

У полей формы можно указать атрибут form="some_form_id", тогда вы можете создать форму с имейлом, например.

<form class="haha" id="foo1"> <!--  добавлен id формы -->
  <input type="email" id="mail" name="user_email" />
</form>

И отдельно разместить поле с именем вот так

<input type="text" id="name" name="user_name" form="foo1" /> <!--  внимание на атрибут form -->

При этом оно может быть в любом месте вашей верстки, но обрабатываться будет в составе формы foo1, без скриптов, средствами самого браузера.

Comments

[Даниил Чернов]

Без изменения html....

[n1ksON]

Даниил Чернов, вам сказали, на JS тогда пишите скрипт, который при sumbit одной из форм будет брать значения из обеих и отправлять данные

[Stalker_RED]

Даниил Чернов, набросал скрипт, собирающий всё в одну FormData. Отправку через XHR или fetch добавьте сами.

Не тестировал с файлами, но filename точно не передается, лень было добавлять третий параметр.