From Dropdown Listboxes to Comboboxes (The Code)

Here we present a simple demo of the principle and the coding. Please note that the coding works only for Microsoft Internet Explorer 5.0 and higher.

Dropdown 'Combobox' Demo

This small demo shows the usage of the 'Combobox' extension for creating new entries in a dropdown listbox.

Lager ID

The Code

And here is the scripts code for it. There has to be code for the page carrying the listbox and for the page implementing the dialog box.

The Code on this Page

This code handles the calling of the popup for entering a value and the addition of the new value to the list after the dialog has been closed.

For using this code, include the Javascript statement onchange="EvalResult()" in the <SELECT> statement of the dropdown listbox.

<script name="ComboDemo">
<!--
         
// ----------------------------------------------------------------------------------------------
// EvalResult 
// This is the main function and is called when the user clicks
// 'New Value' in the dropdown listbox
// ----------------------------------------------------------------------------------------------
function EvalResult() {
// Get the source element as a reference for all later processing
var vElem = window.event.srcElement;	 
// Check again if the correct entry was clicked
    if (vElem.value  == 'New')
    {
// Display the dialog and wait for the result
    var rslt = ShowDlg('ComboPopup.html');
// null is returned when the user cancels the dialog
    if (rslt != null){
// If we received a valid result, insert it into the listbox
// remove the last entry(the 'New Value')
        RemoveOption(vElem, vElem.length-1);
// append the new value
        CreateOption(vElem, rslt, 'null', true);
// and finally append the 'New value' again		
        CreateOption(vElem, 'New value...', 'New', false);
        }
    else
        vElem.selectedIndex = 0;
    }
}
         
// ----------------------------------------------------------------------------------------------
// CreateOption
// Creates an entry in the 'oElem' Listbox
// ----------------------------------------------------------------------------------------------
function CreateOption(oElem, oText, oVal, oSelect) {
// Create a new Option-Element
    var oOption = document.createElement("OPTION");
// Append to end of list
    oElem.options.add(oOption);
// and set it's values
    oOption.innerText = oText;
    oOption.value = oVal;
    oOption.selected = oSelect;
}
         
// ----------------------------------------------------------------------------------------------
// RemoveOption
// Removes an entry from the 'oElem' Listbox
// ----------------------------------------------------------------------------------------------
function RemoveOption(oElem, oNr) {
    oElem.options.remove(oNr);
}
// ----------------------------------------------------------------------------------------------
// RemoveAll
// Removes all entries from the list
// ----------------------------------------------------------------------------------------------
function RemoveAll(oElem) {
var i = 0;
for (i = oElem.length; i >= 0;   i--)  {
    oElem.options.remove(i);
	}
}
         
// ----------------------------------------------------------------------------------------------
// Show Dlg
// Displays the modal dialog with a whole bunch of options
// ----------------------------------------------------------------------------------------------
function ShowDlg(tUrl) {
// Set the dialog window options
    var Center = "center=no; ";
    var sElem = event.srcElement;
    var Help = "help=no;";
    var Status = "status=no; ";
    var Resize = "resizable=yes ";
    var Height = "dialogHeight=" + 350 + "px; ";
    var Width = "dialogWidth=" + 300 + "px; ";
    var posLeft = sElem.offsetLeft + sElem.offsetWidth + window.screenLeft;
    var posTop = sElem.offsetTop + sElem.offsetHeight + window.screenTop;
    var Left = "dialogLeft=" + posLeft + "px; ";
    var Top = "dialogTop=" + posTop + "px; ";
    var unadorned = "yes";
// Compile the option string
    var ParamStr = Top + Left + Height + Width + Center + Help + Status + Resize + unadorned;
// Call the dialog and wait for results
    result = window.showModalDialog(tUrl, ParamStr , ParamStr);
    return(result);
}
         
// -->
</script>

The Code on the Dialog Window Page

This code handles the dialog window for entering a value, especially the handling of input errors. For using this code, include

the Javascript statement onclick="returnText('btApply')" in the <A> tag of the OK button, and the statement onclick="returnText('Cancel')" in the <A> tag of the Cancel button of the dialog window
the statements onkeydown="checkfld1()" onkeypress=" fnValidate()" in the <INPUT> tag of the input field of the dialog window
the statement onload="{AdjustWinSize(); Setup();}" in the <BODY> tag of the respective page

<script name="ShowDlg" language="JavaScript1.2">
<!--
         
function ShowDlg(tUrl) {
    var Center = "center=yes; ";
    var Help = "help=yes ;";
    var Status = "status=no; ";
    var Resize = "resizable=yes ";
    var Height = "dialogHeight=" + 450 + "px; ";
    var Width = "dialogWidth=" + 520 + "px; ";
    var Left = "dialogLeft=" + 10 + "px; ";
    var Top = "dialogTop=" + 10 + "px; ";
         
    var ParamStr = Height + Width + Center + Help + Status + Resize;
    result = window.showModalDialog(tUrl, ParamStr , ParamStr);
    returnValue.innerText= '  ' + result; 
}
         
// -->
</script>
         
<script language="javascript" type="text/javascript" name="ErrorHandling">
<!--
         
function show(object)  {
    if (document.layers && document.layers[object] !=null)
    document.layers[object].visibility='visible';
    else if (document.all)
    document.all[object].style.visibility='visible';
}
         
function hide(object)  {
    if (document.layers && document.layers[object] !=null)
    document.layers[object].visibility='hidden';
    else if (document.all)
    document.all[object].style.visibility='hidden';
}
         
function checkfld1() {
    if(isNaN(oText.value)) {	
    oText.focus();
    oText.select();
    show('eMsg');
    return false;
    }
    hide('eMsg');
    return true;
}
         
function checkInput(key) {
    if(isNaN(key)){	
        show('eMsg');
        oText.focus();
        oText.text = '0';
        oText.select();	
        return false;
    }
    hide('eMsg');
    return true;
}
         
function fnValidate() {
    switch(event.keyCode)
    {
    case 13:
        returnText('btApply');
        break;
    case 27: 
        returnText('btCancel');
        break;
    default:
        checkInput(String.fromCharCode(event.keyCode));
    }
}
         
// -->
</script>
         
<script language="JavaScript1.2" name="returnText">
<!--
         
function returnText(strTitle) {
if (strTitle == 'btApply') {
    window.returnValue =  oText.value;
    window.close;
    }
else 	 
    {
    window.returnValue = null;
    window.close;
    }
}
         
// Determines the size of the content and resizes the dialog automatically
function AdjustWinSize () {
var db = document.body;
var diffH, diffW, dH, dW;
var someOffset = 5;
         
diffW = db.scrollWidth - db.offsetWidth;
diffH = db.scrollHeight - db.offsetHeight;
         
dW = diffW + parseInt(dialogWidth);
dH = diffH + parseInt(dialogHeight);
      
dialogWidth = (dW + someOffset) + 'px';
dialogHeight = (dH + someOffset) + 'px';
}
         
// -->
</script>
         
<script name="Setup" language="JavaScript1.2">
<!--
function Setup() {
    oText.focus();
    oText.select();
}
         
// -->
</script>

Final Word

Nothing can be had for nothing - the solution shown takes some effort for the scripts. Once there, however, it can be reused in a variety of ways.

by Jens Heuer, SAP AG, Usability Engineering Center