I need to maintain text box values into an array in javascript onchange event. The text box control is created dynammically in javascript function. I have used below code. But at the end the array contains current element only. Previous values are not maintaining. How can I maintain textbox value each time entered.
<script type="text/javascript" language="javascript">
function DrawTextBox(j) {
var imgElement = document.getElementById('myimage');
var imgCoord = imgElement.getBoundingClientRect();
var cl = imgCoord.left + 20;
var x = x - cl;
var y = y - imgCoord.top;
var rect = document.getElementById(j);
if (rect == null) {
rect = document.createElement("div");
rect.id = j;
var pElement = document.getElementById("imgDiv");
pElement.appendChild(rect);
}
if (w < 0) {
w = 10;
}
if (h < 0) {
h = 10;
}
var l = parseInt(document.getElementById("hright").value) + 150 + 'px';
var style = rect.style;
// style.width = w + "px";
//style.height = h + "px";
style.left = l;
style.top = document.getElementById("htop").value;
style.backgroundColor = "Transparent";
//style.borderColor = "Blue";
style.position = "absolute";
style.borderStyle = "solid";
style.borderWidth = 2 + "px";
style.zIndex = 6000;
document.getElementById(j).innerHTML = "<textarea name=\"comments\" style=\" border:0\" Title=\"Enter Comment\" id=\"T1\" value=\"EnterComment:\" onchange=\"GetText()\" ></textarea>";
//document.getElementById(i).innerHTML = "<input type=\"Textarea\"...blah blah...></input>";
return rect;
}
function GetText() {
array1.push(document.getElementById('T1').value);
alert(array1.join(', '));
}
</script>
Your question doesn´t say if/when/where array1 is declared and when DrawTextBox() is called but you can´t insert multiple elements using the same ID "T1" as it violates basic HTML rules.
ReplyDeleteTry passing a referens to the current element like this onchange="GetText(this)" and use it in your GetText() function as;
function GetText(el) {
array1.push(el.value);
alert(array1.join(', '));
}