在用户选择有效选项之前禁用按钮

Question

我有一个小的搜索引擎，包含2个select "category"one_answers";province"。我希望，直到用户选择一个有效的类别或位置，按钮被禁用。出于用户体验的原因，我输入了未选中的文本"select category"。和"选择位置"。问题是，如果用户没有选择任何东西，只留下一个或两个值(选择类别、选择位置)并按下按钮，搜索引擎就会返回一个错误页面!所以我想到了阻塞按钮的解决方案，直到用户做出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'
));
}
?>

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

Answer 1

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

1. 你需要确定哪些元素对你来说是重要的。

从你的例子来看，你似乎有3个重要的元素你想要观察或改变。2 .选择元素和提交按钮。

你可以像这样选择元素:

<script>
let firstSelect = document.querySelector('#category');
</script>

2. 你需要确定你想要观察的动作

在你的例子中，你想要观察这两个select元素，如果其中任何一个有选项被选中。

可以这样做:

firstSelect.addEventListener("change", myLittleFunction);

这段代码监视我们命名为firstSelect的元素，每当它发生变化时(用户选择了不同的选项)，它就运行名为myLittleFunction的函数(我们在下一步中创建这个函数)。

3. 决定需要满足什么条件和应该发生什么

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

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

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的元素是否有任何值(如果被选中的选项有任何值)，如果有，它可以运行你想做的任何事情。如果选择的选项没有值，它可以做其他事情。究竟应该发生什么取决于你(你可以显示/隐藏按钮，你可以添加/删除类，等等)