验证表单而不重新加载

时间:2016-07-01 09:58:10

标签: javascript php jquery ajax

大家好,我是法国初学者,所以我为我的学校英语道歉:)

我有一个表格有两个选择,一个用于我的建筑类型,一个用于城市。我需要在不重新加载页面的情况下验证此表单,并直接显示我表单下所选值的结果。

我在Wordpress上工作。

Archive.php:

<form  id="filtreform">
    <select class="menufiltre" name="type">
        ?php
        while ($row = $resultat->fetch_assoc())
        {
            echo "<option class='filtre' value='".$row['meta_value']."'>".$row['meta_value']."</option>";
        }
        ?>
    </select>

    <select class="menufiltre" name="city">
        <?php
        while ($row = $resultat2->fetch_assoc())
        {
            echo "<option class='filtre' value='".$row['meta_value']."'>".$row['meta_value']."</option>";
        }
        ?>
    </select>

    <button class="menufiltrebutton">Valider</button>
    <span class='filtre'><a href='../biens-immobiliers'>Tous</a></span>
</form>

在我的functions.php文件中添加了两个jquery脚本和一个用于ajax脚本。 的functions.php

add_action( 'wp_enqueue_scripts', 'jquery' );
function jquery(){
    wp_enqueue_script('jquery.validate.min', ("/wp-content/themes/restinn/js/jquery.validate.min.js"));
    wp_enqueue_script('jquery', ("/wp-content/themes/restinn/js/jquery.min.js"));
}

add_action( 'wp_enqueue_scripts', 'ajax' );
function ajax(){
    wp_enqueue_script('ajax', ("/wp-content/themes/restinn/js/ajax.js"));
}

在我的ajax.js文件中,我添加了一些代码来测试我的表单是否有效。并且它不起作用我不知道为什么:/

jQuery(document).ready(function() {
    jQuery('.menufiltrebutton').click(function() {
        alert('YOLO1');
        jQuery('.menufiltre').change();
        $(this).css("background-color", "#D6D6FF");
    a    lert('YOLO2');
});

我使用此文档来帮助我:http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_change_trigger

感谢您的帮助:)

1 个答案:

答案 0 :(得分:0)

.on(&#39; submit&#39;)将触发下一个要触发的功能。