»
EnglishFrenchVietnamese

Print - JavaScript OOP Form Input Fields Maker - JavaScriptBank.com

Full version: jsB@nk » Form » JavaScript OOP Form Input Fields Maker
URL: https://www.javascriptbank.com/javascript-oop-form-input-fields-maker.html

JavaScript OOP Form Input Fields Maker © JavaScriptBank.comOOP in JavaScript and DOM in JavaScript are not new techniques, they are becoming more popular widely in the world of programming languages. And the JavaScript programming language also supports OOP very well.Obviously, jsB@nk does not want to stay out of this trend, so begin this post, I'll try to present you the JavaScript code examples built by OOP skills.And this is first JavaScript OOP code example to create form elements - no new idea - but please see the live demo to learn new JavaScript OOP skills.

Full version: jsB@nk » Form » JavaScript OOP Form Input Fields Maker
URL: https://www.javascriptbank.com/javascript-oop-form-input-fields-maker.html



CSS
<style type="text/css">/*     This script downloaded from www.JavaScriptBank.com     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/#formGoesHere {  margin: 20px;  padding: 10px;  background-color: #ffedaf;  width: 225px;  height: 260px;}</style>


JavaScript
<script type="text/javascript">// Created by: Matt Murphy | http://www.matts411.com/// This script downloaded from www.JavaScriptBank.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') }   }  } }}</script>


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