Cannot create textarea using JavaScript

**xs2abhishek1237** · 02-21-2010 02:17 AM

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

**vwphillips** · 02-21-2010 06:40 AM

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>

**xs2abhishek1237** · 02-21-2010 10:39 AM

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

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

**xs2abhishek1237** · 02-21-2010 04:35 PM

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

**vwphillips** · 02-22-2010 02:45 AM

see the code I posted

Code:

<table>
<tbody id="tableId"></tbody>
</table>

elements MUST be appended to the tbody

Thread: Cannot create textarea using JavaScript

Thread Tools

Display

Cannot create textarea using JavaScript

Does not create the textarea..:(

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

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions