SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2007
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Removing textareas

    Hi all,

    I have the following code which dynamically creates a textarea upon clicking a button. My question is though how do I remove the textarea from clicking a button. I have managed to create the remove button but now sure what the onClick function should contain???

    Code HTML4Strict:
    <!DOCTYPE html 
         PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>whatever</title>
    <script type="text/javascript">
    var i = 1
    function addArea() {
        var d = document;
        var ot = d.createElement('textarea');
    	ot.setAttribute("id", "a"+i);
        d.getElementById('divone').appendChild(ot);
     
    	but=document.createElement('input');
       but.setAttribute('type','button');
       but.setAttribute('value','remove textarea');
       but.setAttribute('name','remove');
       but.setAttribute('id','remover');
       document.getElementById('divone').appendChild(but);
     
       document.getElementById('remover').onclick=function()
     {
     
      ?????????????
     
       }
    	i++;
    }
     
    </script>
    </head>
    <body>
    <div id="divone">
    </div>
    <input type="button" onclick="addArea();" value="Add textarea"/>
    </body>
    </html>

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2008
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>whatever</title>
    <script type="text/javascript">
    var i = 1
    function addArea() {
    var d = document;
    var ot = d.createElement('textarea');
    ot.setAttribute("id", "a"+i);
    d.getElementById('divone').appendChild(ot);

    but=document.createElement('input');
    but.setAttribute('type','button');
    but.setAttribute('value','remove textarea');
    but.setAttribute('name','remove');
    but.setAttribute('id','remover' + i);
    document.getElementById('divone').appendChild(but);

    document.getElementById('remover' + i).onclick=function()
    {
    var buttonId = this.id;
    var textAreaId = "a" + buttonId.substring(7);

    var toRemove = document.getElementById(textAreaId);
    document.getElementById('divone').removeChild(toRemove);

    toRemove = document.getElementById(buttonId);
    document.getElementById('divone').removeChild(toRemove);
    }
    i++;
    }

    </script>
    </head>
    <body>
    <div id="divone">
    </div>
    <input type="button" onclick="addArea();" value="Add textarea"/>
    </body>
    </html>

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2007
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok thats great I have now extended the code see below however when I submit the form I can not grab the values from the textareas but I can grab the value from the hidden textfield which is strange.

    When I try to grab the post value of a textarea it says its empty

    Could anyone please advise

    Code HTML4Strict:
    <!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    		<title>whatever</title>
    		<script type="text/javascript">
    			//Set counter
    			var i = 1
    			function addArea() 
    			{
    				//To ensure only 6 images are uploadedd
    				if (i >= 7)
    				{
    					alert("Max of 6 textboxes");
    					return;
    				}
     
    				//Create a new  div for the textarea
    				var newdiv = document.createElement('div');
    				var divIdName = 'imageDiv'+i;
    				newdiv.setAttribute('id',divIdName);
    				newdiv.style.width = "390px";
    				newdiv.className = "imageDiv";
    				document.getElementById('images').appendChild(newdiv);
     
    				//Create a new textarea
    				var newTextArea = document.createElement('textarea');
    				newTextArea.setAttribute("id", "a"+i);
    				newTextArea.setAttribute("cols", "45");
    				newTextArea.setAttribute("rows", "10");
    				newTextArea.setAttribute("class", "imageTextArea");
    				document.getElementById(divIdName).appendChild(newTextArea);
     
    				//Add remove button
    				var removeButton = document.createElement('input');
    				removeButton.setAttribute('type','button');
    				removeButton.setAttribute('value','Remove Image');
    				removeButton.setAttribute('name','remover'+ i);
    				removeButton.setAttribute('id','remover'+ i);				
    				document.getElementById(divIdName).appendChild(removeButton);
     
     
    				//Add hidden counter if not already created else update value
    				if (document.getElementById("numberOfImages") == null)
    				{
    					var numberOfImages = document.createElement('input');
    					numberOfImages.setAttribute('type','hidden');
    					numberOfImages.setAttribute('value',i);
    					numberOfImages.setAttribute('name','numberOfTextareas');
    					numberOfImages.setAttribute('id','numberOfTextareas');				
    					document.getElementById('numberOfTextareasDiv').appendChild(numberOfImages);
    				}
    				else
    				{
    					var numberOfImages = document.getElementById('numberOfImages')
    					numberOfImages.setAttribute('value',i);
    				}
     
     
    				//Function on when the remove image button is clicked
    				document.getElementById('remover' + i).onclick=function()
    				{
    					var buttonId = this.id;
    					var textAreaId = "a" + buttonId.substring(7);
     
    					//Remove textarea
    					var toRemove = document.getElementById(textAreaId);
    					document.getElementById(divIdName).removeChild(toRemove);
     
    					//Remove remove button
    					toRemove = document.getElementById(buttonId);
    					document.getElementById(divIdName).removeChild(toRemove);
     
    					//Remove div
    					var div = document.getElementById(divIdName)
    					div.parentNode.removeChild(div);
     
    					//Decrease counter
    					var numberOfTextareasValue = document.getElementById('numberOfTextareas').value
    					i = i - 1;
     
     
    					//if value is 0 then delete hidden field else update value
    					if (i == 1)
    					{
    						toRemove = document.getElementById('numberOfTextareas');
    						document.getElementById('numberOfTextareasDiv').removeChild(toRemove);
    					}
    					else
    					{
    						var numberOfImagesValue = document.getElementById('numberOfTextareas')
    						numberOfImages.setAttribute('value',i-1);
    					}
     
    				}
    				//Increase counter
    				i++;
    			}
     
    		</script>
    		<style>
    			.imageDiv{
    				float:left;	
    				margin:5px;
    			}
    			.imageTextrea{
     
    			}
     
    			#images
    			{
    				border:1px solid black;
    				width:800px;
    				height:675px;
    			}
    		</style>
    	</head>
    	<body>
    		<noscript>
    			<p>Javascript is disabled on your browser.Please enable JavaScript on your browser or upgrade to a Javascript-capable browser</p>
    		</noscript>
    		<form id="myForm" name="myForm" action="sampleposteddata.php" method="get">
    			<input id="addImage" type="button" onclick="addArea();" value="Add text area"/>
                <br/>
                  <br/>
    			<div id="images">
    			</div>
                <div id="numberOfTextareasDiv"></div>
                <br/>
                <input name="submit" type="submit" value="add to database" />
    		</form>
    	</body>
    </html>

  4. #4
    SitePoint Zealot
    Join Date
    Oct 2007
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    AHH its ok I just sorted it!

    I havent been giving the textareas names
    newTextArea.setAttribute("name", "a"+i);

    How stupid can i be

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2008
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's ok, everybody does errors, not all correct them


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •