Page 1 of 1

Adding HTML controls using javascript

Posted: Mon Aug 28, 2006 2:18 am
by dibyendrah
Hello all,
I am working on dictionary project and I want the create textarea at runtime as the user clicks add definition or examples. I was using http://javascript.internet.com/forms/ad ... trols.html but that only worked in mozilla firefox but not in MS internet explorer. Has anybody used similar to this or made the javascript based html control ? Yout contribution will be appreciated .

With Regards,
Dibyendra

Posted: Mon Aug 28, 2006 2:38 pm
by RobertGonzalez
Why would it not work in IE? Seems a simple enough task using JS I can't see why IE would choke in it.

Posted: Mon Aug 28, 2006 2:44 pm
by Luke
that page works in IE for me :?

Posted: Wed Aug 30, 2006 2:12 am
by dibyendrah
which version of IE are you using ? Mine one is version 6. Did you edit the code for compatiblilty with IE ?

:(

I have to do that while adding definitions and examples in the current project. Hope you guys can help me get out of that prob.

Dibyendra

Posted: Wed Aug 30, 2006 2:28 am
by dibyendrah
oh ! http://javascript.internet.com/forms/ad ... trols.html page works in IE. Must be something wrong on customization. I'll have a look at that. If I will be unable to solve this problem, I'll post the code here.

Cheers,
Dibyendra

Posted: Wed Aug 30, 2006 2:35 am
by dibyendrah
Maybe you guys can have a looks at my customized code.

Javascript functions :

Code: Select all

var arrInput = new Array(0);
var arrInputValue = new Array(0);

function addInput() {
  //arrInput.push(createInput(arrInput.length));
  arrInput.push(arrInput.length);
  //arrInputValue.push(arrInputValue.length);
  arrInputValue.push("");
  display();
}

function display() {
  document.getElementById('text_area').innerHTML="";
  for (intI=0;intI<arrInput.length;intI++) {
    document.getElementById('text_area').innerHTML+=createInput(arrInput[intI], arrInputValue[intI]);
  }
}

function saveValue(intId,strValue) {
  arrInputValue[intId]=strValue;
}  

function createInput(id,value) {
  return "<tr><td width=100 class=\"ewTableHeader\"><span>Example"+(id+1)+".</span></td><td class=\"ewTableAltRow\"><textarea name=\"txtaExample[]\" rows=5 cols=46 id='ex"+ id +"' onChange='javascript:saveValue("+ id +",this.value)'>"+value +"</textarea><td></tr>";
}

function deleteInput() {
  if (arrInput.length > 0) { 
     arrInput.pop(); 
     arrInputValue.pop();
  }
  display(); 
}
Calling javascript function :

Code: Select all

			<span>
				<a href="javascript:addInput()">Add Example(s)</a><br>
				<a href="javascript:deleteInput()">Remove Example(s)</a></td>
			</span>

In IE, there is an error. Please help me on solving the problem.

With regards,
Dibyendra

Posted: Wed Aug 30, 2006 3:10 am
by volka
Did you try the microsoft script debugger?

It works fine for me (after allowing active content)

Code: Select all

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>test</title>
		<script type="text/javascript">
			var arrInput = new Array(0);
			var arrInputValue = new Array(0);
			
			function addInput() {
			  //arrInput.push(createInput(arrInput.length));
			  arrInput.push(arrInput.length);
			  //arrInputValue.push(arrInputValue.length);
			  arrInputValue.push("");
			  display();
			}
			
			function display() {
			  document.getElementById('text_area').innerHTML="";
			  for (intI=0;intI<arrInput.length;intI++) {
			    document.getElementById('text_area').innerHTML+=createInput(arrInput[intI], arrInputValue[intI]);
			  }
			}
			
			function saveValue(intId,strValue) {
			  arrInputValue[intId]=strValue;
			} 
			
			function createInput(id,value) {
			  return "<tr><td width=100 class=\"ewTableHeader\"><span>Example"+(id+1)+".</span></td><td class=\"ewTableAltRow\"><textarea name=\"txtaExample[]\" rows=5 cols=46 id='ex"+ id +"' onChange='javascript:saveValue("+ id +",this.value)'>"+value +"</textarea><td></tr>";
			}
			
			function deleteInput() {
			  if (arrInput.length > 0) {
			     arrInput.pop();
			     arrInputValue.pop();
			  }
			  display();
			}
		</script>
	</head>
	<body>
		<span>
			<a href="javascript:addInput()">Add Example(s)</a><br>
			<a href="javascript:deleteInput()">Remove Example(s)</a></td>
		</span>
		<div id="text_area"></div>
	</body>
</html>

Posted: Wed Aug 30, 2006 4:07 am
by dibyendrah
it's working with that much code ! let me give a more more try on that problem. What's wrong with that... 8O

Posted: Wed Aug 30, 2006 5:10 am
by volka
I just took your code and put it into a html skeleton. Can't tell you what's wrong; it's not in the code you have shown us.

Posted: Wed Aug 30, 2006 5:51 am
by dibyendrah
I took the code from the javascript.internet.com/forms/adding-html-controls.html and did just a few customization and it worked now ! but the customized code works with firefox only..
anyway thank you so much freinds for your kind help !

Cheers,
Dibyendra