macromedia.coldfusion.cfml_general_discussion
[Top] [All Lists]

Re: Dynamically Add Rows

Subject: Re: Dynamically Add Rows
From: "emerald558"
Date: Sat, 11 Aug 2007 03:09:23 +0000 UTC
Newsgroups: macromedia.coldfusion.cfml_general_discussion
Bowing to Hal (we're not worthy)
 Here is some javascript that should show you how to create any type of HTML 
input based on a select box:

 HTH

 <html>
 <head>
 <title>Add dynamic input to a form based on select box</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <script type="text/javascript">
        function makeFormField(whichType) {
        // variable to hold the name/ ID of your input element
        var myInputElementName = "MyInput";
        
        // clean up any previous form elements already created in our span
        
        
         if(document.getElementById(myInputElementName) != null){
                // remove all children from element
                var element = document.getElementById("myspan");
                while (element.firstChild) {
                  element.removeChild(element.firstChild);
                }               
        }
        // change the first option in our drop down to make things reset.
        if(whichType != "none") {
                document.myform.myselect.options[0].text = "Remove created form 
element";
        }

        
        // variable fieldType will hold the value of the option selected
        var fieldType = whichType.options[whichType.selectedIndex].value;
                // do a switch case over the values and create the appropriate 
field type
                switch (fieldType) {
                        // first case is a textbox
                        case "textbox": 
                                var theInput = document.createElement("INPUT");
                                theInput.name = theInput.id = 
myInputElementName;
                                theInput.type = "text";
                
                                var InputSpan = document.createElement("span");
                                InputSpan.id = "MyInputSpan";
                                var InputLabel= document.createTextNode("Hello 
World: ");
                                InputSpan.appendChild(InputLabel);
                                InputSpan.appendChild(theInput);
                                
document.getElementById("myspan").appendChild(InputSpan);
                                
document.getElementById("myspan").appendChild(theInput);
                                
                        break;
                        
                        case "selectbox": 
                                var theInput = document.createElement("select");
                                theInput.name = theInput.id = 
myInputElementName;
                                //uncomment the line below if you want a select 
multiple checkbox
                                //theInput.multiple = true;
                                

                                var opt;
                                var newOpt;
                                opt = theInput.options;
                                newOpt = opt.length;
                                opt.length = newOpt+1;
                                opt[newOpt].text = 'First Option';
                                opt[newOpt].value = 'Option 1';
                                newOpt = opt.length;
                                opt.length = newOpt+1;
                                opt[newOpt].text = 'Second Option';
                                opt[newOpt].value = 'Option 2';
                                newOpt = opt.length;
                                opt.length = newOpt+1;
                                opt[newOpt].text = 'Third Option';
                                opt[newOpt].value = 'Option 3 Here!';
                                
                                var InputSpan = document.createElement("span");
                                InputSpan.id = "MyInputSpan";
                                var InputLabel= document.createTextNode("Please 
make a selection: ");
                                InputSpan.appendChild(InputLabel);
                                InputSpan.appendChild(theInput);
                                
document.getElementById("myspan").appendChild(InputSpan);
                                
document.getElementById("myspan").appendChild(theInput);
                                
                        
                        break;
                        case "radio": 
                                var tempSpan = "";
                                var numRadioBtns = 3;
                                var myLabelArray = [];
                                var myValueArray = [];
                                myLabelArray[0] = "Radio Button 1";
                                myValueArray[0] = "Radio Value 1";
                                myLabelArray[1] = "Radio Button 2";
                                myValueArray[1] = "Radio Value 2";
                                myLabelArray[2] = "Radio Button 3";
                                myValueArray[2] = "Radio Value 3";

                                        for(i = 0; i < numRadioBtns; i ++ ){
        
                                                if(i == 0) {
                                                /* 
                                                IE doesn't like createElement 
for Radio Buttons and FireFox doesn't like 
using the html 
                                                in createElement - it bombs out 
on the '<' and '>', so do a try catch to 
make it work for 
                                                both IE and FireFox
                                                */
                                                
                                                        try {
                                                                var theInput = 
document.createElement("<INPUT TYPE='RADIO' 
NAME='"+[myInputElementName]+"' VALUE='"+[myLabelArray[i]]+"' checked>");
                                                                } catch(err) {
                                                                var theInput = 
document.createElement("INPUT");
                                                                theInput.name = 
theInput.id = myInputElementName;
                                                                theInput.type = 
"radio";
                                                                
theInput.checked = true;
                                                                theInput.value 
= myValueArray[i];
                                                                }
                                                
                                                var InputSpan = 
document.createElement("span");
                                                InputSpan.id = "MyInputSpan";
                                                var InputLabel= 
document.createTextNode(myLabelArray[i]);
                                                
InputSpan.appendChild(InputLabel);
                                                InputSpan.appendChild(theInput);
                                                
document.getElementById("myspan").appendChild(InputSpan);
                                                
document.getElementById("myspan").appendChild(theInput);
                                                
                                                
                                                } else {
                                                
                                                
                                                        try {
                                                                var theInput = 
document.createElement("<INPUT TYPE='RADIO' 
NAME='"+[myInputElementName]+"' VALUE='"+[myLabelArray[i]]+">");
                                                                } catch(err) {
                                                                var theInput = 
document.createElement("INPUT");
                                                                theInput.name = 
theInput.id = myInputElementName;
                                                                theInput.type = 
"radio";
                                                                
theInput.checked = false;
                                                                theInput.value 
= myValueArray[i];
                                                                }
                                                
                                                var InputSpan = 
document.createElement("span");
                                                InputSpan.id = "MyInputSpan" + 
i;
                                                var brNode = 
document.createElement("BR");
                                                var InputLabel= 
document.createTextNode(myLabelArray[i]);
                                                
InputSpan.appendChild(InputLabel);
                                                InputSpan.appendChild(theInput);
                                                
document.getElementById("myspan").appendChild(brNode);
                                                
document.getElementById("myspan").appendChild(InputSpan);
                                                
document.getElementById("myspan").appendChild(theInput);
                                                
                                                }
                                        
                                        }

                        break;
                        
                        case "checkbox": 
                                var theInput = document.createElement("INPUT");
                                theInput.name = theInput.id = 
myInputElementName;
                                theInput.type = "checkbox";
                                theInput.value = "My Checkbox";
                                //uncomment the next line if you want the 
checkbox pre-checked.
                                //theInput.checked = true;
                
                                var InputSpan = document.createElement("span");
                                InputSpan.id = "MyInputSpan";
                                var InputLabel= document.createTextNode("My 
checkbox: ");
                                InputSpan.appendChild(InputLabel);
                                InputSpan.appendChild(theInput);
                                
document.getElementById("myspan").appendChild(InputSpan);
                                
document.getElementById("myspan").appendChild(theInput);
                                
                        break;
                        
                        case "textarea": 
                                var theInput = 
document.createElement("textarea");
                                theInput.name = theInput.id = 
myInputElementName;
                                theInput.setAttribute("cols","30");
                                theInput.setAttribute("rows","3");
                                theInput.setAttribute("wrap","PHYSICAL");       
        
                
                
                                var InputSpan = document.createElement("span");
                                InputSpan.id = "MyInputSpan";
                                var InputLabel= document.createTextNode("My 
text Area: ");
                                var brNode = document.createElement("BR");
                                InputSpan.appendChild(InputLabel);
                                InputSpan.appendChild(theInput);
                                
                                
document.getElementById("myspan").appendChild(InputSpan);
                                
document.getElementById("myspan").appendChild(brNode);
                                
document.getElementById("myspan").appendChild(theInput);
                                
                        break;
                        
                        case "password": 
                                var theInput = document.createElement("INPUT");
                                theInput.name = theInput.id = 
myInputElementName;
                                theInput.type = "password";
                
                                var InputSpan = document.createElement("span");
                                InputSpan.id = "MyInputSpan";
                                var InputLabel= document.createTextNode("Enter 
your password: ");
                                InputSpan.appendChild(InputLabel);
                                InputSpan.appendChild(theInput);
                                
document.getElementById("myspan").appendChild(InputSpan);
                                
document.getElementById("myspan").appendChild(theInput);
                                
                        break;
                        
                        case "hidden": 
                                var theInput = document.createElement("INPUT");
                                theInput.name = theInput.id = 
myInputElementName;
                                theInput.type = "hidden";
                                theInput.value = "Your hidden input data"
                
                                var InputSpan = document.createElement("span");
                                InputSpan.id = "MyInputSpan";
                                // comment out the next two lines below if you 
don't want to show any text.
                                var InputLabel= document.createTextNode("The 
hidden data is: " + 
theInput.value);
                                InputSpan.appendChild(InputLabel);
                                InputSpan.appendChild(theInput);
                                
document.getElementById("myspan").appendChild(InputSpan);
                                
document.getElementById("myspan").appendChild(theInput);
                                
                        break;
                        
                        case "file": 
                                var theInput = document.createElement("INPUT");
                                theInput.name = theInput.id = 
myInputElementName;
                                theInput.type = "file";
                
                                var InputSpan = document.createElement("span");
                                InputSpan.id = "MyInputSpan";
                                var InputLabel= document.createTextNode("Select 
File: ");
                                InputSpan.appendChild(InputLabel);
                                InputSpan.appendChild(theInput);
                                
document.getElementById("myspan").appendChild(InputSpan);
                                
document.getElementById("myspan").appendChild(theInput);
                                
                        break;
                        
                        case "image": 
                                var theInput = document.createElement("INPUT");
                                theInput.name = theInput.id = 
myInputElementName;
                                theInput.type = "image";
                                // put the path to your image below
                                theInput.src = "/images/purple_bit.gif"
                                theInput.setAttribute("width","10");
                                theInput.setAttribute("height","25");
                
                                var InputSpan = document.createElement("span");
                                InputSpan.id = "MyInputSpan";
                                var InputLabel= document.createTextNode("Select 
image: ");
                                InputSpan.appendChild(InputLabel);
                                InputSpan.appendChild(theInput);
                                
document.getElementById("myspan").appendChild(InputSpan);
                                
document.getElementById("myspan").appendChild(theInput);
                                
                        break;
                        
                        case "submit": 
                                var theInput = document.createElement("INPUT");
                                theInput.name = theInput.id = 
myInputElementName;
                                theInput.type = "submit";
                                theInput.value = "Another Submit Button!"
                
                                var InputSpan = document.createElement("span");
                                InputSpan.id = "MyInputSpan";
                                var InputLabel= document.createTextNode("My 
Button: ");
                                InputSpan.appendChild(InputLabel);
                                InputSpan.appendChild(theInput);
                                
document.getElementById("myspan").appendChild(InputSpan);
                                
document.getElementById("myspan").appendChild(theInput);
                                
                        break;
                        
                        case "reset": 
                                var theInput = document.createElement("INPUT");
                                theInput.name = theInput.id = myInputElementName

<Prev in Thread] Current Thread [Next in Thread>