Editable text functionality using jQuery

Question

I have an image button and when I click it I want an specific field to go from text to an editable textfield, kinda like a dynamic edit button.

So I have the plain text with certain id (ie. id="text1") and when I click the button, the text changes to an editable field, maybe something like $("#text1").hide(); and then $("#field1").show(); but in between I need to give the field the value of the text, and then when I click the button save I should hide the input field and just show the text with the new value.

Any help will be greatly appreciated.

Thanks :D

Answer 1

Not too bad. The text goes into the value area of the text field. So get it from the text area, save it in a temp variable, and put it in the textfield.

Actually, you don't even need the temp I don't think, it should look something like

$('#field1').val($('#text1').text)

Note this is untested. You might find this SO article to be of value as well.