Hi,
I have the following code 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
I have the following code 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:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] 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 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('images').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="post">
<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>