1

I have a textarea that I would like to be either disabled or readonly. I use buttons on my site to append text to that textarea to take notes. The purpose of not allowing edits is so that no one can accidentally change any notes.

Now, if someone does need to change a note they already submitted I would like s/he to be able to edit the textarea and re-lock it for editing.

HTML:

<p><a id="append">Append</a> | <a id="lock">Lock</a> or <a id="unlock">Unlock</a></p>
<p><textarea id="notes" readonly="true" rows=10></textarea></p>

jQuery:

$("a#append").click(function() {
    $("textarea#notes").append("- This is a note.\n");
});
$("a#unlock").click(function() {
    $("textarea#notes").removeAttr("readonly");
});
$("a#lock").click(function() {
    $("textarea#notes").attr("readonly", "readonly");
});

http://jsfiddle.net/ljpaul/bakcwtaf/

Issue: when re-locking the textarea (either with readonly or disabled attribute), when I click to append another note it does not show up. Weirdly, it does show up in the HTML code, it just does not display. Does anyone have any suggestions to fix this/make it work? I feel like I have tried almost every combination of attributes and ways of setting said attributes!

Edit: a user would unlock the field to either make an edit to a note or delete a note. So when unlocked, and making any sort of edit to the contents, is when the issue occurs.

fiddlestacks
  • 109
  • 1
  • 10
  • Intriguingly it works fine, (append -> unlock -> append -> lock -> append, etc) so long as the user makes no 'manual' edits while the element is 'unlocked'. – David Thomas Oct 29 '14 at 03:44
  • I forgot to specify that part. The user would only unlock the textarea to make manual edits if, per say, something amiss happened or a note needed to be deleted. – fiddlestacks Oct 29 '14 at 03:48
  • I understood that, as implicit in the question; but while I'm intrigued I honestly have no idea what could be causing it. – David Thomas Oct 29 '14 at 03:50
  • Yeah - it has been stumping me for a few days now! Thanks for taking a look! – fiddlestacks Oct 29 '14 at 03:51

1 Answers1

0

Looks like all it took was getting away from the .append() function.

$("textarea#notes").val($("textarea#notes").val() + "- This is a note.\n");

That does the trick and allows for editing. I think it might have something to do with append targeting the HTML structure instead of editing the actual value. Really weird.

fiddlestacks
  • 109
  • 1
  • 10