Cannot create textarea using JavaScript

JavaScript
1

Hello,

I’m trying to create a textarea using Javascript, the function creates a textarea in IE, but it does not create that element in Firefox and chrome.

JavaScript Code:-

function addRow()
   {
	    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');
		textArea.setAttribute("name","option1");
		textArea.setAttribute("cols","20");
		textArea.style.height = "42px";
		textArea.style.width = "496px";
		cell2.appendChild(textArea);
		alert("function end");
   }
   
function zxcFormField(tag){
	alert("2 function start");
 var el;
 try {
	 alert("In Try");
  el=document.createElement(tag);
 }
 catch (e){
	 alert("In Catch");
  }
 return el;
}

Here is my HTML code:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<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>
</HEAD>
<BODY>
<div id="content">
	  <h2>Question Description</h2>
		<form name="addQuestion" action="" method="get">
		  <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 appreciate your help on this!
Thanks,
Abhishek

2

For some reason the button is triggering the form to submit, which reloads the page.

You need the function to return false, and for the onclick event to return that value to the form.


function addRow() {
    ...
    return false;
}



<button onclick="return addRow()">Add Row</button>
3

Hello pmw,

Thankyou for your response. I tried returning false but even that does not make it work. Is this something specific with Firefox as it works on IE?

Thanks,
Abhishek

4

That solved the problem for me on Google Chrome.

If your page is still reloading then the advice given above may not have been completed through to fruition.

The next step is for us to look at your updated code, to find out what there is that is getting in your way.

5

Hello,

You would not believe me when I say that I missed the button type in my HTML code…:shifty: I was missing the type in my button…

I’m interested in knowing “What happens when we return false to the button?”

Regards,
Abhishek

6

Returning false to an element prevents its default behaviour from occurring. With a link that is navigating to another page. With the button you had, that is submitting the form back to the same page.