Почему, не срабатывает submit для второй формы?

Dima83

Новичок
Я создал две формы, чтобы при щелчке на submit, можно было передать, параметры в первую и вторую форму. Использовал для этих целей querySelector и querySelectorAll. При нажатии на submit, получить данные можно только из первой формы, во вторую почему-то не передаётся. Как получить данные в javascript во второй форме?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
    $(document).ready(function(e){   
    
        let form = document.querySelector('form');
          form.onsubmit = function() {
              var input = this.querySelectorAll('input, select, option');
              for(var i = 0; i < input.length; i++)
              {
                 if(input[i].tagName=="INPUT")
                 {
                
                  if(input[i].type!="submit")
                  {
                     alert(input[i].value);
                  }
                  
                 }
                
                 if(input[i].tagName=="SELECT" || input[i].tagName=="OPTION")
                 {
                  
                 }
                
                
              }
          };
        
      });
    </script>
</head><body>
           <form action="" method="post">
              <input name="firstname2" type="text"><br>
              <input name="lastname2" type="text"><br>
            
              <select name="test2">
                   <option value="1">1</option>
                   <option value="2">2</option>
                   <option value="3">3</option>
              </select>
              <input type="submit">
            </form>
            <form action="" method="post">
              <input name="firstname" type="text"><br>
              <input name="lastname" type="text"><br>
              <select name="test">
                   <option value="1">1</option>
                   <option value="2">2</option>
                   <option value="3">3</option>
              </select>
              
              
              <input type="submit">
            </form>
</body>
</html>
 

fixxxer

К.О.
Партнер клуба
Я не очень понял, что ты хочешь сделать, но сейчас ты только на первую форму навешиваешь обработчик.

Кстати, нафига jquery, если везде, кроме $(document).ready, vanilla JS?
$(document).ready легко заменяется на обработку события DOMContentLoaded: http://youmightnotneedjquery.com/
 
Сверху