JavaScript Functions

Posted on 2009-02-11
Last Modified: 2012-05-06
Dear EE community,

I'm trying to implement a lookup function onto my system. A user enters a value into a form text field and presses a hotkey which I've assigned. The system then does an ODBC lookup and if the value in the text field matches that in the lookup database, JavaScript and PHP populates the Contact Name, Company Name, Telephone Number and Email fields.

I have also borrowed bits of code from (this does the keyboard hotkey). Basically I would like to know if this is possible i.e. can it all be executed on the same page or should I go one step back and abuse $_GET?

At the moment I keep getting a fatal error on "an undefined function SalesRefLookup()" so probably best if we can work that one out before seeing if the keyboard shortcut key and event works.

Thank you.
<!-- this is a snip of my code, figured it would be easier this way than having you lot trawl through everything -->



<script type="text/javascript" src="hotkey.js"></script>

<script type="text/javascript">

function Show(elem) {

  document.getElementById(elem).style.display = '';


function Hide(elem) {

  document.getElementById(elem).style.display = 'none';


function showhide(elem0,elem1) {




function SalesRefLookup() {

	var SalesRefField = document.GetElementByID('fSalesRef')


shortcut.add("F2",function() {

	var SalesRefField = document.GetElementByID('fSalesRef');






$sql_salesref = "SELECT * FROM division WHERE oprano = ". SalesRefLookup() ." ";

$rs = odbc_exec($odbc_conn,$sql_salesref);

while (odbc_fetch_row($rs))








<td>Sales Ledger Ref No <form id="fSalesRef" name="fSalesRef" method="post" action=""><input name="fSalesRef" type="text" /></td>


<td>Company Name <form id="fCompany" name="fCompany" method="post" action="">

      		<input type="text"  value="<?php if (SalesRefLookup() <> "") { echo SalesRefLookup(); } ?>" name="fCompany" /></td>




<!-- Just stuck to the Company Name field for now...figured if we can get this to work, the rest will as well -->

<!-- and here is the code which I borrowed for the keyboard hotkey, just in case you need it -->



 * Version : 2.01.B

 * By Binny V A

 * License : BSD


shortcut = {

	'all_shortcuts':{},//All the shortcuts are stored in this array

	'add': function(shortcut_combination,callback,opt) {

		//Provide a set of default options

		var default_options = {







		if(!opt) opt = default_options;

		else {

			for(var dfo in default_options) {

				if(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];



		var ele =;

		if(typeof == 'string') ele = document.getElementById(;

		var ths = this;

		shortcut_combination = shortcut_combination.toLowerCase();

		//The function to be called at keypress

		var func = function(e) {

			e = e || window.event;


			if(opt['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields

				var element;


				else if(e.srcElement) element=e.srcElement;

				if(element.nodeType==3) element=element.parentNode;

				if(element.tagName == 'INPUT' || element.tagName == 'TEXTAREA') return;



			//Find Which key is pressed

			if (e.keyCode) code = e.keyCode;

			else if (e.which) code = e.which;

			var character = String.fromCharCode(code);


			if(code == 188) character=","; //If the user presses , when the type is onkeydown

			if(code == 190) character="."; //If the user presses , when the type is onkeydown

			var keys = shortcut_combination.split("+");

			//Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked

			var kp = 0;


			//Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken

			var shift_nums = {





















			//Special Keys - and their codes

			var special_keys = {






















































			var modifiers = { 

				shift: { wanted:false, pressed:false},

				ctrl : { wanted:false, pressed:false},

				alt  : { wanted:false, pressed:false},

				meta : { wanted:false, pressed:false}	//Meta is Mac specific



			if(e.ctrlKey)	modifiers.ctrl.pressed = true;

			if(e.shiftKey)	modifiers.shift.pressed = true;

			if(e.altKey)	modifiers.alt.pressed = true;

			if(e.metaKey)   modifiers.meta.pressed = true;


			for(var i=0; k=keys[i],i<keys.length; i++) {


				if(k == 'ctrl' || k == 'control') {


					modifiers.ctrl.wanted = true;

				} else if(k == 'shift') {


					modifiers.shift.wanted = true;

				} else if(k == 'alt') {


					modifiers.alt.wanted = true;

				} else if(k == 'meta') {


					modifiers.meta.wanted = true;

				} else if(k.length > 1) { //If it is a special key

					if(special_keys[k] == code) kp++;


				} else if(opt['keycode']) {

					if(opt['keycode'] == code) kp++;

				} else { //The special keys did not match

					if(character == k) kp++;

					else {

						if(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase

							character = shift_nums[character]; 

							if(character == k) kp++;






			if(kp == keys.length && 

						modifiers.ctrl.pressed == modifiers.ctrl.wanted &&

						modifiers.shift.pressed == modifiers.shift.wanted &&

						modifiers.alt.pressed == modifiers.alt.wanted &&

						modifiers.meta.pressed == modifiers.meta.wanted) {



				if(!opt['propagate']) { //Stop the event

					//e.cancelBubble is supported by IE - this will kill the bubbling process.

					e.cancelBubble = true;

					e.returnValue = false;


					//e.stopPropagation works in Firefox.

					if (e.stopPropagation) {




					return false;




		this.all_shortcuts[shortcut_combination] = {



			'event': opt['type']


		//Attach the function with the event

		if(ele.addEventListener) ele.addEventListener(opt['type'], func, false);

		else if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);

		else ele['on'+opt['type']] = func;


	//Remove the shortcut - just specify the shortcut and I will remove the binding

	'remove':function(shortcut_combination) {

		shortcut_combination = shortcut_combination.toLowerCase();

		var binding = this.all_shortcuts[shortcut_combination];


		if(!binding) return;

		var type = binding['event'];

		var ele = binding['target'];

		var callback = binding['callback'];

		if(ele.detachEvent) ele.detachEvent('on'+type, callback);

		else if(ele.removeEventListener) ele.removeEventListener(type, callback, false);

		else ele['on'+type] = false;



Open in new window

Question by:BenthamLtd
    LVL 1

    Accepted Solution


    It certainly can be achieved from a single page through the use of AJAX style functions.  In order to debug the applications, first break it into sections.

    1) Your hotkey control
    2) Your information look-up page
    3) Implement the AJAX call function
    4) Your results display.

    1) Start by simply altering the hotkey function to simply perform an "alert('Hotkey Works!')".  This will verify that there are no bugs in your hotkey function.

    2) In order to display data without a full-page postback, you need to create a 'background page' which will provide the resulting data.  When achieveing similar results, I used to create JSON style page outputs, using server side coding, I would write out data to the page in the following format:

    {CompanyName:"My Company Ltd.", PhoneNumber:"01234 56789", Email:""}

    The above would be all the text that (if the page was called on a browser) would be returned, ie there is no <html> or other tags.  This data is then called via AJAX javascript methods.

    3) Using an AJAX method, you can call your 'results' page.  The AJAX HTTP call will provide a method of "responseText" which is what you're interested in.  Once your ajax call is performed, call:

    var ResponseData = myajaxcall.responseText();

    4) Now, to output this data, simply place empty DIV or SPAN html elements in the positions where you want to display the data and give them an ID:

    ie:  <div id="ResultCompanyName"></div>

    Finally, to add the result data to the div field, perform the assignment just below your ResponseData assignment:

    document.getElementById("ResultCompanyName").innerHTML = ResponseData.CompanyName;

    This should get you going.
    LVL 2

    Assisted Solution

    Hi Bentham Ltd,

    From the looks of it you'll need to use AJAX to handle the database lookup if you want everything to happen on the same page without having reload it.

    At the minute, you are trying to call your javascript function SalesRefLookup() using PHP (which is why you are getting the error "undefined function SalesRefLookup()".

    Basically, your requirement can be simplified as follows:

    1. User enters 'SalesRef' and presses the 'F2' button
    2. Javascript picks up the value of 'SalesRef' and then (using AJAX) passes it to your database lookup
    3. The response is then passed back to javascript which then updates the other form items with the results (if any were found).

    Making the most out of AJAX will involve a good understanding of Javascript. I can recommend the 'Prototype.js' framework which simplifies many methods




    Author Comment

    Thanks for the replies so far both. Wow....this looks complicated. Never been a JavaScript person, I'm more of a HTML, PHP and ASP man. So, reckon I could still parse my ODBC PHP lookup over AJAX or would it be a case of doing it on the page in question?

    Any chance you could provide any further code examples?

    Blimey...for such a small feature this looks to be onehellova challenge. But I won't resort to $_GET just yet... :)

    Author Comment

    Actually, thinking about it, and the fact that project deadline is ever imminent...I'm gonna chicken out and do it using bog-standard PHP and HTML requests. Thank you both though for all your help.
    LVL 2

    Expert Comment

    Pleasure. When you get some spare time, search for 'javascript autocomplete prototype' or 'javascript autocomplete' there are plently of tutorials to get your teeth into. I also found this one: which is a good starting point.

    Hope this helps


    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    Suggested Solutions

    Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    The viewer will learn how to dynamically set the form action using jQuery.
    In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now