onKeyUp - running a PHP script

JavaScript and client side scripting.

Moderator: General Moderators

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

onKeyUp - running a PHP script

Post by simonmlewis »

Hi.

How do I make this:

Code: Select all

<input type="text" onkeyup="myFunction(this)">
... perform a PHP function; or rather a MySQL function.

I want to make it do what Firefox (and so many web sites) does - do a search query everytime a character is entered into a box, and the results begin to appear.

Hope someone knows.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: onKeyUp - running a PHP script

Post by requinix »

You mean some sort of autocomplete?
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: onKeyUp - running a PHP script

Post by simonmlewis »

Sort of - but only based on a query in the database.

ie. if they entered "orange" into the box, and the database contains only "blue, green, black, white", then nothing will show up.

So a key-up, that does a query.

Ebay does it.
This is what happens if you type in &quot;oak&quot; into Ebay.  It performs a search on one field.
This is what happens if you type in "oak" into Ebay. It performs a search on one field.
ebay.jpg (56.17 KiB) Viewed 8908 times
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: onKeyUp - running a PHP script

Post by requinix »

Yeah... That's what autocomplete is.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: onKeyUp - running a PHP script

Post by simonmlewis »

No - autocomplete "autocompletes" the field based on what you have entered into a form field on any web site.

Unless there in a PHP Autocomplete function that does this AND checks the database. Otherwise, if it just autocompletes based on what you have entered elsewhere on the web, it's not going to perform what I need.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: onKeyUp - running a PHP script

Post by simonmlewis »

Sorry but what I need sounds straight forward. A function calls a script which run a DB query.

I just don't know how to put a PHP script into a standard function that is called.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: onKeyUp - running a PHP script

Post by califdon »

Since you want to perform a server action while remaining on the same browser page, this must be done with Ajax http://www.w3schools.com/Ajax/Default.Asp, which requires some Javascript (which would be the function you call in the onKeyUp event) and a server-side script in PHP (or other server-side language).
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: onKeyUp - running a PHP script

Post by simonmlewis »

Yep - I can see how that would be useful and the only way to do it.
But I don't know how to put a PHP MySQL query into Javascript.

If I knew how to do that, I could probably work this out.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Re: onKeyUp - running a PHP script

Post by s.dot »

Check out jquery.org and their AJAX documentation
Makes it good and easy!
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: onKeyUp - running a PHP script

Post by simonmlewis »

Sorry - where is that in that site as I don't see anything about that. Only four sections.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: onKeyUp - running a PHP script

Post by califdon »

I have nothing against jquery, but I never got around to using it, and for what you want to do, a simple AJAX call would be so easy, if it were me, I wouldn't want to learn a whole new environment.

Your Javascript does a couple of things:
  • instantiates a built-in JS object called XMLHttpRequest()
  • defines a function that will be called when the results are sent back from the server
  • sends a request to a PHP script on the server
  • checks for a ready code from the server to determine when the data is ready for your function to use
You just need to use the correct syntax, as shown in the link I provided above.

On the server side, you have to write that PHP script, that results in echoing the desired data back, which will be used by the function that you defined in the calling JS script.

Once you see how it works, it's simple to code and use. The JS code may look daunting at first, primarily because IE browsers don't use the same naming conventions as Mozilla browsers, so you have to test for which browser is making the call, and the fact that it has to check for a return code from the server, indicating that the data is ready.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: onKeyUp - running a PHP script

Post by simonmlewis »

Mmmmmm well I don't have a bloody clue with writing Javascript. So going from PHP to making JS run PHP queries is one heck of a long shot!

It's not that important, but would be nice if people entered words into the box and suggestions came up.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: onKeyUp - running a PHP script

Post by califdon »

Well, of course, any new language is a challenge, but you can basically just lift a small amount of JS code from an AJAX tutorial and the only thing you have to actually write, yourself, is that function that uses the returned data--in your case, to replace the list of possible choices in the drop-down box. That should be pretty simple. If you already know PHP, you can easily write the server-side script, using the $_GET string that contains the partial contents of the entry the user is making. There a couple of alternatives for how the data is sent back, either XML, JSON (a special Javascript format), or plain HTML (which is what I use), in your case it needs to be a series of values, so you could use a separator, such as the 'pipe' character (|), that can be used when it is received by your JS function to break up the string into the individual choices that have to populate the <option> elements of the drop-down box.

My concern would be that, for a fast typist, the response may not be able to keep up with the typing. After all, data must be captured, sent over the Internet to the server, a query must be made on a database, data returned to the browser, and finally, the <options> list has to be refreshed.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: onKeyUp - running a PHP script

Post by califdon »

In case you didn't go through the whole tutorial I referred to above, here is the exact page that does exactly what you are trying to do:
http://www.w3schools.com/Ajax/ajax_example_suggest.asp
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Re: onKeyUp - running a PHP script

Post by Luke »

Although this probably could have been in either PHP or Javascript, I have moved it to the Javascript forum because it is more front-end related. I can understand being confused about where to post it though, so don't worry about it :)
Post Reply