Как перехватить отправку формы

168

01 июня 2019, 02:50

Есть страница, и на этой странице данные загружаются из другого файла с помощью ajax. Так вот как из загружаемых данных перехватить отправку с помощью jquery. Если убрать ajax и сделать все на одной странице, то jquery перехватывает отправку формы.

$(document).ready(function(){
$('form').click(function(){
        var formID = $(this).attr('id');  // Получение ID формы
        var formNm = $('#' + formID);
    $.ajax({
    type: 'POST',
    url: 'config/prop',
    dataType: 'html',
    data: formNm.serialize(),
    traditional: true,
    success:function(data){
var response = JSON.parse(data);
if(response.buy){
    $("#result").fadeIn(500);
} else if (response.profit) {
    $("#toast-container").fadeIn(500);
    $("#result").html(response.profit);
    setTimeout(function() {
$('#toast-container').fadeOut('fast')},7000); //10000 = 10 секунд 
} 
  else 
     alert('hddgh');
},
   error: function(response) {
alert('huevo');
}
});
return false;   
})
});
setInterval(function () {
$("#prop").load("ajax/prop #aprop");
}, 3000);

Answer 1

Если под "перехватить отправку формы" вы подразумеваете "повесить свой обработчик на сабмит формы", то вам следует вешать обработчик либо после добавления формы на станицу, либо вешать обработчик на контейнер, в который вы форму вставляете.

Вот как это делается

// сперва формы нет и мы вешаем обработчик на контйнер (который уже присутствует) 
$('#formWrapper').on('submit', 'form', function(e) { // обратите внимание как вешается событие 
  e.preventDefault(); // выключаем поведение по умолчанию (обычную отправку формы) 
  var formData = new FormData(this); 
  var $output = $('#output'); 
  $output.empty(); 
  for (var value of formData.values()) { 
    var $line = $('<p />'); 
    $line.text(value); 
    $output.append($line); 
  } 
}); 
 
// типа загрузили форму с какого-нибудь урла 
// вставляем её в документ 
$('#formWrapper').html('<form><input name="foo" type="text"><button type="submit">Submit</button></form>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div id="formWrapper">loading...</div> 
<div id="output"></div>