Clearing textarea append()

Question

I'm trying to draw rectangles and capture the coordinates in a textarea. A button is provided to clear the textarea.

Problem 1: The textarea is not cleared (deleted text is still there the next time the textarea is updated).

$("#clearoutput").click(function (e) {
    $("#output").empty();
});

I tried .val("") but that only seems to clear the textarea form. The text is still visible in the html source. Plus it stays cleared, won't allow new entries.

Problem 2: I'm not sure how append works. If I don't put .empty() on mousedown (ie. start of new drawing), it will append the entire textarea instead of appending the last line. Why is that?

For the code and instructions to reproduce problem 1 see http://jsfiddle.net/dpqm77b7/ (code is adapted from jQuery drag and draw)

Thanks!

@AnoopJoshi Your fiddle is the closest so far, but I wanted to keep the coordinates from the first two rectangles. Your demo only shows 1 line in the textarea. I'll take a closer look at your code. — woodduck, Sep 17 '15 at 13:24
BTW, I forgot to mention. The clear button is not supposed to clear the drawings, only the textarea. In my actual code I have a separate mechanism to remove the selection-box elements. — woodduck, Sep 17 '15 at 13:30

score 2 · Accepted Answer · edited Sep 17 '15 at 14:49

2

You have several bugs in your code.

1 - You have a event listener which applied multiple times. You have to add .off("mousemove") and .off("mouseup") on your container.

2 - Input fields doesn't have DOM childs. So you can't append a DOM element in your input. You can use .val() instead of .append() for input elements.

3 - Your clear buttons works clearing textarea but not draws. So i stored draws information into an array. After clearing you can access old drawing infomations.

You can see this fiddle working perfectly.

http://jsfiddle.net/ebilgin/dpqm77b7/5/

(woodduck added 1 line (as per comment) to make it work as desired: http://jsfiddle.net/df2te8oy/)

edited Sep 17 '15 at 14:49

woodduck

339
2
12

answered Sep 17 '15 at 12:05

ebilgin

1,242
10
19

Thanks for the comments. I will read them carefully. In the meantime, I just tried the fiddle, but i don't see a change in the behaviour. The text created pre-clearing is still present post-clearing. – woodduck Sep 17 '15 at 13:18
I don't want to clear the draws, just the textarea. Do I still need the array? In order to clear the textarea, I tried outputs=[]; in the clearoutput function (after line 8 in your fiddle) and that seems to work. So the array idea does work. – woodduck Sep 17 '15 at 13:57
Using array only for old draws information storing. You don't use, if you don't want. – ebilgin Sep 17 '15 at 14:56

Milind Anantwar · Answer 2 · 2015-09-17T12:04:13.513

1

Problem 1: the reason .val('') is using as you are appending the content to textarea rather that setting it. to set content empty in textboxes/textareas use

$("#clearoutput").click(function (e) {
  $("#output").val('');
});

Problem 2:

You should rather use .val() to get/set/modify textarea contents

$("#output").val(function(i,oldval){
  return !oldval.length ? os :oldval+ "\n" + os;
});

Working Demo

edited Sep 17 '15 at 12:04

answered Sep 17 '15 at 11:58

Milind Anantwar

81,290
25
94
125

I tried that (or something along those lines) but I didn't see a difference with using append. In your workign demo, lines are duplicated which is not what I want. – woodduck Sep 17 '15 at 13:21

Clearing textarea append()

2 Answers2