object create at runtime

M

Martin Honnen

takarimasu said:
How can i create an input object (text area,select) at runtime ?
Click to expand...

In browsers like IE 5+, Netscape 6+, Mozilla, Opera 7+ supporting the
W3C DOM the document object has a factory method
document.createElement
taking the tag name as a single argument e.g.
var input;
if (document.createElement && (input =
document.createElement('input'))) {
input.name = 'inputName';
input.type = 'text';
input.defaultValue = 'Kibology';
// now insert input somewhere e.g.
document.forms[0].appendChild(input);
}
 
M

Michael Winter

takarimasu said:
How can i create an input object (text area,select) at runtime ?
Click to expand...

By using the createElement method:

/* Check that the host provides the createElement method. */
if(document.createElement) {
/* Create the new element. */
var newElement = document.createElement('textarea');
}

If you create an INPUT element (by passing the string, 'input'), you
can set the type of element using the type property:

if(document.createElement) {
var newElement = document.createElement('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.createElement && document.getElementById) {
/* Get a reference to 'container'... */
var element = document.getElementById('container'),
/* ...and create the new element. */
newElement = document.createElement('textarea');

/* Ensure that no problems have occurred and that the
* DIV supports the appendChild method.
*/
if(element && newElement && element.appendChild) {
/* 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.appendChild(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/>
 
R

RobG

takarimasu said:
How can i create an input object (text area,select) at runtime ?
Click to expand...

By using appropriate DOM methods. You will find a useful
introduction to JavaScript here:

<URL:http://www.w3schools.com>

Here is some basic code to help you along.


<html><head><title>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.createElement('textarea');

// Modify its attributes
oTA.style.width = '200px';
oTA.style.height = '100px';
oTA.name = 'aTextArea';
oTA.value = 'I am a new textarea';

// Append the textarea to the form
x.appendChild(oTA);
}

// The function expects to be passed a reference to a form
function addSelect(x){

// Create the select element
var oSel = document.createElement('select');

// Modify its attributes
oSel.name = 'aSelect';

// Create 5 options
oSel.options.length = 5;

// Modify the option attributes
for (var i=0, oLen=oSel.options.length; i<oLen; i++ ){
oSel.options.value = 'opt_' +i;
oSel.options.text = 'Option ' +i;
}

// Make a particular option selected (the 3rd one)
oSel.options[2].selected = true;

// Append the select to the table
x.appendChild(oSel);

}

</script>
</head>
<body>
<form action="">
<input type="button" value="Add textarea" onclick="
// Call the addTextArea function, pass a reference to the form
addTextArea(this.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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Programming using memory runtime error 1
SyntaxError: Unexpected identifier at object 1
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
PHP failed to create file 13
How to create a Java Project with JDBC Spring Framework 6
[J2EE] Which tools can [re]configure messaging at runtime? 1
Const struct at a specified Address 0

Members online

Total: 19 (members: 1, guests: 18)
Robots: 346

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,015
Latest member
AmbrosePal

Latest Threads

Top