5

Cenário teste

function addReg(){

	var reg = $('#registro').clone().removeAttr('id');
	reg.children('label').remove();
	$('#formX').append(reg);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
	
	<div class="row">
		<form id="formX" method="get" action="kk.php">
			<div id="registro" class="form-row">
				<div class="form-group mr-2">
					<label for="origem">Origem</label>
					<select id="origem" class="form-control" tabindex="-1" name="origem">
						<option selected>Selecione...</option>
						<option>Item 1</option>
						<option>Item 2</option>
						<option>Item 3</option>
					</select>
				</div>
				<div class="form-group mr-2">
					<label for="destino">Destino</label>
					<select id="destino" class="form-control" tabindex="-1" name="destino">
						<option selected>Selecione...</option>
						<option>Item 1</option>
						<option>Item 2</option>
						<option>Item 3</option>
					</select>
				</div>
				<div class="form-group mr-2">
					<label for="item">Item</label>
					<select id="item" class="form-control" tabindex="-1" name="item">
						<option selected>Selecione...</option>
						<option>Item 1</option>
						<option>Item 2</option>
						<option>Item 3</option>
					</select>
				</div>
				<div class="form-group mr-2">
					<label for="hora">Hora</label>
					<input id="hora" type="time" class="form-control" name="hora">
				</div>
				<div class="form-group col-md-1">
					<div class="form-check form-check-inline" style="padding-top: 40px;">
						<input class="form-check-input" type="checkbox" id="bf" value="bf" tabindex="-1">
						<label class="form-check-label" for="bf"><b>BF</b></label>
					</div>
				</div>
			</div>
		</form>
	</div>
	<div class="row">
		<button form="formX" type="submit" class="btn btn-primary mr-3" tabindex="-1">Salvar</button>
		<button class="btn btn-info" onclick="addReg()" tabindex="-1">+</button>
	</div>

</div>


Problemas

Quando faço o clone, ele não traz os valores dos elementos select.

Também, mantém os elementos label, claro, porque estou copiando tudo. Já tentei remover mas não consegui.

add


Dúvidas

  • Como faço para manter o valor selecionado dos elementos select?
  • Como faço para clonar sempre o "último clone"? (removo o id do anterior e adiciono no clonado?)
  • Como faço para eliminar os elementos label (dos elementos do tipo input) para não duplicá-los?
4
  • Resumindo: você quer que, ao clonar, sejam utilizados os últimos valores selecionados e sem os labels?
    – Woss
    31/01/2019 às 12:27
  • @AndersonCarlosWoss isso! rs
    – rbz
    31/01/2019 às 12:30
  • E o "BF", vai remover tb?
    – Sam
    31/01/2019 às 12:31
  • @Sam Não, o BF mantém!
    – rbz
    31/01/2019 às 12:37

4 Respostas 4

4

Quando você faz o clone no jQuery, o estado dos select não é clonado junto, então você precisará definir os valores conforme o último valor selecionado. Para tal, você pode sempre clonar o último item da sua lista; após clonar você pode percorrer todos os select e definir os valores conforme o item clonado. Por fim, você oculta todas as label do novo elemento e adiciona-o na DOM.

function addReg() {
  // Pega o último item da lista
  const template = $('#formX > div').last();

  // Faz o clone
  const novo = template.clone();

  // Define os valores dos select conforme o item clonado
  $(template).find('select').each(function(i) {
    $(novo).find("select").eq(i).val($(this).val());
  });

  // Oculta os labels
  novo.find('label').hide();

  // Mantém os labels dos checkbox
  novo.find('input[type=checkbox] + label').show();

  // Adiciona o elemento na DOM
  $('#formX').append(novo);
}

Veja funcionando:

function addReg() {
  const template = $('#formX > div').last();
  const novo = template.clone();
  
  $(template).find('select').each(function(i) {
    $(novo).find("select").eq(i).val($(this).val());
  });
  
  novo.find('label').hide();
  novo.find('input[type=checkbox] + label').show();
  
  $('#formX').append(novo);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
    <form id="formX" method="get" action="kk.php">
      <div class="form-row">
        <div class="form-group mr-2">
          <label for="origem">Origem</label>
          <select class="form-control" tabindex="-1" name="origem">
            <option selected>Selecione...</option>
            <option>Item 1</option>
            <option>Item 2</option>
            <option>Item 3</option>
          </select>
        </div>
        <div class="form-group mr-2">
          <label for="destino">Destino</label>
          <select class="form-control" tabindex="-1" name="destino">
            <option selected>Selecione...</option>
            <option>Item 1</option>
            <option>Item 2</option>
            <option>Item 3</option>
          </select>
        </div>
        <div class="form-group mr-2">
          <label for="item">Item</label>
          <select class="form-control" tabindex="-1" name="item">
            <option selected>Selecione...</option>
            <option>Item 1</option>
            <option>Item 2</option>
            <option>Item 3</option>
          </select>
        </div>
        <div class="form-group mr-2">
          <label for="hora">Hora</label>
          <input type="time" class="form-control" name="hora">
        </div>
        <div class="form-group col-md-1">
          <div class="form-check form-check-inline" style="padding-top: 40px;">
            <input class="form-check-input" type="checkbox" value="bf" tabindex="-1">
            <label class="form-check-label" for="bf"><b>BF</b></label>
          </div>
        </div>
      </div>
    </form>
  </div>
  <div class="row">
    <button form="formX" type="submit" class="btn btn-primary mr-3" tabindex="-1">Salvar</button>
    <button class="btn btn-info" onclick="addReg()" tabindex="-1">+</button>
  </div>

</div>

3

Fiz uma nova função Jquery para fazer o clone, assim você pode usar em outros lugares no futuro, e pode acontecer de ter algum problema parecido em outro elemento, caso isso aconteça você pode alterar somente esta função para criar um clone personalizado.

//Criei uma nova função para o Jquery, assim ela pode ser reaproveitada em outros momentos,
//e caso tenha problema ao clonar outro elemento, e só alterar esta função
$.fn.newClone = function(){ 
    var novo = this.clone();
    var self = this;
    novo.find('select').each(function(i) {
      $(this).val($(self).find("select").eq(i).val());
    });
    return novo;
}

function addReg(){
  var novo = $('#formX > div').last().newClone();//Utilizo o novo cloe
  novo.find('label').not('.form-check-label').remove();//E utilizo o "not" para não aplicar a remoção do label para o checkbox
  $('#formX').append(novo);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
	
	<div class="row">
		<form id="formX" method="get" action="kk.php">
			<div id="registro" class="form-row">
				<div class="form-group mr-2">
					<label for="origem">Origem</label>
					<select id="origem" class="form-control" tabindex="-1" name="origem">
						<option selected>Selecione...</option>
						<option>Item 1</option>
						<option>Item 2</option>
						<option>Item 3</option>
					</select>
				</div>
				<div class="form-group mr-2">
					<label for="destino">Destino</label>
					<select id="destino" class="form-control" tabindex="-1" name="destino">
						<option selected>Selecione...</option>
						<option>Item 1</option>
						<option>Item 2</option>
						<option>Item 3</option>
					</select>
				</div>
				<div class="form-group mr-2">
					<label for="item">Item</label>
					<select id="item" class="form-control" tabindex="-1" name="item">
						<option selected>Selecione...</option>
						<option>Item 1</option>
						<option>Item 2</option>
						<option>Item 3</option>
					</select>
				</div>
				<div class="form-group mr-2">
					<label for="hora">Hora</label>
					<input id="hora" type="time" class="form-control" name="hora">
				</div>
				<div class="form-group col-md-1">
					<div class="form-check form-check-inline" style="padding-top: 40px;">
						<input class="form-check-input" type="checkbox" id="bf" value="bf" tabindex="-1">
						<label class="form-check-label" for="bf"><b>BF</b></label>
					</div>
				</div>
			</div>
		</form>
	</div>
	<div class="row">
		<button form="formX" type="submit" class="btn btn-primary mr-3" tabindex="-1">Salvar</button>
		<button class="btn btn-info" onclick="addReg()" tabindex="-1">+</button>
	</div>

</div>

2

Tente realizar fazer dessa forma:

function addReg(){
  var ultimo = $('#formX > div').last();
  var novo = ultimo.clone();
  
  //Seleciona os valores do ultimo clone e seta no novo clone
  novo.find("#origem").val(ultimo.find("#origem").val());
  novo.find("#destino").val(ultimo.find("#destino").val());
  novo.find("#item").val(ultimo.find("#item").val());  
  
  //Remove todos os labels do clone menos o BF
  novo.find('label').not('.form-check-label').remove();
    
  $('#formX').append(novo);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
	
	<div class="row">
		<form id="formX" method="get" action="kk.php">
			<div id="registro" class="form-row">
				<div class="form-group mr-2">
					<label for="origem">Origem</label>
					<select id="origem" class="form-control" tabindex="-1" name="origem">
						<option selected>Selecione...</option>
						<option>Item 1</option>
						<option>Item 2</option>
						<option>Item 3</option>
					</select>
				</div>
				<div class="form-group mr-2">
					<label for="destino">Destino</label>
					<select id="destino" class="form-control" tabindex="-1" name="destino">
						<option selected>Selecione...</option>
						<option>Item 1</option>
						<option>Item 2</option>
						<option>Item 3</option>
					</select>
				</div>
				<div class="form-group mr-2">
					<label for="item">Item</label>
					<select id="item" class="form-control" tabindex="-1" name="item">
						<option selected>Selecione...</option>
						<option>Item 1</option>
						<option>Item 2</option>
						<option>Item 3</option>
					</select>
				</div>
				<div class="form-group mr-2">
					<label for="hora">Hora</label>
					<input id="hora" type="time" class="form-control" name="hora">
				</div>
				<div class="form-group col-md-1">
					<div class="form-check form-check-inline" style="padding-top: 40px;">
						<input class="form-check-input" type="checkbox" id="bf" value="bf" tabindex="-1">
						<label class="form-check-label" for="bf"><b>BF</b></label>
					</div>
				</div>
			</div>
		</form>
	</div>
	<div class="row">
		<button form="formX" type="submit" class="btn btn-primary mr-3" tabindex="-1">Salvar</button>
		<button class="btn btn-info" onclick="addReg()" tabindex="-1">+</button>
	</div>

</div>

2
  • 1
    Albertt, não está clonando o registro anterior, ele clona somente o primeiro...
    – rbz
    31/01/2019 às 12:48
  • Correção aplicada! 31/01/2019 às 13:21
1

Ao clonar o elemento, irá repetir as id's dos elementos filhos. Esta solução irá remover todos os id's repetidos e manter o clique no label do checkbox BF criando um id e um for único para cada um, mantendo a sua funcionalidade:

Outro detalhe que notei é alterar os name's para array caso for ter que enviar pro backend, adicionando os colchetes []. Ex.: name="origem[], name="destino[]" etc...

Solução:

function addReg(){
   
   //conta a quantidade de linhas
   var novo_id = $("#formX > .form-row").length;
   
   // seleciona a última linha
   var reg = $("#formX .form-row:last");

   // clona o elemento e remove o id
   var clone = reg.clone().removeAttr("id");

   // remove os ids dos selects
   clone.find("select").removeAttr("id");

   // atribui novo id ao checkbox do "BF"
   clone.find("input:last").attr("id", "bf"+novo_id);

   // atribui novo "for" ao label do "BF"
   clone.find("label:last").attr("for", "bf"+novo_id);

   // remove todos os labels, menos o último, que é o "BF"
   clone.find("label:not(:last)").remove();
   
   // percorre todos os últimos elementos de cada .form-group
   // da última linha
   $("#formX .form-row:last .form-group *:last-child").each(function(){
      clone
      .find("[name='"+ $(this).attr("name") +"']") // busca o elemento com o mesmo name
      .val( $(this).val() ); // altera o respectivo elemento no clone
   });

   // insere o clone no form
   $("#formX").append(clone);
      
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
	
	<div class="row">
		<form id="formX" method="get" action="kk.php">
			<div id="registro" class="form-row">
				<div class="form-group mr-2">
					<label for="origem">Origem</label>
					<select id="origem" class="form-control" tabindex="-1" name="origem[]">
						<option selected>Selecione...</option>
						<option>Item 1</option>
						<option>Item 2</option>
						<option>Item 3</option>
					</select>
				</div>
				<div class="form-group mr-2">
					<label for="destino">Destino</label>
					<select id="destino" class="form-control" tabindex="-1" name="destino[]">
						<option selected>Selecione...</option>
						<option>Item 1</option>
						<option>Item 2</option>
						<option>Item 3</option>
					</select>
				</div>
				<div class="form-group mr-2">
					<label for="item">Item</label>
					<select id="item" class="form-control" tabindex="-1" name="item[]">
						<option selected>Selecione...</option>
						<option>Item 1</option>
						<option>Item 2</option>
						<option>Item 3</option>
					</select>
				</div>
				<div class="form-group mr-2">
					<label for="hora">Hora</label>
					<input id="hora" type="time" class="form-control" name="hora[]">
				</div>
				<div class="form-group col-md-1">
					<div class="form-check form-check-inline" style="padding-top: 40px;">
						<input class="form-check-input" type="checkbox" id="bf" value="bf" tabindex="-1">
						<label class="form-check-label" for="bf"><b>BF</b></label>
					</div>
				</div>
			</div>
		</form>
	</div>
	<div class="row">
		<button form="formX" type="submit" class="btn btn-primary mr-3" tabindex="-1">Salvar</button>
		<button class="btn btn-info" onclick="addReg()" tabindex="-1">+</button>
	</div>

</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .