admin管理员组

文章数量:1332638

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?

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?

• javascript
• jquery

Share Follow edited Jan 28, 2012 at 17:55 GG. 21.9k1414 gold badges9292 silver badges133133 bronze badges asked Jan 28, 2012 at 15:37 David19801David19801 11.4k2626 gold badges8686 silver badges127127 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Demo

With HTML and jQuery (a JavaScript framework): http://jsfiddle/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="ment">Edit:</label>
    <input type="text" id="ment" value="Some text here to edit"/>
    <input type="submit" value="Submit" />
</form>

jquery:

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

HTML:

<form id='form' name="input" action="html_form_action.asp" method="get">
    <div id="test">Some text here to edit</div>
    <input type="text" name="tex" value="" class="hidden"/>
    <input type="submit" value="Submit" class="hidden" />
</form> 

Javascript:

$('#test').click(function() {
    $('#test').hide();
    $('#form').children('input').show();
    $('#form').children('input[name=tex]').val($('#test').html());
});

CSS:

.hidden { display: none; }
#test { cursor: pointer; }

Try it out: http://jsfiddle/melachel/ymw4Z/

Well, you may be in luck, because there's a jquery plugin to do exactly that. There are actually a few, but I think this is the first one. The others were forks of this project if I'm not mistaken.

http://www.appelsiini/projects/jeditable

It would be somewhat easy to do what you're asking manually, but the jeditable plugin actually connects to a web service that saves the info to a database, which may or may not be what you're looking for.

Let me work on a jsfiddle and see what I can do.

EDIT

I made this jsfiddle - it works on my local machine, but I can't get it to work on my browser in jsfiddle for some reason. But I've been having trouble with jsfiddle recently, I have no idea why.

Anyway, here's the link. Let me know if this doesn't work.

http://jsfiddle/XXbgp/2/

You could also use the html5 contentEditable attribute on the div, which would allow you to make changes to the div inline.

http://blog.whatwg/the-road-to-html-5-contenteditable

本文标签： javascriptChange div to form on clickStack Overflow