Send li value to input type Hidden

Asked

Viewed 184 times

2

I need to pass on the values that are in a <li> for a <input type="hidden"> , I have a list and the elements that have been selected will go to a input (each to one input).

The problem I’m having is that when I select more than 1 li my function creates only 1 input with all values selected inside, and in fact I have to pass the values to another page in the form of a array.

With help I managed to reach this code below:

    $(document).ready(function() {
      //dual list

      $('#servidores').on('click', '.list-group .list-group-item', function() {
        $(this).toggleClass('active');
      });
      $('.list-arrows button').click(function() {
        $('<input/>', {
          type: 'hidden',
          name: 'selecao[]',
          value: $('.list-group .active').text()
        }).appendTo('#servSel');
        var $button = $(this),
          actives = '';
        if ($button.hasClass('move-left')) {
          actives = $('.list-right ul li.active');
          actives.clone().appendTo('.list-left ul');
          actives.remove();
        } else if ($button.hasClass('move-right')) {
          actives = $('.list-left ul li.active');
          actives.clone().appendTo('.list-right ul');
          actives.remove();
        }
      });
      $('.dual-list .selector').click(function() {
        var $checkBox = $(this);
        if (!$checkBox.hasClass('selected')) {
          $checkBox.addClass('selected').closest('.well').find('ul li:not(.active)').addClass('active');
          $checkBox.children('i').removeClass('glyphicon-unchecked').addClass('glyphicon-check');
        } else {
          $checkBox.removeClass('selected').closest('.well').find('ul li.active').removeClass('active');
          $checkBox.children('i').removeClass('glyphicon-check').addClass('glyphicon-unchecked');
        }
      });
      $('[name="SearchDualList"]').keyup(function(e) {
        var code = e.keyCode || e.which;
        if (code == '9')
          return;
        if (code == '27')
          $(this).val(null);
        var $rows = $(this).closest('.dual-list').find('.list-group li');
        var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
        $rows.show().filter(function() {
          var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
          return !~text.indexOf(val);
        }).hide();
      });
      //dual list
    });
        .dual-list .list-group {
          margin-top: 8px;
        }
        .list-left li,
        .list-right li {
          cursor: pointer;
        }
        .list-arrows {
          padding-top: 100px;
        }
        .list-arrows button {
          margin-bottom: 20px;
        }
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div role="tabpanel" class="tab-pane" id="servidores">
  <br>
  <div class="form-group">
    <div class="col-md-12 center-block">


      <div class="clearfix"></div>

      <!-- dual list -->
      <div class="row ">
        <div class="col-md-5">
          <div class="col-md-12">
            <br>
            <label class="pull-left">Servidores Cadastrados:</label>
          </div>
          <div class="dual-list list-left col-md-12">
            <br>
            <div class="well text-right">
              <div class="row">
                <div class="col-md-9">
                  <div class="input-group">
                    <span class="input-group-addon glyphicon glyphicon-search"></span>
                    <input type="text" name="SearchDualList" class="form-control" placeholder="procurar..." />
                  </div>
                </div>
                <div class="col-md-1">
                  <div class="btn-group">
                    <a class="btn btn-default selector" title="Selecionar todos"><i class="glyphicon glyphicon-unchecked"></i></a>
                  </div>
                </div>
              </div>
              <ul class="list-group">
                <!-- BEGIN BLOCK_SERVIDORES -->
                <li class="list-group-item">exemplo 1
                  <br>
                </li>
                <li class="list-group-item">exemplo 2
                  <br>
                </li>
                <li class="list-group-item">exemplo 3
                  <br>
                </li>
                <li class="list-group-item">exemplo 4
                  <br>
                </li>
                <!-- END BLOCK_SERVIDORES -->
              </ul>
            </div>
          </div>
        </div>
        <div class="list-arrows col-md-2 text-center">
          <button type="button" class="btn btn-default btn-sm move-left">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </button>

          <button type="button" class="btn btn-default btn-sm move-right">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </button>
        </div>
        <div class="col-md-5">
          <div class="col-md-12">
            <br>
            <label class="pull-left">Servidores Selecionados:</label>
          </div>
          <div class="dual-list list-right col-md-12">
            <br>
            <div class="well">
              <div class="row">
                <div class="col-md-2">
                  <div class="btn-group">
                    <a class="btn btn-default selector" title="Selecionar todos"><i class="glyphicon glyphicon-unchecked"></i></a>
                  </div>
                </div>
                <div class="col-md-9">
                  <div class="input-group">
                    <input type="text" name="SearchDualList" class="form-control" placeholder="procurar..." />
                    <span class="input-group-addon glyphicon glyphicon-search"></span>
                  </div>
                </div>
              </div>
              <ul class="list-group">
                <div id="servSel"></div>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- Dual list -->
      <div class="col-md-12"><span class="help-block">Escolha os servidores designados para esta inspeção.</span>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-md-12 text-right">
      <a id="remover_competenciaInspecao" href="#" title="Remover competência selecionado" class="btn btn-sm btn-danger remover_texto"><i class="fa fa-trash-o"></i> Remover</a>
      <a id="salvar_competenciaInspecao" title="Salvar esta competência legal atribuindo a um existente ou criar um novo" href="#" class="btn btn-success btn-sm salvar_texto"><i class="fa fa-save"></i> Salvar</a>
    </div>
  </div>
</div>

1 answer

3


You are creating the input in the click, you should be checking the click how many elements were selected and created a input for each of those elements.

To create a <input type="hidden">for each selected element we will use the .each() of jQuery

$('.list-arrows button').click(function() {
    $('.list-group .active').each(function(){
        $('<input/>', {
            type: 'hidden',
            name: 'selecao[]',
            value: $(this).text()
        }).appendTo('#servSel');
        var $button = $(this),
        actives = '';
        if ($button.hasClass('move-left')) {
            actives = $('.list-right ul li.active');
            actives.clone().appendTo('.list-left ul');
            actives.remove();
        } else if ($button.hasClass('move-right')) {
            actives = $('.list-left ul li.active');
            actives.clone().appendTo('.list-right ul');
            actives.remove();
        }
    });
});

Browser other questions tagged

You are not signed in. Login or sign up in order to post.