www.webdeveloper.com
Results 1 to 5 of 5

Thread: Cannot create textarea using JavaScript

  1. #1
    Join Date
    Feb 2010
    Posts
    3

    Question Cannot create textarea using JavaScript

    Hello,

    I'm trying to add Textarea in a table cell using JavaScript, but I'm unable to do so in Firefox and Chrome. The textarea gets added in IE but not in Firefox or Chrome, in firefox and chrome the textarea appears for flash and then disappears. One more problem is if I refresh the page in IE the text in the textarea does not go, it is present even after I refresh the page. It's a very basic JavaScript function but I am not able to debug the problem. Here is the function:-

    function addRow()
    {
    alert("height : 42px; width : 496px;");
    var table = document.getElementById('tableId');
    var rowCount = table.rows.length;

    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var textNode = document.createTextNode(rowCount + 1);
    cell1.appendChild(textNode);

    var cell2 = row.insertCell(1);
    //var tempLabel = document.createElement("label");
    var textArea = document.createElement("textarea");
    textArea.setAttribute("name","option1");
    textArea.setAttribute("cols","20");
    textArea.style.height = "42px";
    textArea.style.width = "496px";
    //tempLabel.appendChild(textArea);
    cell2.appendChild(textArea);
    }

    Are there any other best practices that I should keep in mind while doing dom manipulation.

    Regards,
    Abhishek

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,687
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script  type="text/javascript">
    /*<![CDATA[*/
    function addRow()
    {
    alert("height : 42px; width : 496px;");
    var table = document.getElementById('tableId');
    var rowCount = table.rows.length;
    
    var row = table.insertRow(rowCount);
    
    var cell1 = row.insertCell(0);
    var textNode = document.createTextNode(rowCount + 1);
    cell1.appendChild(textNode);
    
    var cell2 = row.insertCell(1);
    //var tempLabel = document.createElement("label");
    var textArea =zxcFormField('TEXTAREA','option1');
    textArea.style.height = "42px";
    textArea.style.width = "496px";
    //tempLabel.appendChild(textArea);
    cell2.appendChild(textArea);
    }
    
    function zxcFormField(tag,nme,type){
     var el;
     try {
      el=document.createElement('<'+tag+(type?' type='+type:'')+' name='+nme+' >');
     }
     catch (e){
      el=document.createElement(tag);
      if (type) el.type=type;
      el.name=nme;
     }
     return el;
    }
    /*]]>*/
    </script></head>
    
    <body>
    <table>
    <tbody id="tableId"></tbody>
    </table>
    <input type="button" name="" value="TEST" onclick="addRow()" /></body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Feb 2010
    Posts
    3

    Does not create the textarea..:(

    Hello,

    Thank you for an early response. I tried running the script but it still does not create the textarea. textarea element gets created and disappears with a flash. Why can't we create a textarea using document.createelement(elementName) instead of --document.createElement('<'+tag+(type?' type='+type:'')+' name='+nme+' >');-- Did we miss passing type as a parameter? in the method call :- `var textArea = zxcFormField('TEXTAREA','option1');`

    What does type mean in the method parameter here? and why does the element disappear as it get's created?

    My whole JavaScript now looks like this:-

    function addRow()
    {
    alert("height : 42px; width : 496px;");
    var table = document.getElementById('tableId');
    var rowCount = table.rows.length;

    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var textNode = document.createTextNode(rowCount + 1);
    cell1.appendChild(textNode);

    var cell2 = row.insertCell(1);
    var textArea = zxcFormField('TEXTAREA','option1');
    textArea.setAttribute("name","option1");
    textArea.setAttribute("cols","20");
    textArea.style.height = "42px";
    textArea.style.width = "496px";
    cell2.appendChild(textArea);
    }

    function zxcFormField(tag,nme,type){
    var el;
    try {
    el=document.createElement('<'+tag+(type?' type='+type:'')+' name='+nme+' >');
    }
    catch (e){
    el=document.createElement(tag);
    if (type) el.type=type;
    el.name=nme;
    }
    return el;
    }

    HTML code:-

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Dynamic Field Addition</title>
    <link href="layout.css" rel="stylesheet" type="text/css"/>
    <script language="JavaScript" type="text/javascript" src="JavaScriptFunctions.js"></script>
    <script language="JavaScript" type="text/javascript" src="wysiwyg.js"></script>
    <style type="text/css">
    <!--
    .style1 {font-family: Verdana, Arial, Helvetica, sans-serif}
    -->
    </style>
    </HEAD>
    <BODY>
    <div id="content">
    <form name="addQuestion" action="" method="get">
    <div id="textarea">
    <textarea id="question" cols="20" rows="7" style="width : 500px;">
    Add Question Here !!!
    </textarea>
    <script language="JavaScript">
    generate_wysiwyg('question');
    </script>
    </div>
    <label></label>
    <table width="425" border="0">
    <tr>
    <td width="419"><label>
    <button onclick="addRow()">Add Row</button>
    <button onclick="">Delete Row</button>
    </label></td>
    </tr>
    </table>
    <table id="tableId">
    <tr>
    <td width="8" >1</td>
    <td width="502"><label>
    <textarea name="textarea" cols="20" style="height : 40px; width : 496px;"></textarea>
    </label></td>
    </tr>
    <tr>
    <td>2</td>
    <td><label>
    <textarea name="textarea2" style="height : 40px; width : 494px;"></textarea>
    </label></td>
    </tr>
    </table>
    </form>
    </div>
    </BODY>
    </HTML>


    I'm new to JavaScript, please bear with me if I'm making a silly mistake.

    Regards,
    Abhishek

  4. #4
    Join Date
    Feb 2010
    Posts
    3

    Question Figured out that the function goes in catch... but I have no clue why it is happening

    The javascript above goes in catch block for some reason in firefox... but I'm not able to figure out why it is going in catch block..

    Any thoughts or ideas???

    Thanks,
    Abhishek

  5. #5
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,687
    see the code I posted

    Code:
    <table>
    <tbody id="tableId"></tbody>
    </table>
    elements MUST be appended to the tbody
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles