Как отловить событеие submit через addEventListener?

449
14 июня 2017, 02:14

пытаюсь добавить передаваемые данные при отправке формы пост собствено вот форма

<form id="formMenu" action="/admin/menu/menuget/create" method="post">
   <input id="menuget-key_setup" class="name" name="MenuGet[key_setup]" aria-required="true" type="text">
</form>
<a id="secures" class="btn btn-success col-lg-offset-8 col-md-offset-8 col-sm-offset-6" href="#">Сохранить меню</a>

для того что бы исключить веенье говнокода (отсылка формы по ссылке и много других подванивающих моментов) хотелось бы работать с формой через addEventListener вот скрипт отправки

$("#secures").click(function (e) {
    e.preventDefault();
     $('#formMenu').submit();}

пытаюсь получить отправку формы так

var form = document.getElementById('formMenu');
form.addEventListener('submit', function(ev) {
    alert('yes');
    oData = new FormData(form);
    console.log(oData);
    return false;
});

но форма отправляется, alert не выводится что я делаю не так ? Jquery подключено.

Answer 1

Событие формы submit происходит, только когда сам пользователь производит отправку. Вы же пытаетесь отправить форму из кода на JavaScript. В этом случае событие не генерируется, т.к. считается, что программист сам сделает все необходимые проверки перед вызовом метода submit.

Вам же следует добавить кнопку прямо в форму с помощью тега <input type="submit"> и подходящим образом оформить её.

Но если есть маниакальное желание отправлять форму по щелчку ссылкой (надеюсь, на такой сайт я никогда не попаду), придётся дать имя функции — обработчику отправки и вызывать её из обработчика щелчка. А делать обработку отправки формы всё равно придётся, т.к. вашу форму пока можно отправить, нажав в текстовом поле клавишу ВВОДа на клавиатуре.

Пример реализации первого способа.

$('#formMenu').submit(function(ev) { 
        alert('yes'); 
        //oData = new FormData(form); 
        //console.log(oData); 
        return false; 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<form id="formMenu" action="/admin/menu/menuget/create" method="post"> 
       <input id="menuget-key_setup" class="name" name="MenuGet[key_setup]" aria-required="true" type="text"> 
       <input class="btn btn-success" type="submit" value="Сохранить меню"> 
</form>

Answer 2

alert(ev.type) покажет тип события

READ ALSO
Как заменить ссылку на картинку

Как заменить ссылку на картинку

Есть вот такая библиотека jquery bx-slider

305
сss :checked как добавить класс [требует правки]

сss :checked как добавить класс [требует правки]

Как добавить класс к input:checked в css?

210
когда применять DISPLAY [требует правки]

когда применять DISPLAY [требует правки]

столкнулся с таким вопросом, какогда и какую функцию нам нужно применять? всё ещё не ясно, а я так понимаю играет большую роль например display:fixed...

227