Welcome Guest ( Log In | Register )



 
Reply to this topicStart new topic
> Javascript: Text To Texbox And Back To Text
clovis818
post Mar 5 2006, 10:04 PM
Post #1


Newbie [ Level 1 ]
Group Icon

Group: Members
Posts: 1
Joined: 5-March 06
Member No.: 11,759



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
CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<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"'
el.innerHTML+='\x20'
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)
}
</script>
</head>
<body>
<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>
</body>
</html>


If its possible to have it in php or javascript please

This post has been edited by miCRoSCoPiC^eaRthLinG: Mar 6 2006, 08:07 AM
Go to the top of the page
 
+Quote Post
szupie
post Mar 8 2006, 12:44 AM
Post #2


S.P.A.M.S.W.A.T.
Group Icon

Group: Members
Posts: 814
Joined: 22-January 05
From: San Antonio, Texas (No, I'm not dumb. I just moved here...)
Member No.: 2,284



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:

CODE
<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"/>
</form>


<script type="text/javascript">
/*<![CDATA[*/
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';
  textboxNode.setAttribute('type','text');
  doneButton.setAttribute('type','button');
}
function changeBack() {
  textNode.firstChild.nodeValue = textboxNode.value;
  textNode.style.display = 'block';
  textboxNode.setAttribute('type', 'hidden');
  doneButton.setAttribute('type','hidden');
}
/*]]>*/
</script>


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.
HTML:
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.
Go to the top of the page
 
+Quote Post
iGuest
post Jan 7 2008, 11:27 AM
Post #3


Newbie [ Level 1 ]
Group Icon

Group: Members
Posts: 0
Joined: 1-November 07
Member No.: 25,869



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

-jeena
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Getting Screen Resolution using Javascript.(8)
  2. How To Create A Popup Window With Javascript?(19)
  3. javascript vs java(12)
  4. Javascript: Disable Mouse Right-click In Browser(16)
  5. Best Way To Learn Javascript(9)
  6. Dynamicdrive: Good Site For JavaScript Codes(5)
  7. Status Bar Effect(5)
  8. Javascript: Simple Slidedown Menu(2)
  9. JavaScript: Simple Dropdown Menu(1)
  10. Javascript: Browser Detection Script(0)
  11. JavaScript: Hide And Show Any Element With CSS(5)
  12. Ever Needs To Find Out A Table Height Or With With JavaScript(2)
  13. Create And Import JavaScript Modules For A Large Script(2)
  14. Vertical Marquee Using JavaScript(0)
  15. JavaScript Frames & Querystring(4)
  1. Highlight The Active Text Input Fields.(1)
  2. JavaScript Off Redirect Script(2)
  3. I Need Help With Javascript.(7)
  4. Problems With Dynamically Loading Javascript(2)
  5. Add Text To Textarea(6)
  6. Javascript Question(4)
  7. Javascript: How Do I Create Embedded Pop-up Windows?(7)
  8. Vertical Text(1)
  9. Problem With Javascript Alert();(9)
  10. Include Function For Javascript(7)
  11. Fun With Javascript And Forms(2)
  12. Javascript Help Needed : Alert(z) Works Fine But Document.write Not(2)
  13. Javascript Changes Aren't Working.(6)


 



- Lo-Fi Version Time is now: 8th October 2008 - 03:52 AM