How to replace text in element from textarea with jQuery

Question

I have some element with some data. I need to create changing field for it. So i use textarea to change text in this element. Everything working nice but when i want to add condtion with text langht something is not working right... This is my code and some fiddle (http://jsfiddle.net/qzzKA/) for it. Thx for help...

<div class="textchange_box">
    <span class="desc">data<br>data
    </span>
    <textarea name="desc" class="textfield"></textarea>
    <span class="change">change</span>
    <span class="save">save</span>
</div>

and jquery:

$(".change").live('click', function () {
    $(this).prev('.textfield').css('display','block');
    $(this).prevAll('.desc').css('display','none');
    $(this).next('.save').css('display','block');
    $(this).css('display','none');
});
$(".save").live('click', function () {
    var default_value = $(this).prev('.desc').text().replace(/\r\n|\r|\n/g,"<br/>");
    var actual_value = $(this).prev('.textfield').text().replace(/\r\n|\r|\n/g,"<br />");
    $(this).prevAll('.textfield').css('display','none');
    $(this).prev('.change').css('display','block');
    $(this).css('display','none');
    if (actual_value.length < 0) {
        $(this).prev('.desc').replaceWith('<span class="desc">' + default_value +'</span>');
    }
    else if (actual_value.length > 0) {
        $(this).prev('.desc').replaceWith('<span class="desc">' + actual_value +'</span>');
    }
});

Not related to your question, but note that using spans as links is an accessibility failure because they won't work for users who don't or can't use a mouse or other pointing device. — nnnnnn
– nnnnnn, Commented Nov 22, 2012 at 11:33

Nelson Benítez León · Accepted Answer · 2012-11-22 12:04:27Z

3

Replace your following line:

if (actual_value.length < 0) {

for this one:

if (actual_value.length <= 0) {

because when a string is empty its length is zero not a negative number.

UPDATE:
You have other errors, your following two lines:

var default_value = $(this).prev('.desc').text().replace(/\r\n|\r|\n/g,"<br/>");
var actual_value = $(this).prev('.textfield').text().replace(/\r\n|\r|\n/g,"<br />");

should be like this:

var default_value = $(this).prevAll('.desc').text().replace(/\r\n|\r|\n/g,"<br/>");
var actual_value = $(this).prevAll('.textfield').val().replace(/\r\n|\r|\n/g,"<br />");

So using prevAll() instead of prev() and using val() for textarea instead of text() .

Also you need to use prevAll() here:

$(this).prev('.desc').replaceWith('<span class="desc">' + actual_value +'</span>');

so it would be:

$(this).prevAll('.desc').replaceWith('<span class="desc">' + actual_value +'</span>');

See working fiddle .

Basically the most common error is you thought .prev() will traverse all previous siblings, while for that you have to use prevAll()

edited Nov 22, 2012 at 12:04

answered Nov 22, 2012 at 11:33

Nelson Benítez León

51.1k8 gold badges70 silver badges84 bronze badges

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

4 Comments

nnnnnn Over a year ago

Or even === 0, since it can't be negative.

Lukas Over a year ago

This does not change anything

Nelson Benítez León Over a year ago

I deeper looked at your fiddle and catch some more errors, I've updated my answer with them and also posted a working fiddle, check it out :-)

Lukas Over a year ago

lovely, thx man it work perfect, but i have problem with break lines, they return to one line when i'm editing them...

Collectives™ on Stack Overflow

How to replace text in element from textarea with jQuery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related