473,400 Members | 2,145 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,400 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 8893
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

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

Similar topics

6
by: LRW | last post by:
I have no idea if this is more a PHP question or Javascript question, because my problem hinges equally on both. I have a PHP script that queries a database and creates a list of rows for each...
4
by: dekern | last post by:
I have been trying to set the default text value of a TextArea element for about a day now without any luck. Similar to the code used to set the Text field below I would like to use the returned...
4
by: TJS | last post by:
can the rows and columns of a textarea element with an id be changed on the fly ? if so is there an example ?
4
by: Joe | last post by:
I have an xml file which looks similar to this: <data> Please enter the value: <dynamicControl id="myDC", type="Textbox", MaxLength="100"/> </data> I am trying to devise a way to have a web...
6
by: libsfan01 | last post by:
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
1
by: vj | last post by:
How i can populate all fileds dynamically in jsp page based on contents found in xml file? I have written jsp servlets and java class file. i transferred automatic data from jsp to servlet then to...
0
by: vijendra | last post by:
How i can populate all fileds dynamically in jsp page based on contents found in xml file?I have written jsp servlets and java class file. i transferred automatic data from jsp to servlet then to...
0
by: bazm | last post by:
Hi All, I have a project based on WML/WMLScript and PHP (its to download content to mobiles). This is all new to me but I'm working hard! I am having problems trying to set text in the below...
5
tjc0ol
by: tjc0ol | last post by:
Hi all, I made contact page which allows visitors to input their name, email address, phone number, comments and select a comment type by using <select> element in html with javascript. Among the...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

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.