-1

Estou usando um comando JQuery para adicionar e remover dinamicamente campos em um formulário.

$(document).ready(function(){
    var _espc_clone_index=0;
    $("#add_espc").click(function(){
        _espc_clone_index++;
        $(this).parent().after($("#_espc").clone().attr("id","_espc" + 
        _espc_clone_index));
        $("#_espc" + _espc_clone_index).css("display","inline");
        $("#_espc" + _espc_clone_index + " input").attr("id", 
        "remover_espc" + _espc_clone_index);
        $("#remover_espc" + _espc_clone_index).click(function(){
            $(this).closest("div").remove();
        });
    });
    $("#btn_enviar").on("click", function() {
        alert($("#form_teste").serialize());
    });
});
.hidden {
    display: none;
}
<div id="_espc" class="hidden">
          <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">
</div>
<form>
<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">
      <input type="button" value="Add Especialidade" id="add_espc">
</p>
<p>
    <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>

então quando eu clico pra adicionar, cria um campo no fim da página depois do formulário. Preciso que ele crie outro campo na mesma linha ao lado do original.

2
  • Qual o html que está a ser criado ? Qual o html que é pretendido ? Exemplifique ambos para que fique claro o que tem neste momento e o que pretende que aconteça.
    – Isac
    Commented 5/09/2017 às 9:32
  • adicionei o html, e melhorei a explicação. Commented 5/09/2017 às 16:12

1 Resposta 1

0

O problema do seu código é que a estrutura do HTML estava inválida. Percebi que você colocou a tag <form>, depois colocou uma tag <p> para cada linha de campos, mas você estava fechando a tag <p> sem abri-la. O que eu fiz foi incluir a abertura da tag <p> logo após a abertura da tag <form> e seu JavaScript funcionou como o esperado.

Segue abaixo o seu código com essa alteração:

$(document).ready(function(){
    var _espc_clone_index=0;
    $("#add_espc").click(function(){
        _espc_clone_index++;
        $(this).parent().after($("#_espc").clone().attr("id","_espc" + 
        _espc_clone_index));
        $("#_espc" + _espc_clone_index).css("display","inline");
        $("#_espc" + _espc_clone_index + " input").attr("id", 
        "remover_espc" + _espc_clone_index);
        $("#remover_espc" + _espc_clone_index).click(function(){
            $(this).closest("div").remove();
        });
    });
    $("#btn_enviar").on("click", function() {
        alert($("#form_teste").serialize());
    });
});
.hidden {
    display: none;
}
<div id="_espc" class="hidden">
    <p>
          <label for="espc">Especialidades</label>
          <select name="espc[]" id="espc">
          </select>
        <input type="button" id="remover_espc" value="Remover">
</div>
<form>
<p>
          <label for="espc">Especialidades</label>
          <select name="espc[]" id="espc">

          </select>
      <input type="button" id="remover_espc" value="Remover">
      <input type="button" value="Add Especialidade" id="add_espc">
</p>
<p>
    <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>

1
  • fiz dessa maneira, ao clicar para adicionar cria um campo na linha abaixo e as próximas são criadas ao lado dessa primeira que foi criada da maneira que eu queria, o que preciso alterar para que a primeira fique ao lado do botão 'add especialidade' e as próximas na mesma direção? Commented 5/09/2017 às 17:35

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 .