SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating new form methods

    Hey folks,

    I've created a bunch of Javascript applications recently, and I've gotten sick and tired of creating forms using the current methods. I've taken a cursory look around to see if there is any libraries out there that simplify (ie reduce the amount of typing required) this process.

    I'm looking to do something like:

    Code:
    var myForm = new oForm("parentId", "action", "formId");
    myForm.select("
    myForm.append();
    and things like

    Code:
    myForm.hide();
    
    // Some other logic
    
    myForm.show();
    So far what I have is this:

    (form.js)

    Code:
    // new form object for simplification of adding dynamic forms to pages
    function oForm (sParent, sAction, sId, sMethod) {
    	this.el = document.createElement("form");
    	this.el.id = sId;
    	this.parent = $e(sParent);
    	this.el.action = sAction;
    	
    	// is this the right default method?
    	if (!sMethod) {
    		sMethod = "POST";
    	}
    	
    	this.el.method = sMethod;
    	this.id = sId;
    	
    	// plan is to allow the user to edit the individual children through this array.
    	this.children = new Array();
    
    	// don't add the form methods if they exist already
    	if (typeof oForm._initialized == "undefined") {
    
    		// allows the user to build the form then add it.
    		oForm.prototype.add = function () {
    			this.parent.appendChild(this.el);
    		}
    
            // quick hide for the form, plan is to allow animated hides, and form.children hides
    		oForm.prototype.hide = function () {
    			this.el.style.display = "none";
    		}
    		
    		// quick show for the form, plan is to allow animated shows, and form.children shows
    		oForm.prototype.show = function () {
    			this.el.style.display = "";
    		}
    		
    		// add a select dropdown to the form with options and allow the user to preselect an option
    		oForm.prototype.newSelect = function (sSelectId, aOptions, sDefault) {
    			var sel = document.createElement("select");
    			sel.id = sSelectId;
    			var o;
    			var t;
    			for (var i = 0; i < aOptions.length; i++) {
    				o = document.createElement("option");
    				o.text = aOptions[i];
    				o.value = i;
    				try {
    					sel.add(o);
    				} catch (e) {
    					sel.add(o, null);
    				}
    			}
    			this.el.appendChild(sel);
    			if (typeof sDefault == "number")  {
    				sDefault = parseInt(sDefault);
    				sel.selectedIndex = sDefault;
    			}
    		}
    		
    		// button, reset, or submit buttons
    		oForm.prototype.button = function (sButtonType, sButtonId, sButtonValue) {
    			var button = document.createElement("input");
    			button.id = sButtonId;
    			button.type = sButtonType;
    			button.value = sButtonValue;
    			this.el.appendChild(button);
    		}		
    		
    		// textareas
    		oForm.prototype.textarea = function (sTextareaId, iRows, iCols, sDefault) {
    			var text = document.createElement("textarea");
    			text.id = sTextareaId;
    			text.rows = iRows;
    			text.cols = iCols;
    			if (sDefault) {
    				text.innerHTML = sDefault;
    			}
    			this.el.appendChild(text);		
    		}
    		
    		// text field
    		oForm.prototype.text = function (sTextId, sDefault) {
    			var text = document.createElement("input");
    			text.id = sTextId;
    			text.type = "text";
    			if (sDefault) {
    				text.value = sDefault;
    			}
    			this.el.appendChild(text);
    		}		
    		
    		// add line breaks in the form.
    		oForm.prototype.br = function (iBreak) {
    			var myBreak;		
    			if (iBreak) {
    				for (var i = 0; i < iBreak; i++) {
    					myBreak = document.createElement("br");
    					this.el.appendChild(myBreak);
    				}
    			} else {
    				myBreak = document.createElement("br");
    				this.el.appendChild(myBreak);
    			}
    		}
    		
    		oForm._initialized = true;
    	}
    }
    
    // I hate writing document.getElementById()
    function $e(el) {
    	return document.getElementById(el);
    }
    
    // Testing my new object
    function addForm(el) {
    	el.onclick = null;
    	el.style.backgroundColor = "white";
    	el.innerHTML = "";
    	var myForm = new oForm("objecttest", "javascript:void(0);", "newForm");
    	myForm.text("newText", "myValue");
    	myForm.br();
    	var option = new Array();
    	for (var i = 0; i < 6; i++) {
    		option[i] = i;
    	}
    	myForm.newSelect("newSelect", option, 3);
    	myForm.br();
    	myForm.button("submit", "newSubmit", "enter");
    	myForm.br();
    	myForm.textarea("newTextarea", 5, 60, "This is some sample text");
    	myForm.add();
    	return;
    }
    (the html)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Form Creator</title>
    <script type="text/javascript" src="js/form.js"></script>
    <style type="text/css">
    #objecttest {
    	display: block;
    	width: 100px;
    	height: 100px;
    	background-color: #0000FF;
    }
    
    </style>
    </head>
    
    <body>
    	<div id="objecttest" onclick="addForm(this);"></div>
    </body>
    </html>
    I have a lot of things I want to implement. I'd like a relatively exhaustive list of other methods that this object should include so I can work through it. So far everything I've added seems to work, at least in Firefox 2.0.

    I've posted a copy of this script in action (it's really thrilling if you visit the page! It does very little for such a lot of code).
    You can visit it here.

    Dave

    edit: I've adjusted the oForm.select() method so that it actually does what you'd expect in IE.
    Last edited by dwees; Dec 14, 2006 at 13:02. Reason: spotted error in code

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Added radio boxes and checkboxes

    I've added radio boxes and checkboxes which work fine in Firefox, but fail slightly in IE.

    Any suggestions?

    Here's the specific methods:

    Code:
    // radio
    oForm.prototype.radio = function (sId, sValue, sChecked) {
    	var o = document.createElement("input");
    	o.id = sId;
    	o.type = "radio";
    	if (sChecked) {
    		o.checked = true;
    	}
    	this.el.appendChild(o);			
    }
    
    // checkbox
    oForm.prototype.checkbox = function (sId, sValue, sChecked) {
    	var o = document.createElement("input");
    	o.id = sId;
    	o.type = "checkbox";
    	if (sChecked) {
    		o.checked = true;
    	}
    	this.el.appendChild(o);
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is an easier way like


    function oForm() {
    this.checkBox = function(arg1, arg2, arg3) {
    some logic here
    }
    }
    NOTELAY.COM - Have a nice noty day
    ETA CONSULTING

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I'm basically following the format of the object creation in "Professional Javascript for the Web Developer" by Nicholas C. Zakas, where he suggests that although your script will work, it doesn't make it as obvious that I'm adding a method to an object.

    I'm such a rookie at creating objects that I'm just trying to play by someone else's rules.

    Also, I'm encompassing the methods inside an initialization check so that I only create the new methods once, so that if I create a new form, I don't duplicate all of the methods again.

    Dave

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Neat idea,

    What about the NAME attribute for all those elements...don't you need to include that so the values can be processed server side?

    This leads to a GOTCHA - if you use createElement in IE to add form items, you can't adjust the NAME attribute afterwards, you have to use a warped version of createElement to get it to work, something like:

    myTextBox = document.createElement("<input type='text' name='myText'>");

    g'luck!

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good point about the server side processing. I've been using Ajax to process my forms, OR not doing any server-side at all (since most of the times I'm using forms in Javascript games).

    I suppose I can use alternative logic for IE for the form creation, since I'm already doing that once for something else.

    Dave


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •