Rob Newman

Click the box titles below to expand:

How To :: Using the Document Object Model (DOM) for dynamic content

The DOM is a powerful force for dynamically changing webpage content based on user interaction without having to load/reload a webpage. This page is basically me documenting the experiments I have done using the DOM as applied to practical problems. I hope you find it useful.

Expand your form field dynamically

The problem: I was looking for a way to dynamically create form fields within a table so users can upload a photo caption and a file.

Solution 1: The Basics

My first solution worked on Safari, Mozilla (Apple & Windows) but not Internet Explorer for Windows. I was originally using the createElement DOM tag to create a new table row (<tr>) tag and two table cells (<td>). The names of the fields are slightly complex as I creating associative arrays for processing in PHP and I wanted to ensure the caption fields matched the file names. This solution is bascially a replication of Bin-Blog's solution.

expand_field.js

<!-- 
// Code to add a new form field
function addField_1( area,captionName,captionID,fileName,fileID,limit ) {
 
        if( !document.getElementById ) return ;
 
        var field_area = document.getElementById(area) ;
        var all_inputs = field_area.getElementsByTagName("tr") ;
        var count = all_inputs.length - 1 ;
 
        // If the maximum number of elements have been reached, exit the function.
        // If the given limit is lower than 0, infinite number of fields can be created.
 
        if( count > limit && limit > 0 ) return ;
 
        if( document.createElement ) { //W3C Dom method.
                var tr = document.createElement("tr") ;
                var td = document.createElement("td") ;
                var td2 = document.createElement("td") ;
 
                var input = document.createElement("input") ;
 
                input.id = captionID+count ;
                input.name = captionName+'['+count+']' ;
                input.size = 40 ;
                input.maxlength = 100 ;
                input.type = "text" ;
                td.appendChild(input) ;
 
		var file = document.createElement("input") ;
 
                file.id = fileID+count ;
                file.name = fileName+'['+count+']'+'[file]' ;
                file.type = "file" ;
 
                td2.appendChild(file) ;
 
                tr.appendChild(td) ;
                tr.appendChild(td2) ;
 
                field_area.appendChild(tr) ;
        }
}
//-->
 

I still don't understand why it doesn't work in Windows IE (partially due to a poor DOM debugger for IE) but I had to get a solution quickly, so I started again.....

Solution 2: Back to the drawing board - I need it to work cross browser!

The solution I finally settled on works a little differently - it uses the DOM tags insertRow and insertCell. This method allows you create any number of table cells dynamically. I left the alert in so you can see which field number will be created. This solution is modified from the solution at mredkj.com

Here is a method to dynamically add form fields - a photo caption and a associated file:

expand_field_improved.js

<!--
// Improved DOM version to expand fields
function addField_2( area,descriptionName,descriptionID,fileName,fileID,limit ) {
 
        if( !document.getElementById ) return ; // Only DOM browsers
 
        var field_area = document.getElementById( area ) ;
        var lastRow = field_area.rows.length ;
        var iteration = lastRow ;
        var row = field_area.insertRow( lastRow ) ;
 
        // Cells
        var cellLeft = row.insertCell(0) ;
        var cellRight = row.insertCell(1) ;
 
        var count = lastRow - 1 ;
 
	// Comment out next line for production
        // alert('lastRow is '+lastRow+' iteration is '+iteration+' row is '+row+' count is '+count ) ;
 
        // If the maximum number of elements have been reached, exit the function.
        // If the given limit is lower than 0, infinite number of fields can be created.
 
        if( count > limit && limit > 0 ) return ;
 
        if( document.createElement ) { // W3C Dom method.
 
                var input = document.createElement('input') ;
                input.id = descriptionID+count ;
                input.name = descriptionName+'['+count+']' ;
                input.size = 40 ;
                input.maxlength = 100 ;
                input.type = 'text' ;
                cellLeft.appendChild( input ) ;
 
                var file = document.createElement('input') ;
                file.id = fileID+count ;
                file.name = fileName+'['+count+']'+'[file]' ;
                file.type = 'file' ;
                cellRight.appendChild( file ) ;
        }
}
//-->
 

See it action:

I hope this exercise helps someone, although it is primarily to remind me how I did it and to link to the smarter people whose work I employed. Some useful references that I found on the web that pertain to this issue are listed below.

References

• HTML Table Add Row - mredkj.com : This is the one that helped me solve the problem
• StickBlog - Upload multiple files with a single file element : This was helpful for studying the DOM
• HTML Forums : The thread I started and then solved
• Bin-Blog : This is the code I started from, but it didn't work as I expected
• QuirksMode.org : Peter-Paul Koch shows how to extend forms and proves once again why he is the guru of all things DOM

Comments

Rob-
 This page was extremely helpful. Thanks for sharing!

http://eqinfo.ucsd.edu/~rnewman/howtos/dom_action.html


One question, other then displaying an alert, do you know any other method
to help debug JavaScript?  I do most of my work in Java and Eclipse and
not having similar tools for Javascript just kills me.

Thanks again!
-Jeff

Hi Jeff,

Glad you found this resource useful. The best method for debugging Javascript 
that I employ is to run the web app from Firefox/Mozilla with the Javascript 
Console running. This does a DOM check and squeals if a variable is undefined, 
or you are trying to call a DOM-reference that does not exist.

Good luck!
- Rob

Disclaimer

This information is freely provided as–is. Messing around with the command line and creating files is a serious business, and I accept no liability for errors created, systems corrupted, or hard–disk damage by you following these instructions. They worked for me but may not work for you. Remember to back–up EVERYTHING before you try any of this stuff — it is not simple OR easy!!!

If you have any questions about this please email me at rlnewman@ucsd.edu and I will try my best to help you out.