Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jan 2009
    Location
    Bristol, England
    Posts
    43
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Exclamation Combobox not working

    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!
    Can anybody correct this?

    Here's the code:

    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">
    
    <!-- Security -->
    <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">
    &nbsp;<p>&nbsp;</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>
    Last edited by jameswsparker; 10-31-2012 at 02:19 PM. Reason: Ease of understanding
    Your friendly neighbourhood, James Parker.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,166
    Thanks
    23
    Thanked 601 Times in 600 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    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.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #4
    New Coder
    Join Date
    Jan 2009
    Location
    Bristol, England
    Posts
    43
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Arrow

    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
    Your friendly neighbourhood, James Parker.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    In this code that I gave you:
    Code:
            // 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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New Coder
    Join Date
    Jan 2009
    Location
    Bristol, England
    Posts
    43
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Arrow

    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?

    Sorry to be a pest.
    Last edited by jameswsparker; 11-01-2012 at 11:46 AM. Reason: Ease of understanding
    Your friendly neighbourhood, James Parker.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    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:
    Code:
    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:
    Code:
         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:
    Code:
            <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •