Как триггерить кнопку при нажатии на input radio?

Question

[ssawyer]

Привет,

Есть форма вида:
Как мне избавиться от кнопки и совершать действие по нажатию радио кнопки?

<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="post-date-filter">
                <div class="news__select">
                    <!-- Дата -->
                    <div class="__select" data-state="">
                        <div class="__select__title" data-default="Option 0">Выберите дату</div>
                        <div class="__select__content">

                            <input id="singleSelect0" class="__select__input" type="radio" name="singleSelect" checked>
                            <label for="singleSelect0" class="__select__label">Option 0</label>

                            <input id="singleSelect1" class="__select__input" type="radio" name="date" value="ASC">
                            <label for="singleSelect1" class="__select__label">Дата: по возрастанию</label>

                            <input id="singleSelect3" class="__select__input" type="radio" name="date" value="DESC"
                                selected="selected">
                            <label for="singleSelect3" class="__select__label">Дата: по убыванию</label>

                        </div>
                    </div>
                    <!-- Конец Дата -->


                    <!-- Категория -->
                    <?php
            if( $terms = get_terms( 'post_tag', 'orderby=name' ) ) :?>
                    <div class="__select-two" data-state="">
                        <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="categoryfilter" 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;?>
                    <!-- Конец Категория -->
                </div>

                <button type="submit" class="filter-btn">Применить фильтр</button>
                <input type="hidden" name="action" value="customfilter">
            </form>

И ее ajax обработка

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'); },
   success:function(data){ filter.find('button'); $('#filtering-results').html(data); }
  });
  return false;
 });
});

Answer 1

[ssawyer]

Решение

$('.__select__input').click(function(){
  if ($(this).is(':checked')){
      $.ajax({
          url: '/wp-admin/admin-ajax.php', 
          method: 'post',
          dataType: 'html',
          data: $('#post-date-filter').serialize(),
          success: function(data){
              $('#filtering-results').html(data);
          }
      });
  }
});

Answer 2

[ThunderCat]

радиокнопка ончейнж функтион(){
  форма.субмит()
}

Comments

[ssawyer]

Нашел вот такой код
Но он почему то не работает

window.addEventListener( 'DOMContentLoaded', function() {
  var form = document.getElementById( 'post-date-filter' );
  Array.from( document.getElementsByTagName( 'input' ) ).map( function( el ) {
      if ( el.type == 'radio' && el.parentNode == form ) {
          el.addEventListener( 'change', function() {
              form.submit();
          } );
      }
  } );
} );

[ThunderCat]

ssawyer,

Но он почему то не работает

Что не работает? Что в консоли? Какие ошибки?

if ( el.type == 'radio' && el.parentNode == form ) у вас никогда не сработает, так как парентнода у ваших радио это див. Код из интернета надо хотя бы понимать, если уж сами не можете написать...