Отправка данных и файлов формы через ajax, jquery

Web Frontend: JavaScript, HTML/CSS
#1

Здравствуйте.
У меня есть форма с группами

<form action="" id="ttt" method="POST">
  
  <input type="text" name="lol[]" value="1.1"><br>
  <input type="text" name="wow[]" value="1.2"><br>
  <input type="text" name="low[]" value="1.3"><br>
  <input type="text" name="wol[]" value="1.4"><br>
  <input type="checkbox" name="checkbox[]"><br>
  <hr>
  
  <input type="text" name="lol[]" value="2.1"><br>
  <input type="text" name="wow[]" value="2.2"><br>
  <input type="text" name="low[]" value="2.3"><br>
  <input type="text" name="wol[]" value="2.4"><br>
  <input type="checkbox" name="checkbox[]"><br>
  <hr>
  
  <input type="text" name="lol[]" value="3.1"><br>
  <input type="text" name="wow[]" value="3.2"><br>
  <input type="text" name="low[]" value="3.3"><br>
  <input type="text" name="wol[]" value="3.4"><br>
  <input type="checkbox" name="checkbox[]"><br>
  <hr>
  <input type="text" name="lol[]" value="4.1"><br>
  <input type="text" name="wow[]" value="4.2"><br>
  <input type="text" name="low[]" value="4.3"><br>
  <input type="text" name="wol[]" value="4.4"><br>
  <input type="checkbox" name="checkbox[]"><br>
  <hr>
  
  <input type="submit" name="wowlolwow">  
</form>

При активном checkbox мне нужно отправить ту или иную группу с помощью ajax и обработать данные с помощью php.
Данную задачу решил таким способом при активном checkbox навешиваю class active и отправляю через serialize данные

$('#ttt input[type=checkbox]').click(function () {
      $(this).parent().toggleClass('active');
});
var inp = $('.active :input').serialize();
 
$.ajax({
     type: 'POST',
     url: 'My_URL.php',
     data: inp,
     success: function(html){
     $('#status').html(html);
     }
  });
     return false;
});

Все данные отправляются я их обрабатываю и получаю нужный мне результат. Но вопрос встал в том что бы в этой же форме отправить еще изображение.
Пробовал сделать так

var inp = $('.active :input').serialize();
  
     var fd = new FormData();    
     fd.append( 'inp', inp);
 
$.ajax({
     url: 'My_URL.php',
     processData: false,
     contentType: false,
     type: 'POST',
     data: fd,
     success: function(html){
     $('#status').html(html);
     }
  });
     return false;
});

Так за место массива кторый я получал раньше в php

Array (
Array ( 
[data_1] => Array ( [0] => test 1 )
[data_2] => Array ( [0] => test 2 )
[checkbox] => Array ( [0] => on )
)

Получаю вот такой ответ

Array (
[inp] =>
datas_1%5B%5D=test%5B%5D1
&data_2%5B%5D=test%5B%5D2
&checkbox%5B%5D=on
)

Как мне передать данные выбранной группы активного checkbox и изображение одним запросом?

#2

FormData и jQuery serialize думаю не надо смешивать (если вы не хотите всё в виде одной строки как тут).
В append надо по одному элементу передавать.

по-моему это не соответствует коду выше, тут же parent это вся форма, а не 4 элемента до чекбокса.

#3

Прошу прощения забыл дописать что бв передать ту или иную группу я их обвязал блоками div и привел каждую группу к такому виду

<div>
   <input type="text" name="lol[]" value="1.1"><br>
   <input type="text" name="wow[]" value="1.2"><br>
   <input type="text" name="low[]" value="1.3"><br>
   <input type="text" name="wol[]" value="1.4"><br>
   <input type="checkbox" name="checkbox[]"><br>
   <hr>
</div>

все блоки переписывать не буду так как они все одинаковы. так что при выборе я отправляю не всю форму.

То что смешивать не надо это я понимаю. Вопрос тогда в том как мне передать именно группами?
Мне надо выбрать какие то checkbox и отправить их на обработку, а дальше php уже их обработает как мне надо и сделает своё дело.

#4

Если serialize не умеет сериализовывать файлы, то выкинуть его и использовать только FormData, в цикле append для каждого элемента.

Тут вроде бы пример похожего: https://stackoverflow.com/a/48380888/964478

#5

Спасибо за помощь. Решение предварительно найдено на другом форуме. (не пишу адрес что бы не рекламировать его)

$('#ttt').submit(function (e) {
    e.preventDefault();
    var fd = new FormData();
    var elements = $('#ttt')[0].elements;
    var len = elements.length;
    for (var i = 4; i < len; i += 5) {
        if (elements[i].checked)
            for (var j = i - 4; j <= i; j++)
                fd.append(elements[j].name, elements[j].value);
    }
    $.ajax({
        data: fd,
        cache: false,
        contentType: false,
        processData: false,
        method: 'POST',
        success: function (html) {
            $("#result").html(html);
        }
    });
});
#6

Вместо цикла со счетчиком лучше через селектор найти чекбоксы и потом если checked, то добавлять эту группу (через parent или siblings()). Так не будет непонятных магических чисел и можно будет потом менять форму не боясь сломать что-то при любом изменении.

#7

А можно пример а то я только изучаю JS

#8 
<form action="" id="myForm" method="POST">
    <div class="group">
        <input type="text" name="lol[]" value="1.1"><br>
        <input type="text" name="wow[]" value="1.2"><br>
        <input type="text" name="low[]" value="1.3"><br>
        <input type="text" name="wol[]" value="1.4"><br>
        <input type="checkbox" name="checkbox[]"><br>
        <hr>
    </div>

    <div class="group">
        <input type="text" name="lol[]" value="2.1"><br>
        <input type="text" name="wow[]" value="2.2"><br>
        <input type="text" name="low[]" value="2.3"><br>
        <input type="text" name="wol[]" value="2.4"><br>
        <input type="checkbox" name="checkbox[]"><br>
        <hr>
    </div>

    <input type="submit" name="wowlolwow">
</form>


$('#myForm').submit(function (e) {
    e.preventDefault();

    var fd = new FormData();

    var checkedCheckboxes = $('#myForm .group input[type="checkbox"]:checked');

    checkedCheckboxes.each(function(i, checkbox) {
        var group = $(checkbox).parent();
        var serializedElements = group.children().serializeArray();
        serializedElements.forEach(function(el) {
            fd.append(el.name, el.value);
        });
    });
    
    $.ajax..............
});

https://jsfiddle.net/05agcq1e/3/

2 лайка
#9

Благодарю Вас вот то что надо. Вы не поверите решение искал неделю наверное. Сначала весь инет перерыл потом уже на форумы пошел за решением.

Этот форум добавляю тоже в избранное к себе

1 лайк