Adding HTML controls using javascript

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
dibyendrah
Forum Contributor
Posts: 491
Joined: Wed Oct 19, 2005 5:14 am
Location: Nepal
Contact:

Adding HTML controls using javascript

Post 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
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

that page works in IE for me :?
User avatar
dibyendrah
Forum Contributor
Posts: 491
Joined: Wed Oct 19, 2005 5:14 am
Location: Nepal
Contact:

Post 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
User avatar
dibyendrah
Forum Contributor
Posts: 491
Joined: Wed Oct 19, 2005 5:14 am
Location: Nepal
Contact:

Post 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
User avatar
dibyendrah
Forum Contributor
Posts: 491
Joined: Wed Oct 19, 2005 5:14 am
Location: Nepal
Contact:

Post 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
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post 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>
User avatar
dibyendrah
Forum Contributor
Posts: 491
Joined: Wed Oct 19, 2005 5:14 am
Location: Nepal
Contact:

Post 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
User avatar
volka
DevNet Evangelist
Posts: 8391
Joined: Tue May 07, 2002 9:48 am
Location: Berlin, ger

Post 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.
User avatar
dibyendrah
Forum Contributor
Posts: 491
Joined: Wed Oct 19, 2005 5:14 am
Location: Nepal
Contact:

Post 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
Post Reply