如何使输入字段为空时，按钮什么也不做？

Question

I'm making a simple searcher in which the user enters a query, clicks search, and the program returns either the location of said element, or a "No results found" line.

I'm having trouble with the search button itself. It works perfectly fine when the element that is being searched exists, but if I click on it while the input is blank, it returns the "No results found" message. I would like it so that it does nothing.

I'm using mainly JavaScript. What I've tried so far is make an if statement to check the length of the input, and then select the element from the DOM and make it disabled when length is 0.

I have tried adding both console.log and alert() to check the state of the button (enabled/disabled), and they both work equally, no matter the length of the input value.

<button value="submit" id="button" data-key="13" onclick="clickFunction()">
</button>


function clickFunction() {
    var input = document.getElementById('input_id').value;
    var input = input.toLowerCase();

    /* disables button if there is no input */
    if ( input.length === 0 ) {
        document.getElementById("button").disabled = true;
        console.log("disabled");
    } else if (input.length > 0) {
        document.getElementById("button").disabled = false;
        console.log("enabled");
    }
}    

I have also tried using jQuery ($("#button").attr("disabled", true)) , but it's not working either.

Am I missing something?

Answer 1

You need to stop the click, disabling the button with click means you will not be able to enable it.

 function clickFunction(evt) { var input = document.getElementById('input_id').value.trim(); // if (!input.length) { evt.preventDefault(); } if (!input.length) return false; // cancel click return true } 

 <form> <input type="search" id="input_id" name="input_id" /> <button value="submit" id="button" data-key="13" onclick="clickFunction(event)"> </button> </form> 

but why use JavaScript, let HTML do it for you.

 <form> <input type="search" name="search" required /> <input type="submit" /> </form> 

Answer 2

You can modify your code in this manner:

 function clickFunction() {
        var input = document.getElementById('input_id').value;
        input = input.toLowerCase();

        if (input.length) {
            // write your search logic here
        } else {
           // won't do anything
            return false;
        }
    }    

I hope it will help.

Answer 3

this should work

 function validate(obj) { if (obj.value.length > 0) { document.getElementById("btnSave").disabled = false; } else { document.getElementById("btnSave").disabled = true; } } 

 <input type="text" id="txtName" onkeyup="validate(this)"/> <button disabled id="btnSave">save</button>