Combobox links

jameswsparker · 10-25-2012, 05:52 PM

Hello geniuses,
Below is a code for a combobox and search feature currently listing various options.

Could someone adjust this code so that I can easily assign links to each option in the combobox please? I'm looking for the user to be able to double-click on an option, and for it to open it's assigned link in a new window.

Here is the code:

<html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Load a page</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
var functionlist = Array(






"Page 1",
"Page 2",
"Page 3",
"Page 4",
"Page 5",
" "
);

// 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++)
{
if(functionlist[i].search(re) != -1)
{
selectObj[numShown] = new Option(functionlist[i],"");
numShown++;
}
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(500);" type="text" name="functioninput" autocomplete=off placeholder="Search for a page" 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">
<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 all pages" style="font-family: Arial; "></td>
</tr>
</table>
</div>
</tr>
</table>
</form></td>
</tr>
</table>
</td>
</tr>
</table>

</body>

</html>

felgall · 10-25-2012, 09:17 PM

1. if you wrap all your code in code tags by pressing the # button then it makes the code easier to read.

2. If you separate the JavaScript into a separate file from the HTML then it makes both easier to read and also makes validating each of them easier.

3. You don't appear to have an y combo boxes in your form. Combo boxes were only added in HTML 5 and generally would be coded as follows:

Code:

<input type="text" list="state">
<datalist id="state">
<option value="act">
<option value="nsw">
<option value="nt">
<option value="qld">
<option value="sa">
<option value="tas">
<option value="vic">
<option value="wa">
</datalist>

With a combo box the person filling out the field can either select a value from the list or enter their own value if they prefer (a combo box is a combination of a text input field and a select list).

4. Your code does contain a select list - is that what you are misidentifying as a combo box or are you attempting to convert it into a combo box using JavaScript (in which case it would be far easier to use an input field and a list as the HTML to convert).

With a form that contains a select list where the values are addresses of different pages you can attach JavaScript to the select using the change event listener that can then redirect to the appropriate page when the selected value in the select list is changed but you can't perform any event processing on the individual options as JavaScript can only interact with complete elements in the web page and the element in this situation would be the entire select.

jameswsparker · 10-26-2012, 12:18 AM

Apologies,
I've mistaken this for a combobox.
My intentions for it's changes remain the same though.

I just don't know how to do it. :s hmm...
What do you reckon?

felgall · 10-26-2012, 02:12 AM

new Option(functionlist[i],"");

The second parameter in that statement is the value for the option - if you put the URL there then it becomes easy to transfer to that page by referencing the value that the select has.

jameswsparker · 10-26-2012, 02:20 PM

Would you be able to do it for me please? Sorry, I can't seem to get it to work at all.