Question

Here’s some low-hanging fruit for those more comfortable with Javascript than I…

I want to improve a Moodle plugin’s admin UI. (Moodle is a PHP-based web app). What I need to do is take what is currently a text box, with semi-colon delimited entries and replace that with a editable list.

The HTML elements I would use is a select list, a text input field and another hidden textfield. I guess a couple of submit buttons too, one for adding, and the other for removing of entries.

The behaviour would be:

• Entries can be added to the select list from the visible textbox upon some kind of submit (this cannot reload the page).

• The hidden textbox would contain all the entries from the select list, just semi-colon delimited

• There’s a function to remove entries from the select list that also does not reload the page.

• The hidden textbox is updated with add/remove actions

This seems to me like something that’s easy enough. Though I’m having a hard time finding a close enough example to rip off.

This sample code is as close as I’ve found thus far. There’s got to be some good examples of precisely this sort of thing out there. Any decent pointers will be rewarded with + votes.

Answer 1

What you want to do is use JavaScript and manipulate with the DOM of the webpage. Basically, the HTML of a webpage is parsed and rendered by the browser into a tree of elements. Each HTML tag like <select> is an element in the tree. You use JavaScript to interact with this tree by performing operations like removing elements from this tree or adding elements to this tree. (Note that preforming operations on the tree will not refresh the page.)

The standardized API to do these sorts of manipulation in JavaScript is known as the DOM. However, many people, myself included, think that this API is very clunky and not nearly expressive enough. Doing even trivial things require tons of lines of code. For this reason, many developers do not use the DOM directly instead using more powerful libraries, such as jQuery, to make their lives easier.

Below is an example of some HTML + JavaScript that I think mimics most of your requirements. Ideally for learning purposes, this would be written purely using the standard W3C DOM API, but since your problem is not that trivial, I resorted to using jQuery instead.

The HTML:

<select id="list" multiple="multiple"></select>
<input id="removeButton" type="button" value="Remove"></input>

<div>
    <input id="optionAdder" type="text"></input>
    <input id="addButton" type="button" value="Add"></input>
</div>

<br>
<input id="clearButton" type="button" value="Clear All"></input>
<div>Not So Hidden: <input id="hidden" type="text"></input></div>

The JavaScript:

// Uses jQuery to define an on document ready  call back function
$(function(){
    // The code in this function runs when the page is loaded


    var options = []; // contains all the options

    // add new option to drop-down
   var addOption = function(optText) {

       // Create new option element and add it to the <select> tag
        $('<option></option>')
            .attr('value', optText).text(optText)
            .appendTo( $('#list') );
    };

    // writes the names of all the options in the "hidden" text box
    var fillHidden = function() {
        $('#hidden').val('');           
        var hiddenText = "";
        for(var i=0; i< options.length; i++) {
           if(hiddenText) {
               hiddenText += "; ";
           } 
           hiddenText += options[i];
        }
        $('#hidden').val(hiddenText);    
    }

    // Bind the click event of the "Add" button to add an option on click
    $('#addButton')
        .click(function(){
            var optText = $('#optionAdder').val();

            if(optText) {
                addOption(optText);
            }
            $('#optionAdder').val('');
            options.push(optText);
            fillHidden();
        });

    // Bind the click event of the "Remove" button to remove the selected options on click
    $('#removeButton')
        .click(function(){
            $('#list option:selected').each(function(){

                var optIndex = $.inArray($(this).val(), options);
                if(optIndex > -1) {
                   options.splice(optIndex, 1);
                   $(this).remove(); 
                }
                fillHidden();
            });
        });

    // Bind the click event of the "Clear" button to clear all options on click
    $('#clearButton')
        .click(function(){
            $('#list').children().remove();
            options = [];
            fillHidden();
        });
});

Here is a jsfiddle demonstrating the code