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
– Noah Freitas, Commented Jul 5, 2014 at 16:47

Alexander O'Mara · Accepted Answer · 2014-07-05 16:49:59Z

2

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);
}

answered Jul 5, 2014 at 16:49

Alexander O'Mara

60.9k19 gold badges176 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Darryl Chapman Over a year ago

Ah brilliant, I've never known that. Has solved my problem, will mark as correct answer once the timer is up!

Community · Accepted Answer · 2017-05-23 11:57:51Z

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, 2017 at 11:57

CommunityBot

11 silver badge

answered Jul 5, 2014 at 17:02

Mritunjay

25.9k7 gold badges57 silver badges71 bronze badges

Collectives™ on Stack Overflow

Firing JS function from onkeyup event input

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related