0

Есть форма, которую хочу заставить отправлять данные с помощью ajax и получать сообщение об успешной отправке, но не могу понять: почему click отрабатывает, а submit нет. вот фидл

$('.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>

1
  • 2
    Потому, что сабмитеть надо форму, а не инпут)) $('form').submit(function() { 13 мая 2016 в 12:43

1 ответ 1

1

Sumbit нужно указывать на форму а не на кнопку

 $('#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'); // проверяем работу скрипта в случае неудачи 
        }
      });
    });

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.