Full version: jsB@nk » Form » JavaScript OOP Form Input Fields Maker
URL: https://www.javascriptbank.com/javascript-oop-form-input-fields-maker.html
OOP 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
<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><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><p><input type="button" onclick="createDOMForm('formGoesHere', 'test.htm')" value="Create Form"></p><div id="formGoesHere"></div>