How to add remove a set of comma separated values in an input?

Question

HTML

<div class="wrap_temi">
    <ul class="list-inline list-unstyled">
        <li class="list-inline-item">
            <input type="checkbox" value="amici" autocomplete="off">  Amici
        </li>
        <li class="list-inline-item">
            <input type="checkbox" value="bacio" autocomplete="off">  Bacio
        </li>
    </ul>
</div>

<input name="usp-tags" id="usp-tags" type="text" value="" data-required="true" required="required" maxlength="999999" placeholder="inserisci uno o più tag..." class="usp-input usp-input-tags form-control" autocomplete="off">

I need to be able to add/remove tags in the input as per amici, bacio

I tried to use .map() but I'm not familiar with it or following this answer but I am not sure how to apply it to my case.

@epascarello yes please and also to be able to remove them, comma separated, remembering we shouldn't end up with a single comma at the last — rob.m, Dec 06 '18 at 14:00
so onchange of the checkbox loop over them and append to an array if checked and join() — epascarello, Dec 06 '18 at 14:01
I recommend using [Tagify](https://github.com/yairEO/tagify) for this — vsync, Dec 06 '18 at 14:41

score 0 · Answer 1 · answered Dec 06 '18 at 14:08

Here is a way of retrieving the value using map.

Use :checked to get back the selected options:-

$('.wrap_temi [type="checkbox"]').change(function(){

  var tags = $('.wrap_temi [type="checkbox"]:checked')
  .toArray()
  .map(x => x.value)
  .join(', ');
  
  $('#usp-tags').val(tags);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrap_temi">
    <ul class="list-inline list-unstyled">
        <li class="list-inline-item">
            <input type="checkbox" value="amici" autocomplete="off">  Amici
        </li>
        <li class="list-inline-item">
            <input type="checkbox" value="bacio" autocomplete="off">  Bacio
        </li>
    </ul>
</div>

<input name="usp-tags" id="usp-tags" type="text" value="" data-required="true" required="required" maxlength="999999" placeholder="inserisci uno o più tag..." class="usp-input usp-input-tags form-control" autocomplete="off">

Hamzeen Hameem · Accepted Answer · 2018-12-06T14:35:34.383

Hope this is what you're looking for:

$(document).ready(function() {

  $('input:checkbox').on('change', function() {

    var tags = $('input:checkbox:checked')
    .map(function() {
      return $(this).val();
    }).get().join(', ');

    $("#usp-tags").val(tags);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap_temi">
    <ul class="list-inline list-unstyled">
        <li class="list-inline-item">
            <input type="checkbox" value="amici" autocomplete="off">  Amici
        </li>
        <li class="list-inline-item">
            <input type="checkbox" value="bacio" autocomplete="off">  Bacio
        </li>
    </ul>
</div>

<input name="usp-tags" id="usp-tags" type="text" value="" data-required="true" required="required" maxlength="999999" placeholder="inserisci uno o più tag..." class="usp-input usp-input-tags form-control" autocomplete="off">

How to add remove a set of comma separated values in an input?

2 Answers2