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

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