473,324 Members | 1,856 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

object create at runtime

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

B.
Jul 23 '05 #1
3 9105


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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: lolomgwtf | last post by:
I have a managed C++ method that wraps unmanaged code and creates a managed object holding data retrieved form an unmanged one. I want create an instance of this managed class in C#, pass it to...
8
by: Steve Neill | last post by:
Can anyone suggest how to create an arbitrary object at runtime WITHOUT using the deprecated eval() function. The eval() method works ok (see below), but is not ideal. function Client() { }...
9
by: gulu man | last post by:
Hi, What is the substitute for COM objects in .NET? How can I create something similar to com in .net? Is it still possible? Thank you
15
by: Carlos Lozano | last post by:
Hi, What is the right way to create an OCX COM component. The component is already registerred, but can't create an instance. I am using the reference to the interop module created. If I use...
4
by: Kevin Phifer | last post by:
Ok, before anyone freaks out, I have a solution I need to create that gathers content from maybe different places. Each one can return a <form> in the html, so its the classic can't have more than...
4
by: Andres | last post by:
Hi all, I have the problem to assign a variable of type object to a specific class at runtime. I want to use a string variable that specify the class a want to set this object. Is something...
7
by: Dave Taylor | last post by:
I have a DataTable with three string columns, "Value", "Format" and "Type" However, some of the rows contain numbers and dates in the Value field. So I would like to be able to format the output...
11
by: Kevin Prichard | last post by:
Hi all, I've recently been following the object-oriented techiques discussed here and have been testing them for use in a web application. There is problem that I'd like to discuss with you...
7
by: Jeff S | last post by:
I'm relatively new to non trivial OOP programming and recently stumbled across the idea of Factory classes that can create objects at runtime. I know we can hard-code class definitions for use by...
2
by: Ralph | last post by:
Hi I don't understand why it's not working: function schedule(imTop){ this.tdImagesTop = imTop; } schedule.prototype.selectEl = function() { alert(this.tdImagesTop);
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.