Editable text functionality using jQuery

I have an image button and when I click it I 开发者_如何学JAVAwant 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

Given an input field, a paragraph with id="text1" and a button.

<input type="text" />
<p id="text1">Lorizzle ipsizzle dolizzle sit amizzle, consectetuer adipiscing yo mamma.</p>
<button>Copy</button>

This simple jQuery will copy the text from the paragraph, hide it and show the input with the text from the paragraph.

$("button").click(function() {
   $("input").val(
       $("#text1").hide().text()
   ).show();
});

Here's a sample.

Just for fun, I've written a small script that enables <editable> functionality for paragraphs. Just add a class of .editable to any paragraph and jQuery takes care of the rest. I haven't extended it to allow multiple edits and I almost started writing AJAX calls that save to the database because I'm bored. But since the sun is shining I thought I'd rather go to the beach. Here's my code and a sample.

$(".editable").each(function(i) {
    var $this = $(this);
    $this.attr("id", "orig-" + i);

    var $edit = $("<button />")
    .text("edit")
    .attr("id", "update-" + i)
    .click(function() {
        var $input = $('<input type="text" />')
            .attr("id", "edit" + i)
            .val($this.text());

        var $save = $('<button>Save</button>')
            .click(function() {
                var $new = $("<p />").text($input.val());
                $input.replaceWith($new);
                $(this).hide();
            });
        $(this).replaceWith($save);

        $this.replaceWith($input);
    });

   $(this).after($edit)
});

SAMPLE

You really don't need all the ID's but if you're gonna do a POST with new values, you can easily refer to the elements.

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.

$(document).ready(function(){

    $('#mod').click(function(){

    $('#text1').html('<input id="no" size="'+$(this).text().length+'" type="text" value="'+ $('#text1').text() + '">');
      
    $('#mod').hide();

    $('#sav').show();

    });

    $('#sav').click(function(){
						     
    // here code to save data in database

    });   
    });    
 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <td id="text1"> text </td>
    <input type="button" id="mod" name="modify"  value="modify" />
    <input type="submit" name="submit" id="sav" value="save" />
    </table>