Я работаю над проектом, который включает в себя функцию поиска, в настоящее время поиск работает нормально, для этого я использую раскрывающийся список и выбираю значение.
это код, который я использую с выпадающим
<div class="form-group form-group-lg form-group-icon-left search"><i class="fa fa-plane input-icon"></i>
<label>Select an option</label>
<select class="typeahead form-control" name="search">
<?php foreach($search_des as $sd) { ?>
<option value="<?php echo $sd->des_category_id;?>">
<?php echo $sd->des_category_name;?></option>
<?php } ?>
</select>
<br>
</div>
Теперь согласно требованию нашего клиента им нужно отобразить все элементы с переключателем, а также они хотят отправить страницу, нажав на радио
, Я пытался использовать переключатель, он не работает должным образом.
Это код, который я использую с переключателем.
<div class="form-group">
<label>Select an option</label>
<?php foreach($search_des as $sd) { ?>
<label>
<input class="form-control" value="<?php echo $sd->des_category_id;?>" type="radio">
<?php echo $sd->des_category_name;?></label>
<?php } ?>
<br>
</div>
при этом все элементы отображаются правильно, но все переключатели отмечены, также я не знаю, как автоматически отправить форму с помощью переключателя.
Вам нужно будет использовать Javascript для запуска отправки формы по клику.
Добавьте прослушиватель событий к переключателю, который нажимается, а затем активируйте форму для отправки, когда это событие произойдет.
Что-то вроде этого должно работать, просто измените идентификаторы соответственно.
var form = document.getElementById("form-id");
document.getElementById("radio-id").addEventListener("click", function () {
form.submit();
});
Вы не дали
name
атрибут
для ввода
<div class="form-group">
<label>Select an option</label>
<?php foreach($search_des as $sd) { ?>
<label>
<input name="search" class="form-control" value="<?php echo $sd->des_category_id;?>" type="radio"><?php echo $sd->des_category_name;?></label>
<?php } ?>
<br>
Итак, в этом вопросе есть несколько вопросов.
Во-первых, как упомянуто выше, вам нужно добавить тег имени к вашему переключателю.
Во-вторых, вам нужно использовать JavaScript для отправки формы по событию нажатия кнопки радио. Чтобы настроить событие click, добавьте класс на вашу кнопку-переключатель.
Размещение ответа здесь со ссылкой на мой Codepen.
Код
<form name="theForm">
<div class="form-group">
<label>Select an option</label>
<?php foreach($search_des as $sd) { ?>
<label>
<input class="form-control radioClass" value="<?php echo $sd->des_category_id;?>" type="radio" name="category">
<?php echo $sd->des_category_name;?></label>
<?php } ?>
<br>
</div>
</form>
JS
var classname = document.getElementsByClassName («radioClass»); // Класс переключателей, который мы добавили
var myFunction = function() {
document.theForm.submit(); //theForm is the name of the form.
};
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', myFunction, false); //Adding listener to the click event.
}
Вы можете поиграть с кодом (конечно, PHP-скрипт был заменен фиктивными данными) по этой ссылке: https://codepen.io/akshit_ij/pen/KydVXz
Дайте мне знать, если это поможет.