I have a simple layout with a textblock and one <a>, like:

text1 edit

When I click on the <a>, I want this textblock to bee text input. How is that possible with jQuery?

I have a simple layout with a textblock and one <a>, like:

text1 edit

When I click on the <a>, I want this textblock to bee text input. How is that possible with jQuery?

• javascript
• jquery

Share Improve this question Follow edited Oct 14, 2011 at 10:34 Peter-Paul van Gemerden 7,0093232 silver badges3737 bronze badges asked Oct 14, 2011 at 8:41 Ilya SmaginIlya Smagin 6,1521111 gold badges4242 silver badges5757 bronze badges 2

• I have answered a similar question, take a look to: stackoverflow./a/28360984/442883 – rsa Commented Feb 6, 2015 at 7:57
• I have answered a similar question, take a look to: stackoverflow./a/28360984/442883 – rsa Commented Feb 6, 2015 at 7:58

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Use jQuery replaceWith():

$(document).ready(function(){
    $("a").click(function(e){
        e.preventDefault();
        $(this).parent().replaceWith("<input />");
    });
});

http://jsfiddle/Dqkyg/1/

---

Furthermore, you can fill the textbox with the text outside the link like so:

$(document).ready(function(){
    $("a").click(function(e){
        e.preventDefault();
        var txt = $(".text").html();
        $(".text").replaceWith("<input value='" + txt + "' />");
    });
});

http://jsfiddle/Dqkyg/5/

---

The following will replace the edit with Save & Cancel options:

<div>
    <span class="text">testing</span> <a href='#'>test</a>
</div>

$(document).ready(function(){
    $("a").click(function(e){
        e.preventDefault();
        var txt = $(".text").html();
        $(".text").replaceWith("<input value='" + txt + "' />");
        $(this).replaceWith("<a href='#'>Save</a> | <a href='#'>Cancel</a>");
    });
});

http://jsfiddle/Dqkyg/6/

There are plenty of plugins that you can use... No need to reinvent the wheel

http://www.appelsiini/projects/jeditable

Hmm ... ur a bit unclear... but http://jsfiddle/mMYrf/4/

<div class="dataGrid">
    <span>test</span>
    <a href="#">edit</a>
</div>

And

$('.dataGrid a').click( function(e) {
        e.preventDefault();

        var EditGrid = $(this).parent().children('span');
        var DataTxt = EditGrid.text();
        var InputHtml = '<input type=text" value="'+DataTxt +'" />';

        $(this).text('Save?');
        EditGrid.html(InputHtml);
});

<div class="editable">This is the content.</div>
<script type="text/javascript">
    $(function() {
        $('.editable').each(function() {
            var a = $('<a href="#">edit</a>');
            (function(link, parent) {
                link.click(function() {
                    link.remove();
                    var textField = $('<textarea/>').val(parent.html());
                    parent.replaceWith(textField);
                    delete parent, link;
                });
            })(a, $(this));
            $(this).append(" ").append(a);
        });
    });
</script>

Working example: http://jsfiddle/BnH29/