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

Question

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>
<html>
    <head>
    </head>
    <body>
        Cars
        <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>
        <br><br>

        Fruits
        <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>
        </select>
        <br><br>

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

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

        <input type="button" value="search" disabled>
    </body>
</html>

Have you tried using .removeAttr("disabled") on the input[type="button"]? — MCMXCII, Jul 27 '16 at 16:32
Upvote for "combeluded". :) Are you using jQuery? If so, what about @MCMXCII 's question? — BobRodes, Jul 27 '16 at 16:32
take a look at the link: [disable-enable-an-input-with-jquery](http://stackoverflow.com/questions/1414365/disable-enable-an-input-with-jquery) The answer exists bye — Arcadio, Jul 27 '16 at 16:40
I believe the answer exists, take a look at [disable-enable-an-input-with-jquery](http://stackoverflow.com/questions/1414365/disable-enable-an-input-with-jquery) — Arcadio, Jul 27 '16 at 16:42
@Arcadio Indeed so, assuming that the OP is using jQuery, which although he has tagged it he hasn't said that he is. Being a newcomer as he explains, we might want to establish that first. He might not know the difference. — BobRodes, Jul 27 '16 at 16:44

m1crdy · Accepted Answer · 2016-07-27T16:38:25.943

0

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

$("select#fruits").change(function(){
   $('input[type="button"]').removeClass("disabled");
});

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

.disabled{
     pointer-events: none;
}

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

UPDATE:

$("select#fruits").change(function(){
    $("input[type="button"]").removeAttr("disabled");
});

This removes the "disabled" attribute for your button.

edited Jul 27 '16 at 16:38

answered Jul 27 '16 at 16:35

m1crdy

1,341
2
25
56

And where is the `disabled` class exactly? :) – BobRodes Jul 27 '16 at 16:38
Put this in your css-file or directly above your html sorrounded by – m1crdy Jul 27 '16 at 16:39
What would be benefit of using a css pointer-event over removing the disabled attribute? – MCMXCII Jul 27 '16 at 16:39
1

Well, you don't include any mechanism for adding the class to the element, so you're removing a class that isn't there in the first place. What's the effect you would expect? – BobRodes Jul 27 '16 at 16:39
you should do both. pointer-events and disabled. Disabled attribute is not supported by older browsers. – m1crdy Jul 27 '16 at 16:41
So, your answer might want to explain how to add the class as well, in order to be considered complete. Then again, we don't know what the OP's platform is. Maybe he just needs to change his `input type=button` to a `button` and call `$('button').button.disable()`. – BobRodes Jul 27 '16 at 16:48

score 0 · Answer 2 · answered Jul 27 '16 at 17:07

I would use watch for a change in the select, and then do something like the below:

$("#fruits").change(function () {
    var fruitSelect = $(this).val();
    if(fruitSelect != ""){
        $("#searchBox").prop( "disabled", false );
    }
});

This would cover the select boxes. For the text inputs, I would do something like the following:

$('#numero').on('input', function() {
    $("#searchBox").prop( "disabled", false );
});

Here is a fiddle https://jsfiddle.net/6fn8744w/1/ for the whole thing. This assumes you're using jquery. It's probably not the most concise method, because I'm still learning all this myself, but it seems to work well.

score 0 · Answer 3 · answered Jul 27 '16 at 17:09

jQuery may give you a simpler code but pure Javascript might do the job also. And of course there are many approaches for stuff like that.

Let me know if this solution is what you want it to do. Happy coding! =)

<html>

<head>

</head>

<body>
Cars
  <select id="car" onchange="checkField()">
  <option value=""></option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<br><br>
Fruits
 <select id="fruits" onchange="checkField()">
  <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>
 </select>
<br><br>
Vegetable
<input type="input" id="veggie" onchange="checkField()">
<br><br>
Number
<input type="input" id="number" onchange="checkField()">
<br><br>

// you can also use disabled="disabled" instead of just disabled
<input id="btn-search" type="button" value="search" disabled>

<script type="text/javascript">

    function checkField(){
        var car = document.getElementById('car').value;
        var fruits = document.getElementById('fruits').value;
        var veggie = document.getElementById('veggie').value;
        var number = document.getElementById('number').value;


        if(car=="" && fruits =="" && veggie=="" && number=="") {
            // this is one of the ways to disable a html element
            document.getElementById('btn-search').disabled = "disable";    
        } else {
            // and this is how you enable it
            document.getElementById('btn-search').disabled = false;    
        }

    }

</script>

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

3 Answers3