1

Então, estou fazendo um formulário de cadastro de clinicas e nesse formulário tem um campo Especialidades que pega os dados de outro banco de dados e mostra as opções em lista para escolher, eu estou tentando colocar um botão adicionar e um remover para que se cadastre mais de uma especialidade para cada clinica, no formato input=text ta funcionando mas o campo select eu não estou conseguindo fazer funcionar, nada acontece ao clicar.

SCRIPT

    $(document).ready(function() {
    var campos_max          = 10;   //max de 10 campos
    var x = 1; // campos iniciais
    $('#add').click (function(e) {
            e.preventDefault();     //prevenir novos clicks
            if (x < campos_max) {
                    $('#listas').append('<div>\
                            <select name="espc">\
                            <a href="#" class="remover_campo">Remover</a>\
                            </div>');
                    x++;
            }
    });

    // Remover o div anterior
    $('#espc').on("click",".remover_campo",function(e) {
            e.preventDefault();
            $(this).parent('div').remove();
            x--;
    });

HTML

    <p>
<label for="espc">Especialidades</label>
<select name="espc" id="espc">
<?php
include('conectadb.php');
$pesquisa="select codigo_esp,tipo from especialidades order by tipo";
$query=mysqli_query($conn,$pesquisa);
while($dados=mysqli_fetch_array($query))
{
    $codigo=$dados['codigo_esp'];
    $tipo=$dados['tipo'];
    echo "<option value='" .$codigo ."'>" .$tipo ."</option>";
}
?>
</select>
<input type="button" id="add" value="adicionar">


Desculpe qualquer erro bobo sou novato ainda; Obrigado.

8
  • No seu script você esta abrindo a tag select mas está esquecendo de fechar ela
    – NoobSaibot
    Commented 4/09/2017 às 22:30
  • esta fechado no ' >\ ' Commented 4/09/2017 às 22:36
  • Negativo, para fechar a tag: </select>
    – NoobSaibot
    Commented 4/09/2017 às 22:38
  • tentei como vc disse mas n mudou Commented 4/09/2017 às 22:43
  • Esse campo dinâmico que vai adicionar vai contém os mesmos valores do primeiro correto?
    – NoobSaibot
    Commented 4/09/2017 às 22:43

2 Respostas 2

1

Aqui uma das maneiras possíveis de adicionar campos dinâmicos utilizando jQuery

Exemplo

$(document).ready(function(){
  // Vamos usar um número de índice exclusivo para cada nova instância do formulário clonado
  var _espc_clone_index=0;
  //When the button is clicked (or Enter is pressed while it's selected)
  $("#add_espc").click(function(){
    // Incremente o índice exclusivo porque estamos criando uma nova instância do formulário
    _espc_clone_index++;
    // Clonar o formulário e colocá-lo apenas antes do botão <p>. Também dê ao seu id um índice exclusivo
    $(this).parent().before($("#_espc").clone().attr("id","_espc" + _espc_clone_index));
    // Tornar o clone visível alterando CSS
    $("#_espc" + _espc_clone_index).css("display","inline");
    // Altera a ID do INPUT remover
    $("#_espc" + _espc_clone_index + " input").attr("id", "remover_espc" + _espc_clone_index);
    // Quando o botão Remover é clicado (ou Enter é pressionado enquanto ele está selecionado)
    $("#remover_espc" + _espc_clone_index).click(function(){
      // Remove
      $(this).parent().parent().remove();
    });
  });
  $("#btn_enviar").on("click", function() {
    alert($("#form_teste").serialize());
  });
});
.hidden {
    display: none;
}
<!--
O código abaixo, é como se fosse um template,  é ocultado, e atravês do jQuery fazemos o clone dele. Importante: ele deve ficar fora da tag FORM.
-->
<div id="_espc" class="hidden">
    <p>
        <p>
          <label for="espc">Especialidades</label>
          <select name="espc[]" id="espc">
            <option value="1">Opção 1</option>
            <option value="2">Opção 2</option>
            <option value="3">Opção 3</option>
            <option value="4">Opção 4</option>
            <option value="5">Opção 5</option>
          </select>
        <input type="button" id="remover_espc" value="Remover">
    </p>
</div>

<!-- Aqui vem seu form -->
<form id="form_teste">
    <p>
      <!-- Botão para adicionar os campos -->
        <input type="button" value="Add Especialidade" id="add_espc">
    </p>
  <p>
    <!-- Botão para enviar o form, aqui fiz apenas para exemplo -->
    <input type="button" value="Enviar" id="btn_enviar" />
  </p>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Com o mesmo código jQuery citado acima, coloque fora da tag form, quando clicar no botão para adicionar, ele vai clonar.

<div id="_espc" class="hidden">
    <p>
        <p>
          <label for="espc">Especialidades</label>
          <select name="espc[]" id="espc">
          <?php
          include('conectadb.php');
          $pesquisa="select codigo_esp,tipo from especialidades order by tipo";
          $query=mysqli_query($conn,$pesquisa);
          while($dados=mysqli_fetch_array($query))
          {
              $codigo=$dados['codigo_esp'];
              $tipo=$dados['tipo'];
              echo "<option value='" .$codigo ."'>" .$tipo ."</option>";
          }
          ?>
          </select>
        <input type="button" id="remover_espc" value="Remover">
    </p>
</div>

Edição:

Adicionado linha no javascript que altera a ID do botão de remover, corrigindo o problema a qual não conseguia remover o campo clonado.

9
  • estou tentando usando a sua maneira mas não esta acontecendo nada ao clicar em add ou remover, tentei da minha maneira e depois copiei o seu pra testar mas continua não funcionando o click... tentei baixando o jquery e usando o link como vc Commented 5/09/2017 às 0:01
  • está retornando algum erro no console?
    – NoobSaibot
    Commented 5/09/2017 às 0:03
  • consegui. eu tava usando o localhost ai tive q colocar o script no fim da pagina, mas só o remover que ainda nao funciona Commented 5/09/2017 às 0:05
  • o id do botão remover tem que ser remover_espc
    – NoobSaibot
    Commented 5/09/2017 às 0:07
  • esta certo, deve estar faltando algo, tenta executar ali na sua msg tbm n funciona o remover Commented 5/09/2017 às 0:11
0

Tiver que adicionar mais um campo tipo input ao lado do campo select. Mas na hora de remover dava um problema, ao clicar na input adicionada era deletado devido a esse trecho de código $("#_espc" + _espc_clone_index + " input"). para resolver esse problema comentei o código que fazia a parte de remoção e adicionei esse $("#_espc" + _espc_clone_index).on('click', '.fechar', function() { $(this).parent().parent().remove(); });

e no botão remover , adicionei uma classe .fechar. ficando assim <input type="button" id="remover_espc" class="fechar" value="Remover">

código completo

	
	$(document).ready(function(){
  // Vamos usar um número de índice exclusivo para cada nova instância do formulário clonado
  var _espc_clone_index=0;
  //When the button is clicked (or Enter is pressed while it's selected)
  $("#add_espc").click(function(){
    // Incremente o índice exclusivo porque estamos criando uma nova instância do formulário
    _espc_clone_index++;
    // Clonar o formulário e colocá-lo apenas antes do botão <p>. Também dê ao seu id um índice exclusivo
    $(this).parent().before($("#_espc").clone().attr("id","_espc" + _espc_clone_index));
    // Tornar o clone visível alterando CSS
    $("#_espc" + _espc_clone_index).css("display","inline");
    // Altera a ID do INPUT remover
   // $("#_espc" + _espc_clone_index + " button").attr("id", "remover_espc" + _espc_clone_index);
    // Quando o botão Remover é clicado (ou Enter é pressionado enquanto ele está selecionado)
    //$("#remover_espc" + _espc_clone_index).click(function(){
      // Remove
    //  $(this).parent().parent().remove();
   // });
	  $("#_espc" + _espc_clone_index).on('click', '.fechar', function() {
       $(this).parent().parent().remove();
    });
  });
  $("#btn_enviar").on("click", function() {
    alert($("#form_teste").serialize());
  });
});
	
	.hidden {
    display: none;
}
	
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="_espc" class="hidden">
    <p>
        <p>
          <label for="espc">Especialidades</label>
          <select name="espc[]" id="espc">
            <option value="1">Opção 1</option>
            <option value="2">Opção 2</option>
            <option value="3">Opção 3</option>
            <option value="4">Opção 4</option>
            <option value="5">Opção 5</option>
          </select>
			<label for="espc">Especialidades</label>
          <input name="vezes[]" type="text" id="espc" size="5">
        <input type="button" id="remover_espc" class="fechar" value="Remover">
    </p>
</div>

<!-- Aqui vem seu form -->
<form id="form_teste">
    <p>
      <!-- Botão para adicionar os campos -->
        <input type="button" value="Add Especialidade" id="add_espc">
    </p>
  <p>
    <!-- Botão para enviar o form, aqui fiz apenas para exemplo -->
    <input type="button" value="Enviar" id="btn_enviar" />
  </p>
</form>

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 .