object create at runtime

Discussion in 'Javascript' started by takarimasu, Mar 3, 2005.

  1. takarimasu

    takarimasu Guest

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

    B.
    takarimasu, Mar 3, 2005
    #1
    1. Advertising

  2. 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/
    Martin Honnen, Mar 3, 2005
    #2
    1. Advertising

  3. 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.
    Michael Winter, Mar 3, 2005
    #3
  4. takarimasu

    RobG Guest

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

    --
    Rob
    RobG, Mar 3, 2005
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Carolyn Speakman
    Replies:
    1
    Views:
    1,036
    Keith M. Corbett
    Jul 30, 2004
  2. Hal Vaughan
    Replies:
    11
    Views:
    1,085
    Gordon Beaton
    May 22, 2006
  3. jon wayne
    Replies:
    9
    Views:
    695
    Jim Langston
    Sep 22, 2005
  4. Allen

    Create object in runtime

    Allen, Sep 29, 2009, in forum: ASP .Net
    Replies:
    1
    Views:
    298
    Patrice
    Sep 30, 2009
  5. Steve Neill

    How to create an arbitrary object at runtime?

    Steve Neill, Oct 20, 2004, in forum: Javascript
    Replies:
    8
    Views:
    118
    Steve Neill
    Oct 21, 2004
Loading...

Share This Page