时间戳

首页 > 解决方案 > 禁用按钮，直到用户选择有效选项

javascript - 禁用按钮，直到用户选择有效选项

问题描述

我有一个小型搜索引擎，由 2 个选择“类别”和“省”组成。我希望在用户选择有效的类别或位置之前，该按钮被禁用。出于用户体验的原因，我输入了取消选择的文本“选择类别”和“选择位置”。问题是如果用户没有选择任何东西，留下一个或两个值（选择类别，选择位置）并按下按钮，搜索引擎返回错误页面！所以我想到了在用户做出valdia选择之前阻止按钮的解决方案（不包括选项中的文本）

这是页面代码：

                  <div class="listing-search-field category">
                        <select name="cat" id="category" >
                        <option selected disabled>Select Category</option>; 
                <?php if(is_array($categories) && count($categories)){
                    foreach($categories as $key => $value){?> 
                        <option value = "<?php echo esc_attr($value)?>">
                            <?php echo esc_attr($value)?>
                        
                        </option>
                    <?php }
                } ?>
            </select>
        </div>
        <div class="listing-search-field location">
            <select name="location" id="location">
            <option selected disabled>Select Location</option>;
                <?php
                    if(is_array($locations) && count($locations)){
                        foreach($locations as $key => $value){ ?>
                            <option value = "<?php echo esc_attr($value)?>">
                                <?php echo esc_attr($value);?>
                            </option>
                        <?php }
                    } ?>
            </select>
        </div>
    </div>
    <div class="listing-search-submit-holder">
        <?php
        if ( listing_theme_installed() ) {
            echo my_theme_get_button_html(array(
                'type' => 'solid',
                'text' => esc_html__('Search Places', 'eltd-listing'),
                'html_type' => 'button',
                'hover_border_color'   => '#fff',
                'hover_color'   => '#fff',
                'icon_pack' => 'font_elegant',
                'fe_icon' => 'arrow_carrot-right',
                'size' => 'large'
            ));
        }
        ?>

我不是程序员，因此非常欢迎基于此代码的具体示例。

标签： javascriptphp

解决方案

您好 Andrea，欢迎来到 stackoverflow。您可以使用 javascript 轻松完成您需要的工作。让我带你完成整个过程。

  1. 您需要确定哪些元素对您很重要。

从您的示例中，您似乎有 3 个要观察或更改的重要元素。2 选择元素并提交按钮。

您可以选择这样的元素：

<script>
let firstSelect = document.querySelector('#category');
</script>
  1. 您需要确定要监视的操作。

在您的示例中，如果其中任何一个选择了选项，您想观看这 2 个选择元素。

这可以这样做：

firstSelect.addEventListener("change", myLittleFunction);

这段代码正在观察我们命名为 firstSelect 的元素，每当它发生变化（用户选择不同的选项）时，它就会运行名为 myLittleFunction 的函数（我们将在下一步中创建此函数）。

  1. 决定需要满足哪些条件以及应该发生什么

在您的示例中，您的条件非常简单 - 用户需要选择这两个选择元素中的任何一个选项。一旦满足这个条件，你就想对按钮做一些事情。

为了实现上述目标，我们可以这样做：

function myLittleFunction(){
  if (firstSelect.options[firstSelect.selectedIndex].value){
    //Change the button in the way you need (enable)
} else {
    //Change the button in the way you need (disable)}
}

这个函数检查我们命名为 firstSelect 的元素是否有任何值（如果选择的选项有任何值），如果有，它可以运行你想做的任何事情。如果所选选项没有价值，它可以做其他事情。究竟应该发生什么取决于您（您可以显示/隐藏按钮，可以添加/删除类等）

推荐阅读