change element type with JS

[libsfan01]

hi all!

is it possible to change an element type with javacript for example
onclick to change a text box to a hidden element or to a textarea?

kind regards

marc

[Randy Webb]

libsfan01 said the following on 8/8/2006 4:40 AM:

hi all!

is it possible to change an element type with javacript for example
onclick to change a text box to a hidden element or to a textarea?

Did you try it?

Remove the element from the DOM and then re-add it.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[libsfan01]

Hey Randy!

I have absolutely no idea how to remove and add to the DOM until now my
paradigm was that you couldnt do such a thing client-side. Pray tell
Randy how can i add an element to the dom within a named form?

Thanks again

Marc
Randy Webb wrote:

libsfan01 said the following on 8/8/2006 4:40 AM:

hi all!

is it possible to change an element type with javacript for example
onclick to change a text box to a hidden element or to a textarea?

Did you try it?

Remove the element from the DOM and then re-add it.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[Yanick]

is it possible to change an element type with javacript for example
onclick to change a text box to a hidden element or to a textarea?

the "type" property of an element is read-only (only have a getter),
thus cannot be modified. But, as Randy wrote, creating a new element,
setting it's value to the old one, then removing that old element is
how you should do it.

Consider the following :

------------------------------ start
--------------------------------------------
<script type="text/javascript">
function changeTextBox2TextArea( elementId ) {
var _el = document.getElementById( elementId );
var _parent = _el.parentNode;

// we remove the element from the DOM (optional as seen below...)
_parent.removeChild( _el );

// property is read-only so we replace the element
if ( _el.type == 'text' ) {

// IE doesn't like too much playing with DOM, so we use the
innerHTML method.
// Using innerHTML replace all current elements inside _parent with
the new
// elements specified in the string.

_parent.innerHTML = '<textarea id="' + _el.id + '">' + _el.value +
'</textarea>';
} else {
_parent.innerHTML = '<input type="text" id="' + _el.id + '"
value="' + _el.value + '" />';
}

_el = null; // remove any reference to the old element
}
</script>

<input type="button" value="Change Text Box"
onclick="changeTextBox2TextArea('test');" />

<div>
<input type="text" id="test" />
</div>
---------------------------- end
-------------------------------------------------------

Here's some links that might interest you in learning the DOM
structure:

http://www.howtocreate.co.uk/tutoria...ript/dombasics
http://www.w3schools.com/htmldom/default.asp

.... look on Google, your best friend ;)

Hope this helps.

[Randy Webb]

Yanick said the following on 8/8/2006 12:52 PM:

>is it possible to change an element type with javacript for example
onclick to change a text box to a hidden element or to a textarea?

the "type" property of an element is read-only (only have a getter),
thus cannot be modified. But, as Randy wrote, creating a new element,
setting it's value to the old one, then removing that old element is
how you should do it.

But that is not what your code does.

Consider the following :

<snip>

if ( _el.type == 'text' ) {

// IE doesn't like too much playing with DOM, so we use the
innerHTML method.

IE can "play with the DOM" quite well, you just have to learn how to do
it is all.

Here's some links that might interest you in learning the DOM
structure:

http://www.howtocreate.co.uk/tutoria...ript/dombasics
http://www.w3schools.com/htmldom/default.asp

I have yet to see anything in w3schools that I would consider worth
learning from when there are better resources.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[Yanick]

Randy Webb wrote:

the "type" property of an element is read-only (only have a getter),
thus cannot be modified. But, as Randy wrote, creating a new element,
setting it's value to the old one, then removing that old element is
how you should do it.

But that is not what your code does.

sure, I just replace it by the correct one. If you have an <input>
element that you want to change into a, for example, <divelement,
changing the type may cause trouble in a long run (if it's even
possible to do so anyways).

IE can "play with the DOM" quite well, you just have to learn how to do
it is all.

Oh, but I can too, but I found out that, IE had problems when your DOM
element is heavily customized / nested, so I try to balance both
worlds. Besides, working with innerHTML is somewhat faster...

I have yet to see anything in w3schools that I would consider worth
learning from when there are better resources.

Was I replying to you ? I thought that I was replying to the original
poster ? No offense to you, but I don't really care if you have some
"better ressources" (that you won't even care to point out, in fact).
Really, I have no grudge against you, nor do I have to proove anything
to you ; I'm simply trying to level out the help I'm giving to what I
think would be understandable by the original poster. You may agree
with me or not, but trying to proove that you're better than me (maybe
you are better than me, I really don't care) won't solve anything. Be
constructive, please.

[Randy Webb]

Yanick said the following on 8/12/2006 11:47 AM:

Randy Webb wrote:

>>the "type" property of an element is read-only (only have a getter),
thus cannot be modified. But, as Randy wrote, creating a new element,
setting it's value to the old one, then removing that old element is
how you should do it.

But that is not what your code does.

sure, I just replace it by the correct one.

Then you agree that you aren't changing an element's type but that you
are removing it and replacing it?

If you have an <inputelement that you want to change into a, for
example, <divelement, changing the type may cause trouble in a
long run (if it's even possible to do so anyways).

Precisely. So you can't change an elements type, you remove it and
replace it. Or, swap them out using CSS.

>IE can "play with the DOM" quite well, you just have to learn how to do
it is all.

Oh, but I can too, but I found out that, IE had problems when your DOM
element is heavily customized / nested, so I try to balance both
worlds. Besides, working with innerHTML is somewhat faster...

innerHTML is somewhat faster sometimes, but not always. But that still
doens't mean that IE can't "play with the DOM" as it can. You just have
to use IE's DOM model and code is all.

>I have yet to see anything in w3schools that I would consider worth
learning from when there are better resources.

Was I replying to you ?

By your reasoning, you had no reason to reply to the OP as the question
wasn't directed at you. It's a flawed reasoning. This is Usenet, you
post, it gets replied to. Get used to it.

I thought that I was replying to the original poster?

And I replied to you, get used to it, it's Usenet. You post, it gets
discussed.

No offense to you, but I don't really care if you have some
"better ressources" (that you won't even care to point out, in fact).

There are two that are in my signature that get posted in every post I
make. Those two resources lead to numerous *quality* resources. So yes,
I point them out every time I post.

Really, I have no grudge against you, nor do I have to proove anything
to you ; I'm simply trying to level out the help I'm giving to what I
think would be understandable by the original poster.

And there is nothing wrong with that. But when there are better
resources, or the answer given is a sub-optimal answer, you can bet your
beer money it will be pointed out in this group.

You may agree with me or not,

I don't, but that should be obvious.

but trying to proove that you're better than me (maybe
you are better than me, I really don't care) won't solve anything.

Who said anything about somebody being better than somebody else? But by
the same token, pointing a person to a sub-optimal marginal resource
does more harm - in the long run - than it does good.

Be constructive, please.

Being constructive is a matter of a point of view. My post was very
constructive, if you fail to see that, then re-read it with an open mind
and try to learn from it. That is how I learned about half of what I
know about scripting is from people pointing out my mistakes and then me
learning from it.

There is not one person in this group that has answered more than 25
posts or so that has not been corrected in the past. Try finding someone
who doesn't fit that bill. It's part of this group and it is precisely
what makes this group as good as it is.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/