Related topics:

1. The Complete DOM And XML Nested Nodes Unfolders
2. The Complete Dom (Document Object Model) Manager
3. Dynamic Additions And Removals Of Form Fields Via DOM and DHTML

Html form tags, such as drop down menusmenus and the alike or have the great advantage that they can be edited directly by the visitor's inputs.
You can't, by and large, directly edit any other element of an online document if it isn't a form element. Also a drop down menu is editable, inasmuch as after all it offers to you the possibility to custom a document element with one of the optionsvarious options it includes.

This script requires from you some minimal knowledge of html and javascript: that is, it presumes you know what an html tag is, what a form is, and what a regular expression is - or at least looks like.

What you can do with this script is the following (and as for why you may want to do any of the following, we shall discuss it promptly too):

1. 1. You can instruct a form value (selected option of a menu, text written within a text box, etc) to be grabbed, then to be dispatched within an other html tag of your choice and created on the fly.
2. 2. Then you make this latter html tag replace the form field tag, which latter would disappear from the document!
3. 3. You can then decide whether with a click on the newly produced html tag, you may want the form field appear again and the tag disappear!
4. 4. Then, upon a new change in the form field, you may repeat step 2 - sort of a loop that onChange events hides the form tag replacing it with a non form tag, and onClick events onto the newly produced tag replaces this latter again with the previous form tag.
   This strange procedure is useful for second thoughts or to correct a wrong selection from the previously visible menu, by bringing it back into sight.
   Of course, alternatively, you can also make the replacement described at step 2 definitive: that is, once the menu or form field is hidden, it cannot be recovered to sight any longer.
5. 5. Additionally, there is a feature such that upon a click on a document element (say such as a [+] sign), you can insert before such element a form field identical to another previously specified form field.

Your question now is -of course- why you may want to do such a thing.

Firstly, let me say that scripts offer options (or potions! I often envisioned them like a shelf full of vials, you keep them there without knowing which one you may have one day to pick to heal a patient) that you'd store in your mind as possibilities you read about, so to come back to them when and if one day that specific needs arises in one of your applications.

For, yes: it doesn't mean a thing, if you can't see the practical side of something today or just right away.
Because you don't (or you should not) read Shakespeare, and you don't (or should not) bookmark a script, only if it can help you get a Porsche today. What type of human being, and what type of a programmer could you be, if you can think only that one way?

However the reason this script was created for, was in order to produce an html document where several fields had to be filled in with custom values and eventually a good, decent printable version of the same document (that is, with no longer form fields in it) for legal purposes had to be produced on the fly.
In the document there were many menus with the same pool of names (attorneys and clients in a suit) which in many parts of the document had to be properly picked and placed recursively. Using menus was speedy and saved lots of editing, but upon completion, the form fields had to be swapped with normal tags so to make the document nicely printable.

This is your script if your conundrum is producing printer friendly office documents where many repetitive form fields have to be introduced and the eventual document has to be turned smooth enough with the click of a button to be printed (no server submission needed for such a task, which involves a mere desktop help environment).

Oh, secretaries of the world: do unite!
And come to my place - there must be a party in there!

This script is a class named domEdit, therefore it has to be initialized using the javascript keyword new.

Besides, it is a so called singleton namely only one instance of this class should be initialized.

Furthermore and most importantly, the initialized instance has a given name which cannot be changed and which is case sensitive; such name is:
domEditor.

Therefore the only possible initialization is: var domEditor=new domEdit(); Copy and paste that line, if you want: for no other initialization but that one is allowed, with those exact variable names.

From then onward, the variable domEditor is a variable upon which all the methods (described in detail further on) pertaining to the class can be invoked.

The fact the class name is domEdit whereas the instance name (domEditor) is only slightly different from the former, hopefully won't cause any confusion to you. The instance is the actor which plays after the given script.

Here's your code (Mozilla will unfortunately compact it. Better to copy it from an Internet Explorer session):

Let me repeat once again: the name of the instance of the class is assigned as mandatory: domEditor. Therefore describing here the methods available, all such methods can be called in exclusively from an instance with such name.

AVAILABLE PUBLIC METHODS
domEditor. flick() An Helmut Newton photo (Jeanne Moreau, I think) An Helmut Newton photo (Charlotte Rampling, I think) An Helmut Newton photo (Elizabeth Taylor)	This is the more complex method. This method must be invoked from within an event handler, such as more typically: onChange or onBlur. Its purpose, originally envisioned upon a drop down menu, is that of getting the values of a form element and dispatch such values within another tag that is not of a form nature. Such latter tag can either already exist as a document tag node, or can be created on the fly as a brand new node (you'll seen soon how in the arguments list). This method takes in the following arguments: object1: (mandatory argument) this is the form element node whose value has to be grabbed. Typically, when this method gets invoked from within an event handler placed in a form tag, can take the form of the javascript keyword this. Could also be an object id, namely a string. object2: (mandatory argument) this is the object upon which the value taken from the previous object has to be dispatched. If you want a specific node to be created on the fly for this purpose, pass this argument as a String carrying the name of a tag. The only allowed strings for this purpose are: STRONG, SPAN, DIV, EM, I, B, P, A all representing, if you have some basic knowledge of html, some of the most typical tags. If this argument is passed as one of those strings, the tag with such name is produced, within it the value of object is written, and this newly produced set is inserted before the position of object1. Then, object1 gets hidden (display='none') and the newly inserted node is shown (display='inline') in its lieu. Upon this newly produced tag is assigned an onClick event, which triggers if this new tag is clicked and if so, the previous form tag is shown in its lieu again! And if a new change is made into the newly reproduced form tag, the form tag is hidden again and the updated other tag shown again. If this argument is passed as a String different from the set of allowed ones above, what is created is a text node, and it gets still inserted following the procedures described above. If it is a text node, no onClick event is assigned to it, thus the original form element gets hidden but is no longer retrievable to sight. object1Value: (mandatory argument) if object2 is not a text node, this argument must specify which is the value that has to be taken from the form element in object1. Instances: <select onChange=" domEditor.flick( this, 'span', this.options[ this.selectedIndex ].text ); "> etc... <input type="text" onChange=" domEditor.flick( this, 'a', this.value ); "> etc... noFlickValue: (optional) it is possible there could be values that, if produced within the given form tag, you do not want to trigger the swapping with the html tag (such is the case, for instance, of dummy entries in a drop down menu). With this argument you can nicely account for such exceptions; yet it requires a little bit of programming knowledge because this argument (in order to make the method more manageable and less subject to too extensive input data validation) can be only and exclusively a regular expression (any other data type would simply bypass the argument), and so it presumes you know at least a little bit about them already. Instance, a menu where the value of the selected option is grabbed, but if such value is empty, no swapping occurs: select something, then click on the produced text and try then to select this time the dummy option to see it won't swap when the dummy is chosen: Dummy option. Choose below: foo foo 1foo foo 2 The code for the above is: <select onChange=" domEditor.flick( this, 'a', this.options[this.selectedIndex].value, /^$/ ); "> <option value="">Dummy option. Choose below:</option> <option value="foo foo 1">foo foo 1</option> <option value="foo foo 2">foo foo 2</option> </select> href: (optional) if the produced node is a link, you can specify its href if you like. className: (optional) you can assign to the node a specific class name if you like. id: (optional) you can assign to the node a specific id if you like. An Helmut Newton photo (Mickey Rourke, I'm positive)
domEditor. textarea() An Helmut Newton photo An Helmut Newton photo	A textarea tag is a peculiar form tag: in fact, it can include a lot of text and, characteristically, new lines too. Now, if you are to print the contents of a textarea into a tag, by default the script will not reproduce in the new tag value the carriage returns of the new lines. Try to click inside the textarea below and then click outside of it (onBlur flicking), to see what I mean: Textarea 1 foo1 foo2 As you see, it gets reproduced one flushing line. If you want the carriage returns to be shown also in the html output, there is a way though apparently a little bit convoluted. That is, there exist a class property named format whose default value is zero. If you set that property to 1, it will produce the carriage returns when what is being flicked is a textarea. In order to set that property to one, either you set it directly by a call like this: domEditor.format=1; or upon initialization of the class you pass to the constructor one argument as number 1, that is: var domEditor=new domEdit(1); If you do so, upon meeting a textarea to flick, the class will use this method domEditor.textarea(). See the difference: Textarea2 foo1 foo2 Here are the codes, respectively, for the first and the second textarea examples: <textarea onBlur=" domEditor.format=0; domEditor.flick(this, 'a', this.value);" rows="4">Textarea 1 foo1 foo2 </textarea> <textarea onBlur=" domEditor.format=1; domEditor.flick(this, 'a', this.value);" rows="4">Textarea2 foo1 foo2 </textarea> However, you can also invoke it yourself if you prefer rather than letting the script do it, so here are the method arguments: textareaObject: a textarea node (mandatory it's a textarea node object). object2: target node (mandatory it's a node object).
domEditor. replace() An Helmut Newton photo	You can invoke this method on your own upon a suited object. What it does is that it replaces a form tag with an html tag following the very same procedures described for the argument flick, only it does not flick: that is, the swapping is definitive and the swapped form tag cannot be brought back into sight - thence the method's name replace rather than flick. The code for the tag above is: <input type="text" value="you only swap once" onBlur=" domEditor.replace(this, 'span', this.value); "> You only swap once, babe! The code for the tag above is: <textarea rows="2" onBlur=" domEditor.format=1; domEditor.replace(this, 'span', this.value); ">You only swap once, babe! </textarea> This method takes in the following arguments: object1: the textarea node. object2: see the description for the argument with the same name for the method flick. object1Value: see the description for the argument with the same name for the method flick. href: see the description for the argument with the same name for the method flick. className: see the description for the argument with the same name for the method flick. id: see the description for the argument with the same name for the method flick.
domEditor. massReplace() An Helmut Newton photo	As the name suggests, this method performs a call to the class method replace but this round recursively applying it onto more tags rather than just one at a time. This method takes in the following arguments: stringTagName: since you want to replace a multitude of form tags, specify here what type of tags; instance: "SELECT" or "TEXTAREA". parentNodeObject: actually, it's an optional argument. If passed as to put it in action, it has then to be a node object. In fact if you edit your html documents in a savvy way so to use this class, you may perhaps pinpoint a specific set of, say, SELECT menu tags (rather than just all the select tags, which would happen bypassing this argument with say a zero) that you want to replace but not in the whole document but rather in a specified location set. You can locate such sets if you wrap them into another html tag container which you assign an id to so that it can then be grabbed as a node object by the javascript dom built in method document.getElementById; instance: textarea1 textarea2 textarea3 more could be added textarea4 textarea5 <div id="aContainerTag"> your select tags, or textarea tags go here... </div> <script> domEditor.format=1; domEditor.massReplace( 'textarea', document.getElementById( 'aContainerTag'), 'span'); </script> object2: see the argument with the same name in the class method flick. object1Value: this is now optional for this method! Also, it must be a string, defaults to "value", and can accept two values only: 'text' and 'value'. Note: a bad Firefox bug (oh, yeees!) forced me to use in this method the deprecated keyword innerHTML. href: see the argument with the same name in the class method flick. className: see the argument with the same name in the class method flick. id: see the argument with the same name in the class method flick.
domEditor. add() An Helmut Newton photo (Raquel Welch, I think)	You can invoke this method from some event handler on an html element (arguably, an onClick onto a link). It does the following: it makes a copy (clone, but the possible ID of each clone is stripped off, because ids must be unique and I didn't want copies around carrying an identical copied id) of a node and inserts it before another specified node, but its interesting feature is this: if the node to be cloned is not specified, it grabs the first tag node (does not consider text nodes) before the element that invoked the method (of course, if such tag node exists!), and makes a copy of it and appends such copy in front of the element that invoked the method. Click on the plus: [+] The code for the above was: <input value="hallo world"> <a href="#" onClick=" domEditor.add(this); return false;">[+]</a> hallo [+] The code for the above was: <span id="dunno">hallo</span>&nbsp;<a href="#" onClick=" domEditor.add(this, document.getElementById('dunno'), '-', '!'); return false;">[+]</a> If on the form fields would be applied flick, the newly produced nodes would flick as well each on its own turn and in the expected way - much work done to to achieve that, bud! This method takes in the following arguments: beforeWhat: the node before which you want to put a copy of the clone. Arguably, could be inside an event handler the javascript keyword this. cloneWhat: actually optional; the node object to be cloned. spacer: optional: if you want something to be included soon before the newly added clone in order to have a nicer layout, you can specify it here as a String. spacerAfter optional: if you want something to be included soon after the newly added clone in order to have a nicer layout, you can specify it here as a String.
CLASS PROPERTIES OF INTEREST
domEditor. allowedTags	An object where you can list the allowed tags that can be produced on the fly (I inserted this feature because the class is meant to swap values between form tags and other type of html tags, and should not produce for instance other form tags in order to flick).
domEditor. format	A Number which defaults to zero. It can be changed upon initialization in the way, and with the effects, described in the class method named textarea().
domEditor. event	A String representing which event handler, upon using the class method flick, shall show back again the original form tag if it was previously swapped with a non form related html tag.