/* 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') }
                             }
                    }
           }
  }