Editable Text Functions Using jQuery

Question

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

So, I have plain text with a specific 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 between them I need to specify text value field, and then when I click save, I have to hide the input field and just show the text with the new value.

Any help would be greatly appreciated.

Thanks: D

Answer 1

For the input field, paragraph with id="text1"and 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 is an example .

Just for fun, I wrote a small script that allows you to use functions <editable>for paragraphs. Just add a class .editableto any paragraph, and jQuery will take care of the rest. I did not expand it to allow a few changes, and I almost started writing AJAX calls that are stored in the database because I'm bored. But , as the sun shines, I thought I'd better go to the beach. Here is my code and 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

ID, POST , .

Answer 2

. . , temp .

, , :

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

, . SO, .

Answer 3

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

Run codeHide result