There is a form that I want to force to send data using ajax and receive a message about the successful submission, but I can not understand: why click works, but there is no submit . here fidl

 $('.confirmation').click(function() { console.log("click is"); }); $('.confirmation').submit(function() { console.log("submit is"); $.ajax({ type: 'POST', url: '/system/wpacert', data: $("#form_id").serializeArray(), success: function(data) { $(".confirmation").magnificPopup({ items: { src: '#confirmation', type: 'inline' } }); alert('sucsess'); // проверяем работу скрипта в случае успеха }, error: function() { alert('fail'); // проверяем работу скрипта в случае неудачи } }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://rawgithub.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script> <script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script> <link rel="stylesheet" href="https://rawgithub.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css"> <form id="form_id" action="/system/wpacert" method="post" enctype="multipart/form-data" name="certform"> <input type="text" value="Имя" /> <input type="password" value="Пароль" /> <div>Сертификат: <input type="file" name="cert1" /> </div> <div> <input class="confirmation" type="submit" value="Добавить" /> </div> </form> <div id="confirmation" class="mfp-hide"> <h2>Результат</h2> <p>Имя</p> <p>Пароль</p> <p>Сертификат №</p> </div>

  • 2
    Because the form must be submitted, not the input)) $('form').submit(function() { - Aleksey Shimansky

1 answer 1

Sumbit need to point to the form and not the button

  $('#form_id').submit(function(e) { //что бы страница не перезагружалась e.preventDefault(); console.log("submit is"); $.ajax({ type: 'POST', url: '/system/wpacert', data: $("#form_id").serializeArray(), success: function(data) { $(".confirmation").magnificPopup({ items: { src: '#confirmation', type: 'inline' } }); alert('sucsess'); // проверяем работу скрипта в случае успеха }, error: function() { alert('fail'); // проверяем работу скрипта в случае неудачи } }); });