I'm completly newbie with javascript but I was able to get this script that I found to work partially. I mean if I type in the first form field and hit 'Enter' the form perform the http request with my options.

I think the script part at the bottom is not working or missing something. Since is using jQuery.

So I want to make this script more simple, just add a button or link to call a action do the search and show the results page.

?><section >
    
    <div >
        <div >
            <h1>Engates</h1>
            
            <form id="form_filtro_produto" action="<?php echo home_url( '/produtos/' ); ?>" method="GET" >
                <label for="pesquisar">
                    <p>Pesquisar</p>
                    <input type="text" name="engate" value="<?php echo $_GET['engate']; ?>" />
                </label>

                <label for="montador">
                    <p>Montadora</p>
                    <select name="montadora">
                        <option value="">Selecione uma Montadora</option>
                        <?php
                            $args = array (
                                'post_type' => 'engates',
                                'posts_per_page' => -1,
                                'meta_key' => 'montadora', 
                                'meta_compare' => 'EXISTS',
                                'orderby' => 'meta_value',
                                'order' => 'ASC'
                            );

                            $query = new WP_Query($args);
                            $montadoras = array();
                            while ($query->have_posts()): $query->the_post();
                            if(!in_array(get_field('montadora'), $montadoras) && get_field('montadora') != ""){
                                array_push($montadoras, get_field('montadora'));
                            ?>
                            <option value="<?php the_field('montadora'); ?>"<?php if($_GET['montadora'] == get_field('montadora')){ ?> selected="selected"<?php } ?>><?php the_field('montadora'); ?></option>
                            <?php
                            }
                            endwhile;
                            wp_reset_query();
                        ?>
                    </select>
                </label>
                
                <label for="modelo">
                    <p>Modelo</p>
                    <select name="modelo">
                        <option value="">Selecione um Modelo</option>
                        <?php
                            $args = array (
                                'post_type' => 'engates',
                                'posts_per_page' => -1,
                                'meta_key' => 'modelo', 
                                'meta_compare' => 'EXISTS',
                                'orderby' => 'meta_value',
                                'order' => 'ASC'
                            );

                            $query = new WP_Query($args);
                            $modelos = array();
                            while ($query->have_posts()): $query->the_post();
                            if(!in_array(get_field('modelo'), $modelos) && get_field('modelo') != ""){
                                array_push($modelos, get_field('modelo'));
                            ?>
                            <option value="<?php the_field('modelo'); ?>"<?php if($_GET['modelo'] == get_field('modelo')){ ?> selected="selected"<?php } ?>><?php the_field('modelo'); ?></option>
                            <?php
                            }
                            endwhile;
                            wp_reset_query();
                        ?>
                    </select>
                </label>
                
                
            </form>
        
        </div>
    </div> <!-- fim wrp-content -->

    <div >

        <?php//do_shortcode('[facetwp template="example"]');?>
        <?php
            $filtro = array();

            if($_GET['montadora'] != ""){
                $montadora = array(
                    'key'     => 'montadora',
                    'value'   => $_GET['montadora'],
                    'compare' => '=',
                );
                array_push($filtro, $montadora);
            }

            if($_GET['modelo'] != ""){
                $modelo = array(
                    'key'     => 'modelo',
                    'value'   => $_GET['modelo'],
                    'compare' => '=',
                );
                array_push($filtro, $modelo);
            }

            if($_GET['ano'] != ""){
                $ano = array(
                    'key'     => 'ano',
                    'value'   => $_GET['ano'],
                    'compare' => '=',
                );
                array_push($filtro, $ano);
            }
            $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
            query_posts(
                array(
                    'post_type' => 'engates', 
                    'posts_per_page' => 8,
                    'paged' => $paged,
                    'meta_query' => array($filtro),
                    's' => $_GET['engate'],
                    'orderby' => 'meta_value',
                    'meta_key' => 'modelo',
                    'order' => 'ASC'
                )
            );
            if(have_posts()):
            while(have_posts()): the_post();
        ?>
        <article>
            <img width="270" src="<?php echo wp_get_attachment_url(get_post_thumbnail_id(get_the_ID())); ?>"  alt="" />
            <div >
                <p><em>cod: <?php the_field('codigo'); ?></em></p>
                <p><?php the_field('modelo'); ?></p>
                <p><?php the_field('montadora'); ?></p>
                <p><?php the_field('ano'); ?></p>
                <!-- <a href="<?php // echo home_url( '/contato/' ); ?>?prod=Engates - <?php // the_field('cod'); ?> / <?php // the_field('montadora'); ?> / <?php the_field('ano'); ?>">Saiba Mais</a> -->
            </div>
        </article>
        <?php
            endwhile;
        ?>
        <div style="clear:both"></div>
        <?php
                wp_paginate();
            else:
                echo "<p>Nenhum produto foi encontrado.</p>";
            endif;
        ?>

    </div> <!-- fim container -->

</section>
<script>
    jQuery(function($){
        $('#form_filtro_produto input, #form_filtro_produto select').on('change', function(){
            $('#form_filtro_produto').submit();
        });
    });
</script>

CodePudding user response：

All you need to do is include <button>Submit</button> within the <form> element and it will trigger the form's submit event to your form's action.