CODEWITHSUNDEEP
javascriptjquery
David19801
David19801

Reputation: 11448

Change div to form on click

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?

Upvotes: 2

Views: 6304

Answers (4)

Jeremy Miller
Jeremy Miller

Reputation: 383

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.net/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.net/XXbgp/2/

Upvotes: 1

GG.
GG.

Reputation: 21844

Demo

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

Additional info

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

Code

:

<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>

:

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

Upvotes: 4

StefanoP
StefanoP

Reputation: 3898

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.net/melachel/ymw4Z/

Upvotes: 1

Mad Man Moon
Mad Man Moon

Reputation: 739

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.org/the-road-to-html-5-contenteditable

Upvotes: 0

Related Questions