Как заставить срабатывать submit?

Question

[Otrivin]

Здравствуйте!

Имеется сайт на drupal, необходимо сторонним php-скриптом получить данные с заполняемой формы.

Пытался с помощью jQuery собирать поля при сабмите, но скрипт не реагирует на отправку (форму находит, но не срабатывает именно submit - видимо, конфликт с каким-то другим обработчиком, на jsfiddle работает).
Как реализовать задуманное (и почему не навешивается моё событие)?

Код

(function($){
    $(document).ready(function(){
        console.log('скрипт подключился');

        var form1 = $('form#webform-client-form-127');
        console.log('form1 - ' + form1.length + ' штук найдено');

        //предполагается наличие 2-3 разных форм на странице, нужно отслеживать каждую
        //var form2 = $('form#');        
        var formsArray = [form1];

        formsArray.forEach(function(currentForm, index) {
            obrabotkaFormi(currentForm);
        });

        function obrabotkaFormi(currentForm){
            console.log('currentForm - ' + currentForm.length + ' штук найдено');

            $(document).on('submit', currentForm, function(){
                console.log('форма засабмичена');
                var data = currentForm.serialize();
                $.ajax({
                    type: 'POST',
                    url: '/example.php',
                    data: data
                }).done(function() {
                    console.log(data);
                    console.log('success');
                }).fail(function() {
                    console.log(data);
                    console.log('fail');
                });
            });
        }

    });
})(jQuery);

Answer 1

[Ivan Sharapenkov]

var formsArray = [form1]
Это что?

Мне кажется, вам надо использовать такую конструкцию:
$("form").toArray()
Тогда в массиве будут сразу все формы на странице. Если надо отсеить, то можно использовать какой-нибудь data атрибут на нужных формах и выбрать в цикле только те формы, которые имеют этот атрибут.

$data = currentForm.serialize();
Заменить на
var data = currentForm.serialize();
И дальше везде в коде.

Comments

[Otrivin]

Это был пример не самого лучшего кода)

Ок, принято, но что делать с событием submit?

[Ivan Sharapenkov]

Otrivin,
Как-то так, осталось только добавить Ajax

(function($){
  $(document).ready(function() {
    console.log('скрипт подключился');
    var result_div = $('.results');
    var forms = $('form').toArray();
    result_div.append('<p>form - ' + forms.length + ' штук найдено</p>');
 
    forms.forEach(function(current) {
      formHandling(current);
    });

    function formHandling(current){
      $(current).on('submit', function(e){
        e.preventDefault();
        result_div.append('<p>форма засабмичена</p>');
        var data = $(this).serialize();
        result_div.append('<p>' + data + '</p>');
      });
    }
  });
})(jQuery);

Answer 2

[ThunderCat]

1) (ванга мод он)Скорее всего на вашей страничке есть свой скрипт который тоже ловит событие субмита, обрабатывает данные формы и делает субмит формы методом .submit(); В таком случае не генерируется событие, а форма субмитится сразу. Соответственно ваше событие навешенное позже пролетает как фанэра.
решение - попробуйте повесить событие раньше чем родной скрипт. Или повесьте на другое событие(например клик на кнопку субмита)
2)

//предполагается наличие 2-3 разных форм на странице, нужно отслеживать каждую

тогда не проще так?

$(form).on('submit',function(e){
e.preventDefault();
// some code here
})

Comments

[ThunderCat]

Otrivin,

>>попробуйте повесить событие раньше чем родной скрипт
Как это сделать? Просто выполнить скрипт раньше всех остальных? После выполнения отправка форм не сломается?

решайте проблемы по мере их возникновения, ну и в обратную сторону - разбивайте проблемы на более мелкие и решайте их последовательно. для начала я бы попробовал всю вашу хрень с 1 конкретной формой, последовательно:
получить форму(проверить),
получить субмит от нее(проверить),
сделать чтобы все работало (если сломалось)
далее уже скрипты которые ее обрабатывают подключать.

[Otrivin]

ThunderCat,
Да я попытался ее упростить и навесить события на клик по кнопке - изменений нет. Селектор верный.
Выполнить ранее остальных только не пробовал

console.log($('#webform-client-form-127 input[type="submit"]').length);
$('#webform-client-form-127 input[type="submit"]').addClass('itsexist');

$(document).on('click', '#webform-client-form-127 input[type="submit"]', function(e){
  console.log('форма засабмичена');
  e.preventDefault();
  var data = $(this).serialize();
  $.ajax({
      type: 'POST',
      url: '/example.php',
      data: data
  }).done(function() {
      console.log(data);
      console.log('success');
  }).fail(function() {
      console.log(data);
      console.log('fail');
  });
  console.log(data);
});

[ThunderCat]

Otrivin, так пробуйте, что мешает, после вашего запроса возвращайте return true и выполнение пойдет дальше. Только превентдефаулт надо будет убрать вроде.