472,135 Members | 1,211 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,135 software developers and data experts.

dynamically change an element's type from textbox to textarea??

I found this code in a previous post but I am not able to get this to work for me... I am trying to dynamically change an element's type from textbox to textarea with an event. Actually in my code i'm using a onClick event on a checkbox, but this is the original code exactly the way it was in the previous post... I tried to use it as it is and it errors out... Any input on how to make this code work or any other suggestions on how to accomplish what i'm trying to do would be appreciated...

[HTML]<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>[/HTML]
Mar 29 '07 #1
1 8729
mrhoo
428 256MB
change an element's type from textbox to textarea
There is no type="textarea", and a textbox is an input element with type="text".

You can replace the texbox with a textarea, either from somewhere else in the document or with document.createElement('textarea').

If you want to write the value from the input to the textarea:

var oldel=document.getElementById('inputelementid');
var newel=document.createElement('textarea');

var val=oldel.value;
oldel.parentNode.replaceChild(newel,oldel);
newel.cols="40";
newel.rows="4";
newel.value=val;
Mar 29 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by TJS | last post: by
4 posts views Thread by Joe | last post: by
6 posts views Thread by libsfan01 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.