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 5 of 5

Thread: Combobox links

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

    Combobox links

    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">

    <!-- 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
    var functionlist = Array(




    <!-- Contents -->
    <!-- When listing files: -->
    <!-- Remove main directory from title/name -->
    <!-- Assure all files are listed alphabetically from A-Z -->

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

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,627
    Thanks
    0
    Thanked 647 Times in 637 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Jan 2009
    Location
    Bristol, England
    Posts
    43
    Thanks
    11
    Thanked 0 Times in 0 Posts
    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?
    Your friendly neighbourhood, James Parker.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,627
    Thanks
    0
    Thanked 647 Times in 637 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    New Coder
    Join Date
    Jan 2009
    Location
    Bristol, England
    Posts
    43
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Would you be able to do it for me please? Sorry, I can't seem to get it to work at all.
    Your friendly neighbourhood, James Parker.


  •  

    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
    •