Read, With the Name of Your Lord Who Created

DOM & HTML Revisited

Posted by triaslama on April 18, 2008

What can I say about DOM (Document Object Model)? Its lightweight, its everywhere, its some kind useful. How about HTML? its everywhere and its easy. But, I think, the most important about them both is because both doesn’t suck!
I don’t know how about you. I just doing a simple (and I think interesting enough) exploration about HTML & DOM. Let’s check it out!

Suppose I want to make an element enabled & disabled when I select an item from a dropdownlist (combo box). With HTML it can be accomplished easily! How about if I want to make a new <select> element when I have choose something from previous <select> element?? With mix blend of DOM & HTML it can be accomplished easily too!

This page consist of two parts, each of them separated by horizontal lin. This is the screenshots of my simple page:
init
Initial condition, first part and second part separated by horizontal line.

First Part
When we select “Others” from fruit dropdownlist the text box will be enabled, otherwise text box will remain disabled. Please aware about one thing, because we only use HTML, DOM, and Javascript this example is stateless. If we refresh the page everything will back to its initial state whatever changes we have made.

enabled
Others selected, so textbox and button enabled.

Everytime we select the fruit dropdownlist change event will be fired, this event will activate selectedItemChange function. selectedItemChange receives one parameter that is fruit dropdownlist value. Then this value evaluated. If value equal with “others” then textbox and button will be enabled. If we click “Add To List” button, value entered in text box will be filled in fruit dropdownlist.

Second Part
If we select something except the dash (—) a new dropdownlist element will be created and populated with the appropriate values. This is done by following code:

var slcTwo = document.createElement("select");
for (var i=0;i<arr[val].length;i++) {
var option = document.createElement("option");
var text = document.createTextNode(arr[val][i]);
option.appendChild(text);
slcTwo.appendChild(option);

}

container.appendChild(slcTwo);

And this is screenshot when a dropdownlist created and populated with appropriate value based on the value of previous dropdownlist.

Another dropdownlist created automatically and populated with values according to selected item in subject dropdownlist.

Now let the code talk for more detail, and here is the complete of HTML code:

    <html>
    <head>
    <title>Test Something</title>
    <script lang=”javascript” type=”text/javascript” src=”explore_code.js” >
    </script>
    </head>
    <body>
    <b>Fruit: </b>
    <select id=”slcFruit” onchange=”selectedItemChange(this.value)” >
    <option value=”banana”>Banana</option>
    <option value=”jackfruit”>Jackfruit</option>
    <option value=”mango”>Mango</option>
    <option value=”orange”>Orange</option>
    <option value=”others”><b>Others</b></option>
    </select>

    <input type=”text” id=”txtMore” disabled=”true” />

    <input type=”button” id=”btnAdd” value=”Add To List” onclick=”addToList(txtMore.value)” disabled=”disabled” />
    <p />
    <hr />
    <b>Subject: </b><select id=”slcOne” onchange=”selectedItemChange2(this.value)”>
    <option value=””> — </option>
    <option value=”computer”>Computer</option>
    <option value=”sports”>Sports</option>
    <option value=”vegetables”>Vegetables</option>
    </select>
    <p />
    <div id=”container”>
    </div>
    </body>
    </html>

Explore_presentation.htm refers to explore_code.js. Javascript code with DOM inside listed below (explore_code.js):

    var arr;

    window.onload = function()
    {
    arr = new Array();

    arr[“computer”] = [“Hardware”,”Software”,”Internet”,”Programming”,”Science”];
    arr[“sports”] = [“Football”,”Badminton”,”Tennis”,”Swimming”];
    arr[“vegetables”] = [“Cabbage”,”Carrot”,”Spinach”,”Tomato”];
    };

    function selectedItemChange(val)
    {
    var resVal = “others”;
    var txtMore = document.getElementById(“txtMore”);
    txtMore.value = “”;
    txtMore.disabled = true;

    if (val==resVal) {
    txtMore.disabled = false;
    btnAdd.disabled = false;
    }
    }

    function addToList(newVal)
    {
    var slcFruit = document.getElementById(“slcFruit”);
    var txtMore = document.getElementById(“txtMore”);
    var btnAdd = document.getElementById(“btnAdd”);
    var option = new Option(newVal, newVal);

    txtMore.value = “”;
    txtMore.disabled = true;
    btnAdd.disabled = true;
    slcFruit.appendChild(option);
    }

    function selectedItemChange2(val)
    {
    var container = document.getElementById(“container”);
    container.innerHTML = “”;

    var slcTwo = document.createElement(“select”);
    for (var i=0;i<arr[val].length;i++) {
    var option = document.createElement(“option”);
    var text = document.createTextNode(arr[val][i]);
    option.appendChild(text);
    slcTwo.appendChild(option);
    }

    container.appendChild(slcTwo);
    }

I think it something looks good, how about you?

One Response to “DOM & HTML Revisited”

  1. great post man, i think your writing is really great, and i’d love to read more! hope you keep up the posting and keep up the good work!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: