Javascript: Replacing text inputs/textareas with their content

Seguer

Hey guys,

Just wondering if any one is aware of a relatively easy way to loop through all input elements of type="text" and textareas, and then replace that html part of them with a span that contains the text in that element. Possibly a way to turn them back as well, though that's a bit more difficult.

I've been tasked with making a printable form using HTML (which is done), and I'm trying to make it print nicely. Printing the inputs is fine with a print css to remove the borders etc, but if there's an easy way of doing this, then it is going to look the best, over different browsers as well.

I already have a way to loop through the elements and I know you can write dynamic html, but I'd need the parent element etc.

devoir

If I'm understanding you correctly, I've done a similar thing where I put the span around the actual element and replace the element's content HTML with whatever I want.

So what you do is have something like a span with an id of "container_01" and inside that an input with an id of "content_01", pull the text from "content_01" and replace the content of "container_01" with that text.

life3

You want to use the innerHTML property.

devoir outlined is pretty well. In your HTML you've got:

<span id="thespan"><textarea blah blah blah/></span>

Then in your javascript you'd get your "thespan" object through whatever means(loop through, getElementByID, etc..).

thespanobject.innerHTML = "<a href='http://alinkinsteadoftextbox.com'>yeay!</a>"

Seguer

Thanks, that's pretty much what I was aiming for. After a bit more print testing I don't need it for inputs, just textareas, which will simplify things.

Jasconius

If you have multiple text fields to deal with, you can give them a common name attribute, and there is a javascript function that will put all of those text fields into an array as objects.

Then you can just loop through the array and run innerHTML on them.

That's my method of choice when dealing with multiple items.

getElementsByName is handy, because as far as I know it's the only one that will store it an array.

Seguer

Thanks Jasconius, I'll give that a look.