/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.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') }
 			  }
 		 }
 	}
}