Question

I have a div with text inside:

<div id="test">Some text here to edit</div>

When the users clicks on this it needs to change to:

<form name="input" action="html_form_action.asp" method="get">
Edit: <input type="text" name="tex" value="Some text here to edit"/>
<input type="submit" value="Submit" />
</form> 

How can I make it so when the user clicks on the text in the div, it will transform into an form/input box like above?

Answer 1

Demo

With HTML and jQuery (a JavaScript framework): http://jsfiddle.net/3qHst/1/.

Additional info

jQuery doc: .click(), .hide() and .show().

Code

html:

<div id="test">Some text here to edit</div>

<form name="input" action="html_form_action.asp" method="get" style="display: none;">
    <label for="comment">Edit:</label>
    <input type="text" id="comment" value="Some text here to edit"/>
    <input type="submit" value="Submit" />
</form>

jquery:

$('#test').click(function(){
   $(this).hide();
   $('form').show();
});