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 шт):
доступ к формам странице может быть бы осуществлен либо по индексу document.forms[idx] либо по имени (атрибут name формы )document.forms.form_name.
Вы обращаетесь к форме по имени classOfButton, это непосредственно имя свойства. Очевидно, вы хотели сделать это имя динамическим и получить из переменной, так что следовало обратиться, используя синтаксис document.forms[classOfButton].
вообще вероятно проще добавить формам id и находить их через getElementById.