Problem creating a field with add and remove dynamic

Question

Problem creating a field with add and remove dynamic

Navigation

#1 by (1 votes)

1

So I am doing a clinic registration form and in this form has a Specialties field that takes the data from another database and shows the list options to choose from, I am trying to put a add button and a remove it so that if you register more than one specialty for each clinic, in the format input = text is working but the select field I can not make it work, nothing happens when clicking.

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">

Sorry for any silly mistake I'm newbie yet; Thank you.

javascript html

asked by anonymous 05.09.2017 / 00:28

1 answer

Character "wildcard" as criterion of a query How to use the BalloonTip library?

score 1 · Accepted Answer

Here's one of the possible ways to add dynamic fields using jQuery

Example

$(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>

WiththesamejQuerytagquotedabove,placeoutsideoftheformtag,whenyouclicktheaddbutton,itwillclone.

<divid="_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>

Issue:

Added line in javascript that changes the ID of the remove button, correcting the problem which could not remove the cloned field.