Welcome to WebmasterWorld Guest from 54.90.204.233

Forum Moderators: open

Message Too Old, No Replies

inputs and textareas values with innerHTML

     
11:32 am on May 28, 2008 (gmt 0)

New User

10+ Year Member

joined:Nov 3, 2007
posts:15
votes: 0


Hi all

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

2:45 pm on May 30, 2008 (gmt 0)

New User

10+ Year Member

joined:Nov 3, 2007
posts:15
votes: 0


Looks like a tough one hey.
Well i figured a way around the problem, which I don't like, but works.
All I do it get the textareas value into a variable before getting the innerHTML, then re-add the value with a document.getElementById("textarea-id").value = myVar;
Not the prettiest of solutions considering the content I am trying to copy is generated with ajax and can differ in the number of inputs/textareas returned.
6:59 am on May 31, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


Instead of copying the innerHTML of the whole DIV add textarea and input/text to html within content-2 div (initialy hidden if need be) then just copy values across.

The browsers seem to hold the form data separate from the DOM and creating form elements on the fly is best avoided.

8:33 am on June 1, 2008 (gmt 0)

New User

10+ Year Member

joined:Nov 3, 2007
posts:15
votes: 0


Hey dave. Thanks for the reply, but the example I was giving was just for illustration of the problem. I'm actually doing something more like this:

<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 :)

12:53 pm on June 1, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


I would check what happens both when you reload the page and when you revisit the page ( say go press back then forward ). This may not be important for this application, standard forms retain there data.

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.