To create a textarea using JavaScript and then to remove it needs only moderate knowledge of javascript but if you're a novice or a beginner you might have to work hard a lot and then go through several websites or books to do it. Even if you have a good hand in JavaScript you can get stuck to do this task, So I am posting here the code which you can just copy and paste to use it in your web application.
<html>
<head>
<script type="text/javascript">
var i=0;
function add(type)
{
i=i+1;
if(i==1)
{
var element = document.createElement('<textarea name=reply id=reply>');
//element.setAttribute("name",reply);
element.setAttribute("rows",4);
element.setAttribute("cols",20);
var foo = document.getElementById("fooBar");
foo.appendChild(element);
}
}
function remove()
{
var element = document.getElementById('reply');
var parent = document.getElementById('fooBar');
parent.removeChild(element);
i=0;
//document.getElementById("reply").style.visibility="hidden";
}
</script>
<style>
textarea#reply
{
width: 300px;
height: 60px;
padding: 5px;
font-family: Tahoma, sans-serif;
background-image: url(bg.gif);
background-position: bottom right;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<form>
<input type="button" value="add" onclick="add()"/>
<input type="button" value="remove" onclick="remove()"/>
<span id="fooBar"> </span>
</form>
</body>
</html>
Now What goes on here might be your first thought, so let us just go through some points so that you can understand the code. First of all you can remove the "style" part anytime its just there to make looks better. Now when you click add button it calls "add()" function in JavaScript, that function using variable i checks that if add is clicked the first time or not; this is being done to avoid adding multiple text areas. Document.createElement creates your required element and setattribute sets the different attributes which you want to set for the html element. Next, element fooBar is taken into variable foo and then the new element is appended into fooBar so you can place " " anywhere in your page where you want to add new element.
When you click the button remove the JavaScript function remove is called it first takes the element's parent id that is fooBar then the element's id and on the basis of that it removes that child element from that parent element, so your page is again into its previous look.
Now here is some twist, this code works in IE only, it is not working in Firefox. I have not checked its working with chrome, safari etc. but still I think this might help you a lot. And soon as I get code for other browsers too i will post it.
Good Luck
Apoorva Gora
No comments:
Post a Comment