Creating Form Elements with Javascript

Updated on 7/13/2008.

For those of you who have ever been given the task of making a javascript function that generates DOM elements on the fly, you may very well have run into technical issues with none other than (drum roll please) ... IE.

Below is a demo that will create a form using the createElement() function and submit an ajax request using this new form. Please note: this script was successfully tested in Windows versions of Internet Explorer 5.5 - 7, Firefox 1.5 - 3, Opera 9 and Safari 3.

Below this demo is the source code.

var createDOMForm = function () {
    // Where the form will be placed into the page
    var parentElement = document.getElementById("formGoesInsideThisDiv");
    cleanElement(parentElement);
    
    // Create a form
    try {
        var myForm = document.createElement("<FORM name='myForm'></FORM>"); 
    } catch (e) {
        var myForm = document.createElement("FORM");
        myForm.name = "myForm";
    }
    myForm.method = "post";
    myForm.action = "/webdev/creating_response_action";
    myForm.id = "myForm";
    
    // Create a radio selection
    try {
        var radioFieldA = document.createElement("<INPUT name='myRadio' checked />");
        var radioFieldB = document.createElement("<INPUT name='myRadio' />");
    } catch (e) {
        var radioFieldA = document.createElement("INPUT");
        radioFieldA.name = "myRadio";
        radioFieldA.checked = "true";
        var radioFieldB = document.createElement("INPUT");
        radioFieldB.name = "myRadio";
    }
    radioFieldA.type = "radio";
    radioFieldA.value = "true";
    myForm.appendChild(radioFieldA);
    myForm.appendChild(document.createTextNode("true"));
    myForm.appendChild(document.createElement("BR"));
    radioFieldB.type = "radio";
    radioFieldB.value = "false";
    myForm.appendChild(radioFieldB);
    myForm.appendChild(document.createTextNode("false"));
    myForm.appendChild(document.createElement("BR"));
    
    // Create a checkbox
    try {
        var checkbox = document.createElement("<INPUT name='myCheckbox' checked />");
    } catch (e) {
        var checkbox = document.createElement("INPUT");
        checkbox.name = "myCheckbox";
        checkbox.checked = "true";
    }
    checkbox.type = "checkbox";
    myForm.appendChild(checkbox);
    myForm.appendChild(document.createTextNode("check?"));
    
    // Create a text field
    try {
        var textField = document.createElement("<INPUT name='myTextField' />");
    } catch (e) {
        var textField = document.createElement("INPUT");
        textField.name = "myTextField";
    }
    textField.type = "text";
    textField.value = "text field";
    textField.style.display = "block";
    myForm.appendChild(textField);
    
    // Create a textarea
    try {
        var textArea = document.createElement("<TEXTAREA name='myTextArea'></TEXTAREA>");
    } catch (e) {
        var textArea = document.createElement("TEXTAREA");
        textArea.name = "myTextArea";
    }
    textArea.appendChild(document.createTextNode("text area"));
    textArea.style.display = "block";
    myForm.appendChild(textArea);
    
    // Create a drop-down list
    try {
        var dropDown = document.createElement("<SELECT name='myDropDown'></SELECT>");
    } catch (e) {
        var dropDown = document.createElement("SELECT");
        dropDown.name = "myDropDown";
    }
    dropDown.style.display = "block";
    for (var i=1; i<11; i++) {
        var option = document.createElement("option");
        option.value = "myOption" + i;
        option.appendChild(document.createTextNode("Option " + i));
        dropDown.appendChild(option);
    }
    dropDown.selectedIndex = 3;
    myForm.appendChild(dropDown);
    
    // Create a multi select drop-down list
    try {
        var dropDownMulti = document.createElement("<SELECT name='myDropDownMulti[]' multiple size=4></SELECT>");
    } catch (e) {
        var dropDownMulti = document.createElement("SELECT");
        dropDownMulti.name = "myDropDownMulti[]"; // The [] addon creates a parameter array
        dropDownMulti.size = 4;
        dropDownMulti.multiple = "true";
    }
    dropDownMulti.style.display = "block";
    for (var i=1; i<11; i++) {
        var option = document.createElement("option");
        option.appendChild(document.createTextNode("Option " + i));
        option.value = "myOption" + i;
        if (i==2 || i==4) { 
            option.setAttribute("selected","true"); //option.selected = "true"; does not work in Opera (9.25 only?)
        } 
        dropDownMulti.appendChild(option);
    }
    myForm.appendChild(dropDownMulti);
    
    // Create a button
    try {
        var newButton = document.createElement("<INPUT name='myButton' />");
    } catch (e) {
        var newButton = document.createElement("INPUT");
        newButton.name = "myButton";
    }
    newButton.type = "button";
    newButton.value = "Send AJAX Request";
    newButton.style.display = "block";
    newButton.onclick = function() {
        getAjaxResponse();
    }
    myForm.appendChild(newButton);
    
    // Place the form into the page
    parentElement.appendChild(myForm);
};

var cleanElement = function (el) {
    while (el.firstChild) {
        // nothing too fancy or fast here - removing all child elements to clean it out
        el.removeChild(el.firstChild);
    }
};

var getAjaxResponse = function () { // This function only works with MooTools
    new Ajax("/webdev/creating_response_action", {data: $("myForm"), update: $("responseGoesInsideThisDiv"), evalScripts: true}).request();
};
 

Questions and comments welcome.