undefine выражение в xnlhttprequest при попытке подключиться к форме

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

Uncaught TypeError: Cannot set property 'onsubmit' of undefined at HTMLInputElement.deleteNew

Код:

var el = document.getElementById('delete');
  if (el){
    document.getElementById('delete').addEventListener('click', deleteNew);
    function deleteNew(e){
      classOfButton = "form" + el.className;
      document.forms.classOfButton.onsubmit = function(e){
        e.preventDefault();
        console.log(1);
        let xhr = new XMLHttpRequest();
        xhr.open('POST', 'delete.php', true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function(){
            if (xhr.readyState === 4 && xhr.status === 200){
                servResponse.textContent = xhr.responseText;
            }
            
        }
        xhr.send('id=' + classOfButton);
      };
    }
  }
<form name="form1">   
  <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" class="button" id="read-full1">Читать полностью</a>
  <input type="submit" name="1" value="Удалить" class="1" id="delete">
  <a href="#" class="button 1" id="change1">Редактировать</a>
  <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" class="button" id="make-cool1">Сделать круто</a>
</form>


Ответы (1 шт):

Автор решения: teran

доступ к формам странице может быть бы осуществлен либо по индексу document.forms[idx] либо по имени (атрибут name формы )document.forms.form_name.

Вы обращаетесь к форме по имени classOfButton, это непосредственно имя свойства. Очевидно, вы хотели сделать это имя динамическим и получить из переменной, так что следовало обратиться, используя синтаксис document.forms[classOfButton].

вообще вероятно проще добавить формам id и находить их через getElementById.

→ Ссылка