How to add html markup into a textarea via checkbox?

Question

HTML

<div class="thumbnail">
  <input type="checkbox" name="thing_5" value="valuable" id="thing_5">
  <label for="thing_5">
    <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/a/ac/U.S._Marines_in_Operation_Allen_Brook_(Vietnam_War)_001.jpg">
  </label>
</div>
<div class="thumbnail">
  <input type="checkbox" name="thing_5" value="valuable" id="thing_6">
  <label for="thing_6">
    <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/a/ac/U.S._Marines_in_Operation_Allen_Brook_(Vietnam_War)_001.jpg">
  </label>
</div>
<textarea id='txtarea'></textarea>

JQuery

$(document).ready(function() {
  $('.thumbnail :checkbox').change(function() {
    var urls = [];
    $(":checkbox:checked").each(function () {
      urls.push($(this).next("label").find("img").attr("src"));
    });
    if (urls.length)
      $("#txtarea").val("<li>" + urls.join("</li><li>") + "</li>");
    else
        $("#txtarea").val("");
  });
});

I need to be able to add <li> before the value and also be able to add/remove on checkbox checked/unchecked

Praveen Kumar Purushothaman · Accepted Answer · 2017-01-02 14:50:02Z

2

Only a small change will make it work in this. You should check for the length of the url before doing anything on the textarea value:

if (urls.length)
  $("#txtarea").val("<li>" + urls.join("</li><li>") + "</li>");
else
  $("#txtarea").val("");

Fiddle: http://jsfiddle.net/u9myz270/

answered Jan 2, 2017 at 14:50

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

Collectives™ on Stack Overflow

How to add html markup into a textarea via checkbox?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related