Кнопка 2-й формы отправляет 1-ую форму, которая не имеет кнопки отправки

Question

У меня есть 2 формы на одной странице.

Форма 1

<form id="form1" method="get" action="action1.php">
  <input type="text" id="input1">
</form>

Эта форма отправлена:

$('#input1').on('keydown', function(e) {
  if (e.keyCode == 13) {
    $('#form1').submit();
  }
});

, так как я не хочукнопка отправки в этой форме.

2-я форма:

<form id="form2" method="post" action="action2.php">
  <input type="text" id="input2">
  <button type="submit">Save</button>
</form>

Теперь, если я нажму кнопку на 2-й форме, она отправит 1-ую форму.Не уверен, почему это происходит, поскольку кнопка отправки находится внутри второго тега <form>.

Также;поскольку форма 1 будет присутствовать на многих страницах (это строка поиска на панели навигации), я хотел бы «доказать будущее», чтобы не столкнуться с проблемами в будущем при размещении нескольких страниц на странице.В идеале это означало бы, что эта проблема исправлена ​​путем изменения формы 1.

Обновление

Глупая ошибка ...!У меня было $('form:first').submit(); на <button type="submit">Save</button> где-то еще в моем коде, поэтому первая форма была отправлена ​​...

Answer 1

внести это изменение в форму 2

<form id="form1" method="get" action="action1.php">
  <input type="text" id="input1">
</form>
    
<form id="form2" method="post" action="action2.php">
  <input type="text" id="input2">
  <button type="submit" form="form2">Save</button>
</form>

прочитайте это, чтобы узнать больше об атрибуте формы

Answer 2

Что-то еще происходит.

попробуйте нажать ввод в этих двух полях - вы увидите, что сценарий не нужен

$("form").on("submit",function(e) {
  e.preventDefault();
  console.log(this.id + " submitted");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1" method="get" action="action1.php">
  <input type="text" id="input1"> Submits on enter
</form>
<hr/>
<form id="form2" method="post" action="action2.php">
  <input type="text" id="input2"> Submits on enter or on click
  <button type="submit">Save</button>
</form>