Jquery: Toggle between input and text on click

Question

I need to toggle between input and text on click. Something like live edit.

I wrote this code, but it doesn't work.

HTML:

<span class="editInput">Change the value on click</span>
<button>Click me</button>

JS:

var editmode = false;

$('button').on('click',function(){
    if(editmode){    
        $('.editInput').replaceWith(function(){
           return '<span class='+this.className+'>'+this.value+'</span>';
           editmode = false;
        })
    }else {
        $('.editInput').replaceWith(function(){
           return '<input type="text" value='+this.text+' class='+this.className+'/>';
           editmode = true;
        })    
    }

})

Can someone help me?

Instead of replacing them, why don't you put both in the DOM, and just hide one or the other. — Barmar
– Barmar, Commented Jun 23, 2014 at 23:51
If your app can be HTML5, you can use the contenteditable attribute : html5doctor.com/the-contenteditable-attribute — Christian Bonato
– Christian Bonato, Commented Jun 23, 2014 at 23:55

beard · Accepted Answer · 2016-11-23 00:35:24Z

2

Check out this Fiddle. It's not very elegant, but I think it's a quick, cleaner solution than what you were doing. Let me know if you have any more questions.

<div>
    <input/>
    <span>test</span>
</div>
<button>Update</button>

span {
    display:none;
}

$('button').on('click',function(){
    if($("input").is(":visible")) {  
        $("input").hide();
        $("span").text(
            $("input").val()
        ).show();
        $("button").text("Edit");
    } else {
        $("span").hide();
        $("input").text(
            $("span").val()
        ).show();
        $("button").text("Update");
    }
});

edited Nov 23, 2016 at 0:35

beard

911 gold badge2 silver badges13 bronze badges

answered Jun 24, 2014 at 0:07

joshboley

1,1536 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rista404 Over a year ago

Thanks @joshboley! It works! And only one thing, it needs to show the span first, and then to show the input on click. I just hid the input in the css, and wrote the same value in the input.

joshboley Over a year ago

Yeah, that should work just fine. Glad I could help!

Barmar · Accepted Answer · 2014-06-24 00:02:21Z

First, this.text should be this.innerText or $(this).text().

Second, you need quotes around the value attribute in the <input> tag, or it won't work with multiple words in the value. It would be even better to use the object form of the jQuery element constructor, so that quotes in the value don't cause a problem, either.

Third, the assignment to editmode needs to be outside the replaceWith function. It's after the return statement, so it's never being executed.

Final result:

var editmode = false;

$('button').on('click', function () {
    if (editmode) {
        $('.editInput').replaceWith(function () {
            return $("<span>", {
                "class": this.className,
                text: this.value
            });
        });
        editmode = false;
    } else {
        $('.editInput').replaceWith(function () {
            return $("<input>", {
                value: this.innerText,
                    "class": this.className
            });
        });
        editmode = true;
    }

});

FIDDLE

Collectives™ on Stack Overflow

Jquery: Toggle between input and text on click

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related