如何添加按钮以提交表单？

Question

我完全是 javascript 的新手，但我能够得到这个我发现可以部分工作的脚本。我的意思是，如果我在第一个表单字段中输入并点击 'Enter'，该表单会根据我的选项执行 http 请求。

我认为底部的脚本部分不起作用或缺少某些内容。因为正在使用 jQuery.

所以我想让这个脚本更简单，只需添加一个按钮或 link 来调用一个动作进行搜索并显示结果页面。

?><section class="content-page page-produtos">
    
    <div class="wrp-content">
        <div class="container box-content">
            <h1>Engates</h1>
            
            <form id="form_filtro_produto" action="<?php echo home_url( '/produtos/' ); ?>" method="GET" class="src-group">
                <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 class="container box-content">

        <?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())); ?>" class="attachment-full size-full wp-post-image" alt="" />
            <div class="paragraph-group">
                <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>

Answer 1

您需要做的就是将 <button>Submit</button> 包含在 <form> 元素中，它会触发表单提交 event 到表单的 action.

如何添加按钮以提交表单？

How to add a button to submit a form?

javascript

forms