Combobox not working

jameswsparker

10-31-2012, 02:17 PM

Below, is a code I've been working on where the user searches and selects an item in the drop-down list, and it'll automatically open that page in a new window. It doesn't seem to work at all! :confused:
Can anybody correct this?

Here's the code:

<html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Direct access</title>

</head>

<body OnLoad=" document.form.functioninput.focus()" link="#000000" vlink="#000000" alink="#808080" style="font-family: Arial; color: #000000; font-size: 10pt" bgcolor="#CCCCCC" topmargin="5" leftmargin="5" rightmargin="5" bottommargin="5">


<body oncontextmenu="return false;">

<table border="0" width="100%" cellpadding="11">
<tr>
<td valign="top">
<script type="text/javascript">

// this is the javascript array holding the function list
// array of arrays
var functionList = [
[ "name1", "http://url1" ],
[ "name2", "http://url2" ],
];

// This is the function that refreshes the list after a keypress.
// The maximum number to show can be limited to improve performance with
// huge lists (1000s of entries).
// The function clears the list, and then does a linear search through the
// globally defined array and adds the matches back to the list.
function handleKeyUp(maxNumToShow)
{
selectObj = document.forms[0].functionselect;
textObj = document.forms[0].functioninput;

if(document.forms[0].functionradio[1].checked == true)
{
strText = "^"+textObj.value;
}
else
{
strText = textObj.value;
}
var numShown;

re = new RegExp(strText,"gi");

ClearOptionsFast('functionselect');
selectObj = document.forms[0].functionselect;

numShown = 0;
for(i = 0; i < functionList.length; i++)
{
var listEntry = functionList[i];

// for first version above, array of arrays:
if ( listEntry[0].search(re) != -1)
{
selectObj[numShown++] = new Option( listEntry[0], listEntry[1] );
}

// for second version above, array of objects:
if ( listEntry.name.search(re) != -1)
{
selectObj[numShown++] = new Option(listEntry.name, listEntry.url );
}
if(numShown == maxNumToShow)
{
break;
}
}
if(selectObj.length == 1)
{
selectObj.options[0].selected = true;
}
}

function ClearOptionsFast(id)
{
var selectObj = document.getElementById(id);
var selectParentNode = selectObj.parentNode;
var newSelectObj = selectObj.cloneNode(false); // Make a shallow copy
selectParentNode.replaceChild(newSelectObj, selectObj);
return newSelectObj;
}

// this function gets the selected value and loads the appropriate
// php reference page in the display frame
// it can be modified to perform whatever action is needed, or nothing
function handleSelectClick()
{
selectObj = document.forms[0].functionselect;
textObj = document.forms[0].functioninput;
if(selectObj.selectedIndex == -1) {
return;
}

selectedValue = selectObj.options[selectObj.selectedIndex].text;

selectedValue = selectedValue.replace(/_/g, '-') ;
parent.frames["functiondisplay"].location.href= "http://www.google.co.uk/search?sourceid=chrome&ie=UTF-8&q="+selectedValue+"";
//http://www.php.net/manual/en/function."+selectedValue+".php";

}

function initpage() {
handleKeyUp(18);
document.forms[0].functioninput.focus();
}
</script>
<table>
<tr>
<td valign="top" align="left">
<form name="form" onSubmit="handleSelectClick();return false;" action="#">
<p>
<input onKeyUp="handleKeyUp(1000);" type="text" name="functioninput" autocomplete=off placeholder="Search for anything" VALUE="" style="font-size:10pt;width:34ex; font-family:Arial; color:#000000; font-weight:bold" size="40"><br>
<select onClick="handleSelectClick();" name="functionselect" id="functionselect" size="20" style="font-size:10pt;width:590;height:384"></select></p>
<table border="0" width="100%">
<tr>
<td align="center" width="150">
<div align="left">
 <p> </p>
<table border="0">
<tr>
<td align="center" width="125">
<p align="left"><label for="contains"><font size="3"><input type="radio" name="functionradio" checked id="contains" onchange="handleKeyUp(20);"></font><font size="2">Containing</font></label></td>
<td align="center" width="125">
<p align="left"><label for="starts"><font size="3"><input type="radio" name="functionradio" id="starts" onchange="handleKeyUp(20);"></font><font size="2">Starting With</font></label></td>
<td align="center" width="125">
<input type="button" onClick="handleKeyUp(5000);" value="List everything" style="font-family: Arial; "></td>
</tr>
</table>
</div>
</tr>
</table>
</form></td>
</tr>
</table>
</td>
</tr>
</table>

</body>

</html>

sunfighter

10-31-2012, 04:12 PM

Suggest you look at your code and make some corrections. You do not have a doctype. From some of your tags I think you want html5 so I added that and everything goes to hell.
Maybe because you have inline tags that should be css.
You have two <body> tags both have depreciated attributes or unknown attributes.

The biggest thing you can do for yourself is to start using div's to position html elements and not tables. Even when tables were the only way to do things putting tables inside of a table slowed loading time and was never recommended.

Lastly you do not have a combobox drop down list in your code.

WolfShade

10-31-2012, 04:17 PM

RE: tables. As I understand it, every table is parsed twice by the browser - once for structure/format, then again for content. Not efficient.

Table-less design/development has a bit of a high learning curve, but it's much better for performance.

jameswsparker

10-31-2012, 05:10 PM

Thanks for your swift response.

Would anybody be able to rewrite my code though to make the URLs work?
I've been unsuccessful as I haven't much knowledge on this. :(

Many thanks. :s

Old Pedant

10-31-2012, 07:56 PM

In this code that I gave you:
// for first version above, array of arrays:
if ( listEntry[0].search(re) != -1)
{
selectObj[numShown++] = new Option( listEntry[0], listEntry[1] );
}

// for second version above, array of objects:
if ( listEntry.name.search(re) != -1)
{
selectObj[numShown++] = new Option(listEntry.name, listEntry.url );
}

you were supposed to use *EITHER* the red code *OR* the magenta code.

It will *NEVER* work if you try to use *BOTH*.

Go back and read my message on this again.

jameswsparker

11-01-2012, 11:46 AM

Apologies, I've removed the second part but it still doesn't appear to be working. What have I done wrong?

Would you be able to re-write it for me please? :rolleyes:

Sorry to be a pest. :confused:

Old Pedant

11-01-2012, 08:37 PM

Isn't it time you learned to use a DEBUGGER????

As soon as I opened the page up and tried it in a debugger (happened to be using Chrome, but would have been same in MSIE 8+ or FireFox with Firebug) I got an error on this line:

parent.frames["functiondisplay"].location.href= "http://www.google.co.uk/search?sourceid=chrome&ie=UTF-8&q="+selectedValue+"";

Saying location is null (that is, non-existent).

And of course that is true! That's because parent is null!

THIS PAGE is *ALREADY* the top window. There is *NO PARENT* for the top window!

On top of that, you said "...it'll automatically open that page in a new window".

WHAT NEW WINDOW????

You have ZERO code there that even *TRIES* to create a new window!

CHANGE that line to THIS:

window.open("http://www.google.co.uk/search?sourceid=chrome&ie=UTF-8&q="+selectedValue, "_blank");

and it works!

************

I have to tell you, that is some very very disorganized and ugly HTML code.

<font> tags are obsolete. And in any case, a <font> tag does *NOT* affect the size of text in an <input> that it encloses. (You are doing <font size="3"><input></font>, which is pointless.)

And why why why do this:

<td align="center" width="125">
<p align="left">

If you wanted it aligned left, why did you first change it to center and than back to left?

You really really need to learn to use CSS. Stop coding inline styles into everything.

But mainly, you need to try to stop using nested tables for page layout. That went out of fashion about 1999.

Finally, as a general rule, if you only have one <form> on a page, you should put the <form> tag right after <body> and the </form> tag just before </body>. Only change that if you need to have multiples forms on a page.