Ajax post filter

On my website i made ajax taxonomy filter which is working fine with dropdown select, but i need buttons instead of dropdown. When i am editing code to buttons, filter isnt working, it shows mainc category posts. Please anyone help me Heres my code

    <form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
    <?php
        if( $terms = get_terms( array( 'taxonomy' => 'roomcat', 'orderby' => 'name' ) ) ) : 

            echo '<select name="categoryfilter"><option value="">Select category...</option>';
            foreach ( $terms as $term ) :
                echo '<option value="' . $term->term_id . '"/>' . $term->name . '</option>'; // ID of the category as the value of an option
            endforeach;
            echo '</select>';
        endif;
    ?>
    <button>Apply filter</button>
    <input type="hidden" name="action" value="myfilter">
</form>

<div id="response">
</div>

This is Jquery

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

This is Function

add_action('wp_ajax_myfilter', 'misha_filter_function'); // wp_ajax_{ACTION HERE} 
add_action('wp_ajax_nopriv_myfilter', 'misha_filter_function');

function misha_filter_function(){
    $args = array(
        'orderby' => 'date', // we will sort posts by date
        'order' => $_POST['date'] // ASC or DESC
    );

    // for taxonomies / categories
    if( isset( $_POST['categoryfilter'] ) )
        $args['tax_query'] = array(
            array(
                'taxonomy' => 'roomcat',
                'field' => 'id',
                'terms' => $_POST['categoryfilter']
            )
        );

    $query = new WP_Query( $args );
 echo '<section class="section sec">
<div class="section-content relative">
<div class="row">';
    if( $query->have_posts() ) :
    while( $query->have_posts() ): $query->the_post();
      echo '
<div class="col medium-12 small-12 large-6">
<div class="row row-collapse rooms-box  box-shadow-2">
<div class="col medium-7 small-12 large-12">
<img class="rooms-img" src="';
echo the_field('rooms_image'). 
'"/>
</div>
<div class="col medium-7 small-12 large-12">
<div class="rooms">
<h2>'
. $query->post->post_title  .  
'</h2> 
<p style="padding:0px 40px 0px 40px">
<img class="rooms-divider" src="http://siba.comode.ge/wp-content/uploads/2020/02/line.png"/> '
. $query->post->rooms_description_1  . 
'</p>
<p style="padding:0px 40px 0px 40px"><img class="rooms-divider" src="http://siba.comode.ge/wp-content/uploads/2020/02/line.png"/>'
. $query->post->rooms_description_2  . 
'</p>
<p style="padding:0px 40px 0px 40px"><img class="rooms-divider"   src="http://siba.comode.ge/wp-content/uploads/2020/02/line.png"/>'
. $query->post->rooms_description_3  . 
'</p>
<div class="but">
<a href="';
echo the_permalink()  . 
'"><button class="button white ab-info">გაიგე მეტი</button></a>
<a href="#"><button class="button secondary brochure">დაჯავშნე</button></a>
</div>
</div>
</div>
<div class="is-border" style="border-width:1px 1px 1px 1px;margin:15px 5px 5px 30px;"></div>
</div>
</div>';
    endwhile;
    wp_reset_postdata();
  else :
    echo 'No posts found';
  endif;
 echo 
'</div>
</div>
</section>';

  die();
}

When i’m editing i am making this changes

<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
    <?php
        if( $terms = get_terms( array( 'taxonomy' => 'roomcat', 'orderby' => 'name' ) ) ) : 

            echo '<div name="categoryfilter">';
            foreach ( $terms as $term ) :
                echo '<button value="' . $term->term_id . '"/>' . $term->name . '</button>'; // ID of the category as the value of an option
            endforeach;
            echo '</button>';
        endif;
    ?>
    <input type="hidden" name="action" value="myfilter">
</form>

• This topic was modified 4 years, 2 months ago by bochorra.