By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,963 Members | 1,994 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,963 IT Pros & Developers. It's quick & easy.

object create at runtime

P: n/a
How can i create an input object (text area,select) at runtime ?

B.
Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a


takarimasu wrote:
How can i create an input object (text area,select) at runtime ?


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);
}

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #2

P: n/a
takarimasu wrote:
How can i create an input object (text area,select) at runtime ?


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/>

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #3

P: n/a
takarimasu wrote:
How can i create an input object (text area,select) at runtime ?


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[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(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>

--
Rob
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.