Как переделать форму с select в input?

Question

[anmkh]

Здравствуйте, очень нужна помощь по форме фильтра wordpress.
Есть форма

<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="post-date-filter">
<?php
if( $terms = get_terms( 'category', 'orderby=name' ) ) :
  echo '<select name="categoryfilter"><option>Выберите категорию...</option>';
  foreach ( $terms as $term ) :
    echo '<option value="' . $term->term_id . '">' . $term->name . '</option>';
  endforeach;
  echo '</select>';
endif;
?>
<label>
  <input type="radio" name="date" value="ASC" /> Дата: по возрастанию
</label>
<label>
  <input type="radio" name="date" value="DESC" selected="selected" /> Дата: по убыванию
</label>
<button>Применить фильтр</button>
<input type="hidden" name="action" value="customfilter">
</form>
<div id="filtering-results"></div>

В ней нужно заменить выпадающий список с select на input.
Сделал так, но фильтр перестает правильно работать:

</form>

<?php global $query_string; // параметры базового запроса
query_posts($query_string.'&'.$order); // базовый запрос + свои параметры
?>



<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="post-date-filter">
<?php
if( $terms = get_terms( 'category', 'orderby=name' ) ) :
    ?>
  <div class="__select-two" data-state="" name="categoryfilter">
  <div class="__select__title-two" data-default="Option 0">Выберите тему мероприятия</div>
 <div class="__select__content-two">

 <input id="singleSelect5" class="__select__input-two" type="radio" name="singleSelect2" checked>
    <label for="singleSelect5" class="__select__label-two">Option 0</label>
    
  <?php
  foreach ( $terms as $term ) :
    ?>
    <input id="<?php echo $term->term_id ?>" class="__select__input-two" type="radio" name="singleSelect2" value="<?php echo $term->term_id ?>">
    <label for="<?php echo $term->term_id ?>" class="__select__label-two" value="<?php echo $term->term_id ?>"><?php echo $term->name ?></label>
    
<?php
  endforeach;
  ?>
</div>
</div>
  <?php
endif;
?>
<label>
  <input type="radio" name="date" value="ASC" /> Дата: по возрастанию
</label>
<label>
  <input type="radio" name="date" value="DESC" selected="selected" /> Дата: по убыванию
</label>
<button>Применить фильтр</button>
<input type="hidden" name="action" value="customfilter">
</form>

Comments

[ThunderCat]

В ней нужно заменить выпадающий список с select на input.

во первых селект тоже является инпутом, во вторых вы скорее всего имели в виду заменить селект на радио? Или у вас там библиотека селект2 подключена?

[Владимир Брумер]

<select name="categoryfilter">

и

<input id="<?php echo $term->term_id ?>" class="__select__input-two" type="radio" name="singleSelect2"

атрибуты name сравните

а это, что за ноу хау?:

<div class="__select-two" data-state="" name="categoryfilter">

[anmkh]

Владимир Брумер,

<div class="__select-two" data-state="" name="categoryfilter">

В data-state передается параметр active при открытии списка

Заработало, спасибо!!

Только как теперь избавиться от кнопки button и передавать запрос при нажатии инпута?

[Владимир Брумер]

anmkh, я о атрибуте name

<div class="__select-two" data-state="" name="categoryfilter">

это ведь div

[anmkh]

Владимир Брумер, Я косяк

[anmkh]

Владимир Брумер,
Если я у инпута поменяю radio на submit, то наверное так должен срабатывать фильтр

Тогда и в ajax нужно button поменять? Сорри, я чайник в этом

jQuery(function($){
 $('#post-date-filter').submit(function(){
  var filter = $('#post-date-filter');
  $.ajax({
   url:filter.attr('action'),
   data:filter.serialize(), // данные формы
   type:filter.attr('method'), // POST
   beforeSend:function(xhr){ filter.find('button').text('Применяем фильтр...'); },
   success:function(data){ filter.find('button').text('Применить фильтр'); $('#filtering-results').html(data); }
  });
  return false;
 });
});

[Владимир Брумер]

Только как теперь избавиться от кнопки button и передавать запрос при нажатии инпута?

например скрыть кнопку, а при выборе тригером кликать её

[anmkh]

Владимир Брумер, а в ajax запросе ничего поменять нельзя? выше, который отправил