Несколько входов с одинаковым именем через POST в php

Question

Есть вот такая форма, которая фильтрует посты по id меток на ajax

 var filter = $('#filter');
filter.submit(function(){
    
    $.ajax({
        url:filter.attr('action'),
        data:filter.serialize(), // form data
        type:filter.attr('method'), // POST
        beforeSend:function(xhr){
            filter.find('.button-filter').text('Processing...'); // changing the button label
        },
        success:function(data){
            filter.find('.button-filter').text('Apply filter'); // changing the button label back
            $('#response').html(data); // insert data
        }
    });
    return false;
});

.filters_list {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.filters_list li {
    margin-right: 10px;
}

.filters_el {
    position: relative;
    cursor: pointer;

}
.filters_el span{
    border: 1px solid #333;
    padding: 10px;
    color: #000;
}

.filters_el input{
    position: absolute;
    top: 4px;
    left: 5px;
    opacity: 0;
}

.filters_el input:checked + span{
    background-color: #000;
    color: #fff;
}

<form action="http://test.loc/wp-admin/admin-ajax.php" method="POST" id="filter" class="filters_box">
  <input type="hidden" name="action" value="myfilter">
  <ul class="filters_list">
    <li class="filters_item"><label class="filters_el"><input type="checkbox" name="filter_tag_id[]" value="2"><span>tag1</span></label></li>
    <li class="filters_item"><label class="filters_el"><input type="checkbox" name="filter_tag_id[]" value="3"><span>tag2</span></label></li>
    <li class="filters_item"><label class="filters_el"><input type="checkbox" name="filter_tag_id[]" value="4"><span>tag3</span></label></li>
    <li class="filters_item"><label class="filters_el"><input type="checkbox" name="filter_tag_id[]" value="5"><span>tag4</span></label></li>
    <li class="filters_item"><label class="filters_el"><input type="checkbox" name="filter_tag_id[]"" value="6"><span>tag5</span></label></li>
    <li class="filters_item"><button class="btn_clearFilters" type="button">Clear Filters</button></li>
    <li class="filters_item"><button class="button-filter">Apply filter</button></li>
  </ul>
</form>

При выборе нескольких чекбоксов, поскольку имена у них одинаковые, то запрос идет такого вида.

action=myfilter&filter_tag_id%5B%5D=2&filter_tag_id%5B%5D=3

Делал по совету который тут описан.

Подскажите, пожалуйста, как в filter_tag_id складывать через запятую значения? Возможно ли легко формировать массив из выбранных значений? (* был уверен что если значения name совпадают, то оно делает массив значений, но нет)

Answer 1

Если вы хотите складывать значения через запятую, то вы можете добавить следующий JavaScript код:

  var form = document.getElementById("filter");
form.addEventListener("submit", function(event) {
  event.preventDefault();

  var tagIds = [];
  var checkboxes = form.querySelectorAll('input[type="checkbox"]:checked');
  for (var i = 0; i < checkboxes.length; i++) {
    tagIds.push(checkboxes[i].value);
  }

  var input = document.createElement("input");
  input.setAttribute("type", "hidden");
  input.setAttribute("name", "filter_tag_id");
  input.setAttribute("value", tagIds.join(","));
  form.appendChild(input);

  form.submit();
});

Этот код создает массив выбранных значений, которые соединяются через запятую, и добавляет новый элемент с типом hidden в форму с именем filter_tag_id и значением соединенных значений.

Answer 2

@Dmitrii Sedov Был прав, что бы забирать варианты массивом, достаточно что б у всех нужных <input type="checkbox" name="filter_tag_id[]" value="3"> были одинаковые атрибуты name="filter_tag_id[]"

Тогда при передаче их на контроллер можно будет забрать эти значения через $my_terms = $_POST['filter_tags_id']; Проверил, работает.

БЛОГ НА HUSL

Несколько входов с одинаковым именем через POST в php

Ответы (2 шт):