I need to pass values that are in <li> to <input type="hidden"> , I have a list and the elements that have been selected will go to input (each to a input ).
The problem I'm having is that when I select more than 1 li my function only creates 1 input with all the values selected inside, and in fact I have to pass the values to another page in the form of a array .
With help I got to 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><scriptsrc="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>