Эта форма содержит раскрывающийся список с несколькими опциями с флажками, теперь, когда пользователь выбирает 1 или более флажков и нажимает кнопку отправки, значения должны обрабатываться с соответствующими результатами поиска. Ранее у меня был тег select с тегом option, который использовался для получения результатов. Теперь, так как я добавил функциональность поиска более чем одной опции, я добавил флажки, но теперь я не уверен, как получить результаты.
HTML и Php Code
<form action="<?php the_permalink() ?>" class="ajax-search-form leaders-header" id="searchform" method="post" role="search">
<?php get_template_part( 'blocks/leaderboard/search-form' ) ?>
<div class="sort">
<body>
<?php if ($departments = get_field_object('field_5da06da87ae0f')) : ?>
<div class="sort-item">
<div id="list1" class="dropdown-check-list" tabindex="100">
<span class="anchor" style="font-size: small">All Departments</span>
<ul id="items" class="items" name="department" >
<label for="test">
<?php foreach ($departments['choices'] as $key => $department) : ?>
<input type="checkbox" name="check" id="test" value="unchecked" /> <option style="font-size: small" <?php if ( isset($_REQUEST['role']) and $_REQUEST['role'] == $key) echo 'selected' ?> value="<?php echo $key; ?>">
<?php echo $department; ?></option></label></br>
<?php endforeach; ?>
<input style="font-size: small" type="submit" value="Submit" "/>
</ul>
</div>
</div>
<?php endif ?>
</body>
JavaScript:
<script type="text/javascript">
var checkList = document.getElementById('list1');
var items = document.getElementById('items');
var isChecked = document.getElementById('items').checked;
checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
if (items.classList.contains('visible')){
items.classList.remove('visible');
items.style.display = "none";
}
else{
items.classList.add('visible');
items.style.display = "block";
}
}
items.onblur = function(evt) {
items.classList.remove('visible');
}
</script>