Adding HTML controls using javascript
Moderator: General Moderators
- dibyendrah
- Forum Contributor
- Posts: 491
- Joined: Wed Oct 19, 2005 5:14 am
- Location: Nepal
- Contact:
Adding HTML controls using javascript
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
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
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
- dibyendrah
- Forum Contributor
- Posts: 491
- Joined: Wed Oct 19, 2005 5:14 am
- Location: Nepal
- Contact:
- dibyendrah
- Forum Contributor
- Posts: 491
- Joined: Wed Oct 19, 2005 5:14 am
- Location: Nepal
- Contact:
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
Cheers,
Dibyendra
- dibyendrah
- Forum Contributor
- Posts: 491
- Joined: Wed Oct 19, 2005 5:14 am
- Location: Nepal
- Contact:
Maybe you guys can have a looks at my customized code.
Javascript functions :
Calling javascript function :
In IE, there is an error. Please help me on solving the problem.
With regards,
Dibyendra
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();
}
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
Did you try the microsoft script debugger?
It works fine for me (after allowing active content)
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>- dibyendrah
- Forum Contributor
- Posts: 491
- Joined: Wed Oct 19, 2005 5:14 am
- Location: Nepal
- Contact:
- dibyendrah
- Forum Contributor
- Posts: 491
- Joined: Wed Oct 19, 2005 5:14 am
- Location: Nepal
- Contact: