0

Apareceu a necessidade de eu criar uma view que eu preciso adicionar inputs através de um botão, onde o usuário vai digitar o nome do campo que ele quer adicionar, esse nome vai aparecer em uma label em cima do input, e o id desse input também tem que ser criado dinamicamente, exemplo (id="item1", id="item2")

Segue um código HTML com jQuery que está adicionando o input já, só não estou conseguindo adicionar a label com o nome que o usuário digitou no input principal e gerar os id dinamicamente para serem enviados pro PHP.

$(function () {
    var scntDiv = $('#dynamicDiv');
    $(document).on('click', '#addInput', function () {
              $('<p>'+
                  '<label>Nome dinamico</label>' +
          '<input type="text" id="inputeste" size="20" value="" placeholder="" /> '+
          '<a class="btn btn-danger" href="javascript:void(0)" id="remInput">'+
        '<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> '+
        'Remover Campo'+
          '</a>'+
    '</p>').appendTo(scntDiv);
        return false;
    });
    $(document).on('click', '#remInput', function () {
          $(this).parents('p').remove();
        return false;
    });
});
<!DOCTYPE html>
<html lang="pt-BR">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<title>Adicionando Campo Dinâmico</title>
		<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
			<a class="btn btn-primary" href="javascript:void(0)" id="addInput">
				<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
				Adicionar Campo
			</a>
			<br/>
			<div id="dynamicDiv">
				<p>
			        <input type="text" id="inputeste" size="20" value="" placeholder="" />
			        <a class="btn btn-danger" href="javascript:void(0)" id="remInput">
			        	<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
			        	Remover Campo
					</a>
		        </p>
		    </div>
       </div>
	</body>
</html>

1
  • Você pode utilizar o window.prompt para capturar o nome do label (já que no seu HTML não há o campo para esta função); e poderá utilizar $("#dynamicDiv > p").length para capturar o número atual de elementos e nomear o atributo id 23/01/2019 às 14:17

1 Resposta 1

1

É só pegar o texto do input com $("#inputeste").val() para colocar na label concatenando na string a ser inserida.

Para gerar as ids em ordem, sugiro uma função separada para isso, para que ela possa ser chamada quando você inserir ou remover itens. A função irá percorrer todos os inputs (menos o primeiro) e colocar ids em ordem: item1, item2 etc.

$(function () {
   
   var scntDiv = $('#dynamicDiv');

   // função que organiza as ids
   function ids(){
      scntDiv.find("input:not(:first)").each(function(i){
         this.id = "item"+ parseInt(i+1);
      });
   }
   
   
   $(document).on('click', '#addInput', function () {
   
      var nome = $("#inputeste").val();
   
      $('<p>'+
      '<label>'+nome+'</label>' +
      '<input type="text" size="20" value="" placeholder="" /> '+
      '<a class="btn btn-danger" href="javascript:void(0)" id="remInput">'+
      '<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> '+
      'Remover Campo'+
      '</a>'+
      '</p>').appendTo(scntDiv);
      
      ids();
      
      return false;
   });

   $(document).on('click', '#remInput', function () {
      $(this).parents('p').remove();
      ids();
      return false;
   });
});
<!DOCTYPE html>
<html lang="pt-BR">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<title>Adicionando Campo Dinâmico</title>
		<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
			<a class="btn btn-primary" href="javascript:void(0)" id="addInput">
				<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
				Adicionar Campo
			</a>
			<br/>
			<div id="dynamicDiv">
				<p>
			        <input type="text" id="inputeste" size="20" value="" placeholder="" />
			        <a class="btn btn-danger" href="javascript:void(0)" id="remInput">
			        	<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
			        	Remover Campo
					</a>
		        </p>
		    </div>
       </div>
	</body>
</html>

1

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 .