Firing JS function from onkeyup event input

Question

I have this very basic code that I feel should be working but isn't.

I have this form:

<form id="search-box" action="">
     <input id="search" type="text" placeholder="Search here.." onkeyup="search(this.value)"><!--
   --><input id="submit" type="submit" value="Search">
</form>

This form fires a JS search function. This search function contains:

function search(input){
    alert(input);
}

I have linked the JS file containing the function in the head of the html document:

<script src="js/ajax.js"></script>

But the problem is this isn't working. I'm getting an error when the onkeyup is fired:

Uncaught TypeError: object is not a function    localhost:16:201
onkeyup localhost:16:201

May I get some assitance?

The `object is not a function` message is a good clue. The name `search` does exist in the right scope, but it's not a function. You might try opening the JS console on the page and logging out the value of `search` to see what it is. — Noah Freitas, Jul 05 '14 at 16:47

score 2 · Accepted Answer · answered Jul 05 '14 at 16:49

In your code, you have a function named search and an element with the id of search. HTML elements with id's become global variables by that name, so the element with the id of search overwrites the search variable that was your function.

Try something like this.

HTML

form id="search-box" action="">
     <input id="search" type="text" placeholder="Search here.." onkeyup="doSearch(this.value)"><!--
   --><input id="submit" type="submit" value="Search">
</form>

JS

function doSearch(input){
    alert(input);
}

Ah brilliant, I've never known that. Has solved my problem, will mark as correct answer once the timer is up! — Darryl Chapman, Jul 05 '14 at 16:52

score 0 · Answer 2 · edited May 23 '17 at 11:57

0

In your HTML you can't have an element ID and function names same in a form. These creates conflicts.

When you add a ID in your form it adds that element as form[id]. So if you will have the same names of functions they will create conflict in same form.

Here is a very nice question has been answered about same.

edited May 23 '17 at 11:57

Community

1
1

answered Jul 05 '14 at 17:02

Mritunjay

25,338
7
55
68

Firing JS function from onkeyup event input

2 Answers2

Linked