I have a small search engine consisting of 2 select "category" and "province". I would like that until the user selects a valid category or location, the button is disabled. For UX reasons I entered the deselected text "select category" and "select location". The problem is that if the user doesn't select anything, and leaves one or both values (select category, select location) and presses the button, the search engine returns me an error page! So I thought about the solution of blocking the button until the user makes a valdia choice (which excludes the text in option)
This is the page code:
<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'
));
}
?>
I'm not a programmer, so a concrete example based on this code would be very welcome.
Hello Andrea and welcome to stackoverflow. What you need can be easily done using javascript. Let me walk you through the process.
From your example it seems you have 3 important elements you want to watch or change. 2 select elements and submit button.
You can select elements like this:
<script>
let firstSelect = document.querySelector('#category');
</script>
In your example you want to watch those 2 select elements if any of them has option selected.
This can be done like this:
firstSelect.addEventListener("change", myLittleFunction);
This piece of code is watching the element we named firstSelect and whenever it changes (user selects a different option) it runs the function called myLittleFunction (we create this function in the next step).
In your example you have very simple condition - user needs to select any option any one of those 2 select elements. And once this condition is met you want to do something with the button.
In order to achieve the above goal we can do this:
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)}
}
This function checks if the element we named firstSelect has any value (if the selected option has any value), if so it can run whatever you want to do. In case the selected option has no value, it can do something else. What exactly should happen is up on you (you can display/hide the button, you can add/remove class, etc.)