0

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?

Jared Forth
  • 1,418
  • 5
  • 13
  • 28
Vinyet
  • 9
  • 4
  • `var input = ...; var input = ....` do not use var over and over like that for the same variable. – epascarello Jul 17 '19 at 12:54
  • so use return false or preventDefault. HTML 5 Validation would be a lot easier. – epascarello Jul 17 '19 at 12:56
  • How did you fire your button is disabled, your code doesn't work when input field is empty and couldn't fire again, you should keypress event on your input element – Ferhat BAŞ Jul 17 '19 at 13:01

3 Answers3

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>
epascarello
  • 185,306
  • 18
  • 175
  • 214
0

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.

Arpit Kumar
  • 1,911
  • 3
  • 23
  • 47
0

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>
Dhaval Pankhaniya
  • 1,938
  • 1
  • 12
  • 25