DrFlor
(DrFlor)
20.Апрель.2020 23:28:53
#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 и изображение одним запросом?
AlexP
(Alex P.)
21.Апрель.2020 06:13:43
#2
FormData и jQuery serialize думаю не надо смешивать (если вы не хотите всё в виде одной строки как тут).
В append надо по одному элементу передавать.
по-моему это не соответствует коду выше, тут же parent это вся форма, а не 4 элемента до чекбокса.
DrFlor
(DrFlor)
21.Апрель.2020 09:58:11
#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 уже их обработает как мне надо и сделает своё дело.
AlexP
(Alex P.)
21.Апрель.2020 10:55:36
#4
Если serialize
не умеет сериализовывать файлы, то выкинуть его и использовать только FormData
, в цикле append
для каждого элемента.
Тут вроде бы пример похожего: https://stackoverflow.com/a/48380888/964478
DrFlor
(DrFlor)
21.Апрель.2020 12:18:42
#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);
}
});
});
AlexP
(Alex P.)
21.Апрель.2020 12:55:02
#6
Вместо цикла со счетчиком лучше через селектор найти чекбоксы и потом если checked
, то добавлять эту группу (через parent
или siblings()
). Так не будет непонятных магических чисел и можно будет потом менять форму не боясь сломать что-то при любом изменении.
DrFlor
(DrFlor)
21.Апрель.2020 13:25:58
#7
А можно пример а то я только изучаю JS
AlexP
(Alex P.)
21.Апрель.2020 14:14:57
#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 симпатии
DrFlor
(DrFlor)
21.Апрель.2020 16:03:24
#9
Благодарю Вас вот то что надо. Вы не поверите решение искал неделю наверное. Сначала весь инет перерыл потом уже на форумы пошел за решением.
Этот форум добавляю тоже в избранное к себе
1 симпатия