BobbyJones BobbyJones - 3 months ago 4
HTML Question

Enabling the Search button when the user types or makes a selection

I'd like to write some sort of function that would allow functionality to be added to enable the "Search" button when the user has either:

  • made a selection in either of the select boxes

  • or has typed a value into one of the input boxes on the page

Vice-versa, if either of the select or input boxes are empty, then disable the search button.

I apologize in advance and would like to say that I am newcomer to JavaScript and I am not sure where to begin, other examples on the web are confusing to me and do not seem to fit my needs.

Here is the HTML Markup:

<!DOCTYPE html>
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>

<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>

<input type="input" id="veggie">

<input type="input" id="number">

<input type="button" value="search" disabled>


You should use the jQuery change() function, like this:


Give your input the disabled class which disables the button like:

     pointer-events: none;

The upper code removes this class when someone is selecting something at your select input.



This removes the "disabled" attribute for your button.