How can i create an input object (text area,select) at runtime ?
B.
B.
-
-
Re: object create at runtime
takarimasu wrote:
[color=blue]
> How can i create an input object (text area,select) at runtime ?[/color]
In browsers like IE 5+, Netscape 6+, Mozilla, Opera 7+ supporting the
W3C DOM the document object has a factory method
document.create Element
taking the tag name as a single argument e.g.
var input;
if (document.creat eElement && (input =
document.create Element('input' ))) {
input.name = 'inputName';
input.type = 'text';
input.defaultVa lue = 'Kibology';
// now insert input somewhere e.g.
document.forms[0].appendChild(in put);
}
--
Martin Honnen
-
Re: object create at runtime
takarimasu wrote:
[color=blue]
> How can i create an input object (text area,select) at runtime ?[/color]
By using the createElement method:
/* Check that the host provides the createElement method. */
if(document.cre ateElement) {
/* Create the new element. */
var newElement = document.create Element('textar ea');
}
If you create an INPUT element (by passing the string, 'input'), you
can set the type of element using the type property:
if(document.cre ateElement) {
var newElement = document.create Element('input' );
newElement.type = 'submit'; // or 'button', or 'image', etc.
}
It's best to set that property immediately (and IE will only let you
do it once).
Once you've created your element, must then insert it into the
document tree. To do that, you need a reference to the element that
will contain the new element, and the use of either the insertBefore
or appendChild methods. Consider the following HTML snippet:
<form action="http://www.example.com/">
<div id="container"> </div>
</form>
To insert a TEXTAREA element into the DIV, we need a reference to that
DIV. We also need to check that we can use the appendChild method.
/* Check that the host provides the createElement and
* getElementById methods.
*/
if(document.cre ateElement && document.getEle mentById) {
/* Get a reference to 'container'... */
var element = document.getEle mentById('conta iner'),
/* ...and create the new element. */
newElement = document.create Element('textar ea');
/* Ensure that no problems have occurred and that the
* DIV supports the appendChild method.
*/
if(element && newElement && element.appendC hild) {
/* Initialise various properties of the TEXTAREA element. */
newElement.cols = 30;
newElement.rows = 6;
newElement.name = 'message';
/* Insert the TEXTAREA into the DIV.
*
* If other elements existed within the DIV, appendChild
* would place the TEXTAREA after them all.
*/
element.appendC hild(newElement );
}
}
More information on the Document Object Model (DOM)[1] which provides
these features can be found on the World Wide Web Consortium (W3C)
website[2]. Currently, only DOM 1 and 2 are implemented to any useful
degree.
Hope that helps,
Mike
[1] <URL:http://www.w3.org/DOM/>
[2] <URL:http://www.w3.org/>
--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Comment
-
Re: object create at runtime
takarimasu wrote:[color=blue]
> How can i create an input object (text area,select) at runtime ?[/color]
By using appropriate DOM methods. You will find a useful
introduction to JavaScript here:
<URL:http://www.w3schools.c om>
Here is some basic code to help you along.
<html><head><ti tle>Add elements</title>
<script type="text/javascript">
// The function expects to be passed a reference to a form
function addTextArea(x){
// Create the textarea element
var oTA = document.create Element('textar ea');
// Modify its attributes
oTA.style.width = '200px';
oTA.style.heigh t = '100px';
oTA.name = 'aTextArea';
oTA.value = 'I am a new textarea';
// Append the textarea to the form
x.appendChild(o TA);
}
// The function expects to be passed a reference to a form
function addSelect(x){
// Create the select element
var oSel = document.create Element('select ');
// Modify its attributes
oSel.name = 'aSelect';
// Create 5 options
oSel.options.le ngth = 5;
// Modify the option attributes
for (var i=0, oLen=oSel.optio ns.length; i<oLen; i++ ){
oSel.options[i].value = 'opt_' +i;
oSel.options[i].text = 'Option ' +i;
}
// Make a particular option selected (the 3rd one)
oSel.options[2].selected = true;
// Append the select to the table
x.appendChild(o Sel);
}
</script>
</head>
<body>
<form action="">
<input type="button" value="Add textarea" onclick="
// Call the addTextArea function, pass a reference to the form
addTextArea(thi s.form);
">
<input type="button" value="Add select & options" onclick="
// Call the addSelect function, pass a reference to the form
addSelect(this. form);
"><br>
</form>
</body></html>
--
Rob
Comment
Comment