Jump to content

Welcome to AstaHost - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!

Toggle shoutbox Shoutbox Open the Shoutbox in a popup

@  yordan : (14 April 2014 - 05:28 PM) By The Way, This Could Be An Interesting Subject For A Topic, What About Posting This Question? Let's See If Other People Have The Same Feeling Concerning Bootlists!
@  yordan : (13 April 2014 - 09:36 AM) Boot Order : Cd, [Usb,] Hard Drive :D
@  yordan : (11 April 2014 - 07:23 PM) I Simply Let The Bios Do That
@  Ritesh : (11 April 2014 - 10:23 AM) Is It Possible To Launch Fedora Live Cd Or Installation Disk From Hard Drive On Windows Platform Using Grub Mbr File.
@  Ritesh : (11 April 2014 - 10:21 AM) No U Are Not.. Btw.. I Have Question For You.
@  yordan : (10 April 2014 - 08:02 AM) You Are Partially Right.
I Was Not.
Nevertheless, I Am Again :)
@  Ritesh : (09 April 2014 - 07:33 PM) :P
@  Ritesh : (09 April 2014 - 07:33 PM) I Think U R Not..
@  yordan : (09 April 2014 - 09:28 AM) I'm The Master Of The Shoutbox!
@  yordan : (05 April 2014 - 10:32 PM) He-He
@  Ritesh : (04 April 2014 - 06:59 PM) Ha Ha Ha ....
@  yordan : (04 April 2014 - 11:15 AM) Welcome Back, Starscream!
@  yordan : (03 April 2014 - 02:31 PM) And I Hope That He Will Come Back Soon :)
@  yordan : (01 April 2014 - 02:53 PM) Nice, Ritesh Came, I'm Not Home Alone Today.
@  Ritesh : (01 April 2014 - 08:51 AM) Oh!!! Poor Dear Yordan..
@  yordan : (31 March 2014 - 10:02 AM) I'm A Poor Lonesome Cow-Boy
@  yordan : (27 March 2014 - 02:22 PM) He Is Unpatient Due To His Patients!
@  Ritesh : (27 March 2014 - 10:46 AM) :(
@  Ritesh : (27 March 2014 - 10:46 AM) He Is Busy With His Patients.
@  yordan : (26 March 2014 - 08:12 PM) Ahsani, Where Are You?

- - - - -

Javascript: Text To Texbox And Back To Text

6 replies to this topic

#1 clovis818


    Newbie [ Level 1 ]

  • Members
  • 1 posts

Posted 05 March 2006 - 10:04 PM

i need some help i want to create a thing where when some one double clicks a certain text it changes into a texbox where they can edit the text and the they double click and it changes into the test they just typed in.

I have found this function in javascript that does some of it but i needs to be simplified
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
<title>Span to Text Box - Demo - DOM</title>
<script type="text/javascript">
/* © John Davenport Scheuer */
function exchange(el){
var nodeI=el.parentNode, inputC=document.createElement('input'), text=el.innerHTML;
el.style.font='.9em "ms sans serif", "sans"'
with (inputC){
setAttribute('value', text, 0)
setAttribute('size', text.length-1, 0)
style.width=document.all&&!window.opera? el.offsetWidth-2+'px' : el.offsetWidth+2+'px'
setAttribute('type', 'text', 0)
setAttribute('id', el.id, 0)
nodeI.replaceChild(inputC, el)
<span id="itm1" onclick="exchange(this)">House</span><br>
<span id="itm2" onclick="exchange(this)">SpantoTextBox-Demo</span><br>
<span id="itm3" onclick="exchange(this)">Span to Text Box - Demo exchange(this)</span><br>
<input id="itm4" type="text" value="Existing Text Box"><br>
<span id="itm5" onclick="exchange(this)">In Line Test</span>
<span id="itm6" onclick="exchange(this)">In Line Test Too</span>
<span id="itm7" onclick="exchange(this)">In Line Test Also</span>

If its possible to have it in php or javascript please

Edited by miCRoSCoPiC^eaRthLinG, 06 March 2006 - 08:07 AM.

#2 szupie



  • Members
  • 814 posts
  • Gender:Male

Posted 08 March 2006 - 12:44 AM

I couldn't understand the code you've given, so I couldn't simplify it. Instead, I decided to code it from scratch. Here it is:

<p id="text" onclick="change();">Hello, world. Click me please.</p>
<form onsubmit="return false;">
<input type="hidden" id="textbox" />
<input type="hidden" id="done" onclick="changeBack();" value="Done"/>

<script type="text/javascript">
var textNode = document.getElementById('text');
var textValue = textNode.firstChild.nodeValue;
var textboxNode = document.getElementById('textbox');
var doneButton = document.getElementById('done');

function change() {
  textboxNode.setAttribute('value', textValue);
  textNode.style.display = 'none';
function changeBack() {
  textNode.firstChild.nodeValue = textboxNode.value;
  textNode.style.display = 'block';
  textboxNode.setAttribute('type', 'hidden');

This will do almost exactly what you wanted.
At first, the only thing visible will the paragraph, which contains the text "Hello, world. Click me please.". When it is clicked, the paragraph will become invisible, and the hidden textbox will appear and take its place. Then, you can edit the textbox. I don't think double-clicking can be detected by Javascript, so I made a button that can be pressed when you are done editing. When the button is pressed, the textbox and button disappear and the paragraph reappears. That is basically how the whole script works.

Now I'll explain what each of the lines do.
The first line is the paragraph. The onclick attribute is used to trigger the JavaScript.
The second line is the beginning of the form. The onsubmit attribute is used to stop the form from submitting, therefore reloading the page.
Third and Fourth are the textbox and button. The type="hidden" attribute is to make them invisible. Again, onclick is used to trigger the JavaScript. And finally, the value attribute is to add the text to the button.
java script:
The first 4 lines store different nodes into variables for faster access. Here are what they store, respectively: the paragraph, the text inside the paragraph elememt, the textbox, the button.
In the first function change(): In the first line, the textbox's text will be changed to the same as the paragraph's text. Then in the second line, the paragraph element is hidden from view. In the third, the textbox will change from a hidden input box to a textbox input box. In the fourth line, the button will change from a hidden input to a button input.
In the second function changeBack(): In the first line, the paragraph's text is changed into what you entered in the textbox. In the second, the paragraph is set to display: block, which basically makes it visible. In the third and fourth line, the textbox and button are both set back to hidden inputs again.

I hope you could understand this code. If you have any questions or if you want me to change the code, just reply and tell me.
I didn't know what you mean by "to have it in PHP". PHP can't be used to do interactive things in your browser.

#3 Guest_FeedBacker_*

  • Guests

Posted 07 January 2008 - 11:27 AM

I tried the same code but its not working
Javascript: Text To Texbox And Back To Text

Hi All,

The tried the same code but tis not working.Please assist me


#4 Guest_(G)James_*

  • Guests

Posted 15 May 2009 - 07:37 PM

Showing/hidding a text display areaJavascript: Text To Texbox And Back To Text

How can I write a button that whn pressed will show a text display area in a table cell saying let's say "HELLO" and, then, when pressed again it will cause the display area to disappear?

By the same token, I'd like also to have a button that when pressed will display a picture in a table cell, and when pressed again the picture will disappear.



#5 Guest_(G)onny onny_*

Guest_(G)onny onny_*
  • Guests

Posted 25 November 2009 - 11:31 AM

javascript....input text based on button choiceJavascript: Text To Texbox And Back To Text

I need some help with some buttons...I want that when I press a button,the value to be written in the text area...I just can't seem to get it working...

here's the part where I need help:

<html><head><script type="text/javascript">Function write(x){ document.GetElementById("txt").Value.Write(x);}</script></head><body><input type="text" id="txt" value=""><br><br><input type="button" value="7" onclick="write('7')"><input type="button" value="8" onclick="write('8')"><input type="button" value="9" onclick="write('9')"></body></html>

please help...

-question by onny onny

#6 Guest_(G)Raja_*

  • Guests

Posted 09 January 2010 - 08:47 AM

javascript - dynamic valueJavascript: Text To Texbox And Back To Text

hi friends 

I hav an doubt I use javascript to count the words and pass that count value to textbox using getElementbyId. I want to store that value in variable after that I want to store in dbs. Is it possible?????????

Please anyone help me


<textarea name="myMessage" onkeyup="wordcount(this.Value)" rows="25" cols="62">OM SRI SAIRAM</textarea><script language="JavaScript">Var cnt;Function wordcount(count) {Var words = count.Split(/s/);Cnt = words.Length;Var ele = document.GetElementById('w_count');Ele.Value = cnt/3;}Document.Write("Total Namajapam Entered By You:<input type=text id=w_count size=4 readonly>");


thanksin advance

-reply by Raja

#7 Guest_(G)X2pher_*

  • Guests

Posted 05 July 2010 - 07:59 AM

my code is not working on IE8Javascript: Text To Texbox And Back To Text

function exchange(el){ var nodeI=el.ParentNode;  inputC=document.CreateElement('input'); text=el.InnerHTML; el.Style.Font='.9em "ms sans serif", "sans"'; el.InnerHTML+='x20'; with (inputC){ setAttribute('value', text, 0); setAttribute('size', text.Length-1, 0); style.Width=document.All&&!window.Opera? el.OffsetWidth-0+'px' : el.OffsetWidth+20+'px'; setAttribute('type', 'text', 0); setAttribute('id', el.Id, 0); setAttribute('name', el.Id, 0); }NodeI.ReplaceChild(inputC, el);} 

-question by X2pher


Reply to this topic


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users