Forum Moderators: open
I am trying to do some fancy javascript to pretty up an interface I am designing. I found a problem with getting the innerHTML of an element that had inputs in it. The inputs value would be set to what it was when the page loaded, not what the user had changed it to. Check out this example (It seems in preview as if the code does not format well, sorry)
<html>
<head>
<title></title>
</head>
<script>
function copyContent() {
var content = document.getElementById("content-1").innerHTML;
document.getElementById("content-2").innerHTML = content;
}
</script>
<body>
<p>
<input id="slide-button" type="button" value="Copy" onclick="copyContent();" />
</p>
<p>
<div id="content-1" style="width:500px; height:200px; border:1px solid black;">
<p>Change the value of the input and textarea, then press the "Copy" button.<p>
<p><input type="text" value="stuff in the input" /></p>
<p><textarea>This is some stuff in the textarea</textarea></p>
</div>
</p><p>
<div id="content-2" style="width:500px; height:200px; border:1px solid black;">
</div>
</p>
</body>
</html>
The reason it is doing this is because the DOM is not updated when the user changes the inputs/textareas value. So I put an onblur on the input, to setAttribute('value', this.value) to update the DOM. This works for the input, but not the textarea. Here is the updated code:
<html>
<head>
<title></title>
</head>
<script>
function copyContent() {
var content = document.getElementById("content-1").innerHTML;
document.getElementById("content-2").innerHTML = content;
}
</script>
<body>
<p>
<input id="slide-button" type="button" value="Copy" onclick="copyContent();" />
</p>
<p>
<div id="content-1" style="width:500px; height:200px; border:1px solid black;">
<p>Change the value of the input and textarea, then press the "Copy" button.<p>
<p><input type="text" value="stuff in the input" onblur="this.setAttribute('value', this.value);" /></p>
<p><textarea onblur="this.setAttribute('value', this.value);">This is some stuff in the textarea</textarea></p>
</div>
</p><p>
<div id="content-2" style="width:500px; height:200px; border:1px solid black;">
</div>
</p>
</body>
</html>
Any idea why this doesn't work for the textarea?
Thanks in advanced
The browsers seem to hold the form data separate from the DOM and creating form elements on the fly is best avoided.
<html>
<head>
<title></title>
</head>
<script>
function addContent() {
var content = document.getElementById("content-1").innerHTML;
document.getElementById("content-1").innerHTML += "<p>Some more stuff</p>";
}
</script>
<body>
<p>
<input type="button" value="Add Stuff" onclick="addContent();" />
</p>
<p>
<div id="content-1" style="width:500px; height:200px; border:1px solid black;">
<p>Change the value of the input and textarea, then press the "Add Stuff" button.<p>
<p><input type="text" value="stuff in the input" onblur="this.setAttribute('value', this.value);" /></p>
<p><textarea onblur="this.setAttribute('value', this.value);">This is some stuff in the textarea</textarea></p>
</div>
</p></body>
</html>
What I'm really doing is an ajax search that just adds to the results to the ones already there. So once the html from the ajax request is returned, I just += it to the results div innerHTML.
To fix it, Ive just started looping through all textareas I have in the results div, and storing their values in an array. After appending the extra html, I then loop through the array and re populate the textareas value. It works, but it is definitely a work around for a problem I don't really understand.
Why does the "setAttribute" hack works with inputs, but not textareas. An interesting problem :)
The workaround I use where a variable no of fields is required is output a single input hidden containing all the data, and use javascript to generate controls for each field.
The value attribute on textarea is a bit of a fudge as I don't think can not encode it as <textarea value="some text"/> like other attributes.
