473,473 Members | 1,768 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

making a noneditable (label) field to a editable text using javascript and dom

8 New Member
hi,
have set of form fields(label) and button edit, onclick of the edit button , the text in the label fields should be displayed in textbox, how to do this using javascript and DOM. can somebody help me on this..?
thanks
Sep 23 '07 #1
13 9409
pbmods
5,821 Recognized Expert Expert
Heya, Kath. Welcome to TSDN!

Changed thread title to better describe the problem (did you know that threads whose titles do not follow the Posting Guidelines actually get FEWER responses?).
Sep 23 '07 #2
acoder
16,027 Recognized Expert Moderator MVP
Show your code so far, so that we can work with that.
Sep 23 '07 #3
acoder
16,027 Recognized Expert Moderator MVP
Merged threads - please do not double post.
Sep 23 '07 #4
kath11
8 New Member
'm quite new to javascript and dom, i know that i can access the tag element using document.getElementByTagName("p"), other than that, 'm not sure how to make that content available in textbox, need some idea on that..
Sep 23 '07 #5
gits
5,390 Recognized Expert Moderator Expert
hi ...

please post the code you have tried so far. the idea is to read the innerHTML of the labels you hav and put them into textboxes ... that you already have on your page or you may create them dynamically ... so what solution would you prefer?

kind regards
Sep 24 '07 #6
kath11
8 New Member
hi ...

please post the code you have tried so far. the idea is to read the innerHTML of the labels you hav and put them into textboxes ... that you already have on your page or you may create them dynamically ... so what solution would you prefer?

kind regards
this is the code i have written, i have almost got the o/p, except that when i click the button again, the text is not apprearing in the textbox,
[HTML]<html>
<head>
<script type="text/javascript">
function change( elementId )
{

var el = document.getElementById( elementId );
var parent = el.parentNode;

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

parent.innerHTML ='<p id="' + el.id + '" />' + el.value + '</p>' ;

}
else
{
parent.innerHTML ='<input type="text" id="' + el.id + '" value="' + el.value + '" />';

}

el = null;
}
</script>
</head>

<body>

<div>
<input type="text" id="test" size="20" />
</div>
<input type="button" value="change" onclick="change('test');" />
</body>
</html>[/HTML]

can somebody tell me , how to proceed, i want the button to act as a toggle
Sep 25 '07 #7
acoder
16,027 Recognized Expert Moderator MVP
The p tag does not have a value attribute, so use el.innerHTML instead when creating the string for the text object.
Sep 25 '07 #8
kath11
8 New Member
The p tag does not have a value attribute, so use el.innerHTML instead when creating the string for the text object.
thnx, but wat if i have a set of text boxes say 4 inside the div tag, can the prog work fine or do i pass the div id in the submit ?
Sep 25 '07 #9
acoder
16,027 Recognized Expert Moderator MVP
thnx, but wat if i have a set of text boxes say 4 inside the div tag, can the prog work fine or do i pass the div id in the submit ?
Do you want to interchange all 4 into labels/text boxes or just the one? If you're going to submit the data, you're going to need text boxes. The p tag values won't pass through.
Sep 25 '07 #10
kath11
8 New Member
Do you want to interchange all 4 into labels/text boxes or just the one? If you're going to submit the data, you're going to need text boxes. The p tag values won't pass through.
i want 4 text boxes with some data and if click the submit button, it should change to label containing the data and if i click the button again, it should change to textbox(with data)
Sep 25 '07 #11
acoder
16,027 Recognized Expert Moderator MVP
i want 4 text boxes with some data and if click the submit button, it should change to label containing the data and if i click the button again, it should change to textbox(with data)
Oh right, by 'submit' you just mean a normal button. Do you want a button for each text box or one button for all 4 text boxes?
Sep 25 '07 #12
kath11
8 New Member
Oh right, by 'submit' you just mean a normal button. Do you want a button for each text box or one button for all 4 text boxes?
yes a normal button, a common button for all the text boxes. Can it be done using the DOM objects?
Sep 29 '07 #13
acoder
16,027 Recognized Expert Moderator MVP
To make this easier, create four text boxes and four P elements. Hide the P elements by setting the display property to "none". Then in the toggle function, just show and hide the text boxes and 'labels' by setting the style.display property to "block" and "none". You can't use parentNode and set its innerHTML because that would overwrite everything in the div. Give each text box and P element a unique id and access them using document.getElementById.
Sep 29 '07 #14

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

Similar topics

4
by: Mikko | last post by:
Is it possible to read "label" from form-field? <label for="product1">bread</label> <input id="product1" name="product1" type="text" size="3"> number comes with $_GET; but how do I read the...
4
by: MT | last post by:
Hi all, this sounds like an easy enough thing to do, but after spending 45 minutes searching google and various javascript sites I can't find out how to make a textfield (textbox or whatever you...
4
by: Stephan Bour | last post by:
Hi, I have a datagrid databound to a SQL query. I'd like to allow editing of some columns but not all. Is there a way to turn off the conversion of the datagrid cells to textboxes for some columns...
1
by: Venki | last post by:
I have a textbox to enter an email address followed by a telephone textbox. The email has a regularexpressionvalidator and a requiredfieldvalidator. The ReqField works fine, but if I put in an...
2
by: tshad | last post by:
Is there another way to put labels on a page other than asp:label? I have been building a page where I use a label to display the calculated result of some imput. I do it using Javascript. But...
7
by: Benton | last post by:
Hi there, I have a text box which will receive its value from a pop-up date picker. The user should not be able to edit this field with the keyboard or mouse. I am using ASP.NET. If I set the...
4
by: biswaranjan.rath | last post by:
Hi, I've few checkboxes in different rows. After selecting appropriate values, the user should click a button. I wanted to convert those checkbox values to non-editable(or non-editable...
1
by: planetthoughtful | last post by:
Hi All, I have a web page that presents records in a table, with one row per record. I'd like to put an edit button next to each record, such that if a user clicks on the edit button next to...
1
by: cyningeston | last post by:
OS: WinXP Pro, VB/ASP/ADO.NET I'm building a web-based supplier management application. For each supplier we are required by the FDA to track certain documents. I've managed to pull them from...
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
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
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...
1
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,...
1
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...
0
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
0
muto222
php
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.