Creating Form Elements

Matt Murphy Jan 16, 2008

General

This script will generate various bug-free form elements with name attributes, selected options, and more for IE 6+, Firefox, Opera and Safari.

The script also creates a submit button. For demonstration purposes, it has been eliminated on this page.

Notes

Created by: Matt Murphy
Web Site: http://www.matts411.com/
Posted: January 16, 2008

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: createDomForm.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Matt Murphy | http://www.matts411.com/ */

//////////////////////////////////////////////////////////////////
// For questions, comments and a live demo - please visit:
// http://www.matts411.com/webdev/creating_form_elements_with_javascript
//////////////////////////////////////////////////////////////////

function createDOMForm(targetId, actionURL) {
 	// Where the form will be placed into the page
 	parentElement = document.getElementById(targetId)
 	parentElement.innerHTML = ""
 	
 	// Create a form
 	myForm = document.createElement('FORM')
 	myForm.method = 'post'
 	myForm.action = actionURL
 	myForm.setAttribute('Name', 'myForm')
 	myForm.id = 'myForm'
 	
 	// Create a radio selection
 	radioField = document.createElement('INPUT')
 	radioField.type = 'radio'
 	radioField.value = 'true'
 	radioField.setAttribute('Checked', 'true')
 	radioField.setAttribute('Name', 'myRadio')
 	myForm.appendChild(radioField)
 	myForm.appendChild(document.createTextNode('true'))
 	myForm.appendChild(document.createElement('BR'))
 	radioField = document.createElement('INPUT')
 	radioField.type = 'radio'
 	radioField.value = 'false'
 	radioField.setAttribute('Name', 'myRadio')
 	myForm.appendChild(radioField)
 	myForm.appendChild(document.createTextNode('false'))
 	myForm.appendChild(document.createElement('BR'))
 	
 	// Create a checkbox
 	checkbox = document.createElement('INPUT')
 	checkbox.type = 'checkbox'
 	checkbox.setAttribute('Name', 'myCheckbox')
 	myForm.appendChild(checkbox)
 	myForm.appendChild(document.createTextNode('check?'))
 	
 	// Create a text field
 	textField = document.createElement('INPUT')
 	textField.type = 'text'
 	textField.setAttribute('value', 'text field')
 	textField.setAttribute('Name', 'myTextField')
 	textField.style.display = 'block'
 	myForm.appendChild(textField)
 	
 	// Create a textarea
 	textArea = document.createElement('TEXTAREA')
 	textArea.appendChild(document.createTextNode('text area'))
 	textArea.setAttribute('Name', 'myTextArea')
 	textArea.style.display = 'block'
 	myForm.appendChild(textArea)
 	
 	// Create a drop-down list
 	dropDown = document.createElement('SELECT')
 	dropDown.setAttribute('Name', 'myDropDown')
 	dropDown.style.display = 'block'
 	for(i=1; i<11; i++) {
  		option = document.createElement('option')
  		option.value = 'myOption' + i
  		if(i==4) { option.setAttribute('selected', 'true') }
  		option.appendChild(document.createTextNode('Option ' + i))
  		dropDown.appendChild(option)
	 }
 	myForm.appendChild(dropDown)
 	
 	// Create a multi select drop-down list
 	dropDownMulti = document.createElement('SELECT')
 	dropDownMulti.setAttribute('Name', 'myDropDownMulti[]') // The [] addon is for rails
 	dropDownMulti.id = 'myDropDownMulti' // Assigned because it needs to be accessed later by IE6
 	dropDownMulti.size = 4
 	dropDownMulti.typeName = 'multiple'
 	dropDownMulti.multiple = 'true'
 	dropDownMulti.style.display = 'block'
 	for(i=1; i<11; i++) {
  		option = document.createElement('option')
  		option.appendChild(document.createTextNode('Option ' + i))
  		option.value = 'myOption' + i
  		if(i==2 || i==4) { option.setAttribute('selected', 'true') }
  		dropDownMulti.appendChild(option)
 	}
 	myForm.appendChild(dropDownMulti)
 	
 	// Create a submit button
 	newButton = document.createElement('INPUT')
 	newButton.type = 'submit'
 	newButton.setAttribute('Name', 'submit')
 	newButton.value = 'Submit'
 	newButton.style.display = 'block'
 	myForm.appendChild(newButton)
 	
 	// Place the form into the page
 	parentElement.appendChild(myForm)
 	
 	// Bit o IE bug fixin'
 	if(navigator.appVersion.indexOf("MSIE") != -1) {

    // Fixes the name issue, event handling, and rendering bugs!
 		 parentElement.innerHTML = parentElement.innerHTML

 		 // Bug fix for multi selects with more than one selection in IE6
 		 if(navigator.appVersion.indexOf("MSIE 6.0") != -1) {
 			  multiOptions = document.getElementById('myDropDownMulti').options
 			  for(i=0; i<multiOptions.length; i++) {
 				   if(i==1 || i==3) { multiOptions[i].setAttribute('selected', 'true') }
 			  }
 		 }
 	}
}

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

#formGoesHere {
  margin: 20px;
  padding: 10px;
  background-color: #ffedaf;
  width: 225px;
  height: 260px;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="createDomForm.js"></script>

Body

Paste this code into the BODY section of your HTML document


<p>
<input type="button" onclick="createDOMForm('formGoesHere', 'test.htm')" value="Create Form"></p>

<div id="formGoesHere">
</div>

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details