| <script
type= "text/javascript">
<!-- //
function makeForm() {
mypara=document.getElementById( "paraID");
//this is an element already on the page
//its purpose is to provide a place to put the form
//if the form were merely added to the document, it would appear at the
end
//now I create some elements
myform=document.createElement( "form");
myselect = document.createElement( "select");
//one way to write a function... you have to write it yourself!
myOnChange = new Function("e", "location.href=myselect.options[myselect.selectedIndex].value");
//first option
//create an option
theOption=document.createElement( "OPTION");
//make some text
theText=document.createTextNode( "Select
A Page To Go");
//add the text to the option
theOption.appendChild(theText);
//add the option to the select
myselect.appendChild(theOption);
//second option
theOption=document.createElement( "OPTION");
theText=document.createTextNode( "JavaScript
Tutorial II");
theOption.appendChild(theText);
//this option has a value, an URL, so we set the value
theOption.setAttribute( "value","index.html");
myselect.appendChild(theOption);
//third option
theOption=document.createElement( "OPTION");
theText=document.createTextNode( "getElementById");
theOption.appendChild(theText);
theOption.setAttribute( "value","getElementByID.htm");
myselect.appendChild(theOption);
//fourth option
//this has some variations to show alternative ways of
//adding values and text
theOption=document.createElement( "OPTION");
//new ways to set the values and the text
theOption.value= "modifyingExistingText.htm";
//set the text using the innerHTML property instead of adding text node
theOption.innerHTML= "Modifying
Existing Text";
myselect.appendChild(theOption);
//end of options
//now the select has the options added with their text, values and
onChange event
myform.appendChild(myselect);
mypara.appendChild(myform);
// the myOnChange(e) function, created earlier, is used to set
//the "onchange" event (Yes, onchange, not onChange!)
myselect.onchange=myOnChange;
//here I put the button below the select (not essential), just to
demonstrate
//the following
mybreak=document.createElement( "p");
myform.appendChild(mybreak);
//now I create a button
mybutton=document.createElement( "BUTTON");
//the function here for the button is different from before, to illustrate
another
//way to create a function
function myOnClick(e) {
alert( 'Hello');
}
//once again, "onclick" not "onClick"
mybutton.onclick=myOnClick;
//setting the height and width isn't essential for IE, but is essential
for Netscape
mybutton.style.height=20;
mybutton.style.width=75;
//assign the value of the button
theText=document.createTextNode( "Click
Me");
mybutton.appendChild(theText);
//the code commented out below works fine for IE, but the above code is
needed for
//some other browsers and IE likes it too!
//mybutton.value="Click Me";
//now add the button to the form
myform.appendChild(mybutton);
myselect.setAttribute( "bgColor","red");
myselect.style.color= "green";
myselect.setAttribute( "border","10px");
myselect.style.fontWeight= "bold";
//I need to set the IDs because I want to
// to reference then so I can delete the form later
myselect.setAttribute( "id","selectID");
myform.setAttribute( "id","formID");
//alert(myselect.id);
//enable delete button
btnDelete=document.getElementById( "deleteID");
btnDelete.disabled= false;
//disable create button
btnCreate=document.getElementById( "createID");
btnCreate.disabled= true;
}
function deleteForm() {
//here I use the IDs set in the create to get a handle on the elements
myPara=document.getElementById( "paraID");
myform=document.getElementById( "formID");
//so I can remove them:-)
myPara.removeChild(myform);
//and now I set the fixed buttons on the page
//disable delete button
btnDelete=document.getElementById( "deleteID");
btnDelete.disabled= true;
//enable create button
btnCreate=document.getElementById( "createID");
btnCreate.disabled= false;
} //end of deleteForm()
//-->
</script>
< body>
< form id="form1" name="form1" method="post" action enctype="text/plain" alt="">
< p>
< input type="button" id="createID" value="Create Form" onclick="makeForm()" />
< br />
< /p>
< /form>
< hr>
<!-- Just below is the key code in the body for positioning the
form-->
< p id="paraID">
< /p>
< hr>
< form id="form2" name="form2" method="post" action enctype="text/plain" alt="">
< p>
< input type="button" id="deleteID" value="Delete Form" disabled="true" onclick="deleteForm()" />
< /p>
< /form>
< /body>
< /html>
Return to Creating a Form Dynamically |
