0

Olá, eu estou utilizando um script para adicionar campos de input em um div:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript"> 
        // Adicionar curso 
        $(document).ready(function(){
            var maxField = 15; //Input fields increment limitation
            var addButton = $('.add_button'); //Add button selector
            var wrapper = $('.field_wrapper'); //Input field wrapper

            var fieldHTML = '<div style="position:relative; height:100px;"><div><div class="form-group" style="position:absolute;top:-50px;"><div class="field_wrapper"><div class="form-group" style="width:470px; position:absolute;"><label>Instituição</label><input type="text" class="form-control" name="field_name[]" value="" placeholder="Nome e sede"/></div><div class="form-group" style="width:300px; position:absolute; left:510px;"><label>Curso</label><input type="text" class="form-control" name="field_name[]" value=""/></div><div class="form-group" style="width:170px; position:relative; left:790px;"><label>Conclusão</label><select class="form-control"><option></option><option>Concluido em:</option><option>Espero concluir em:</option></select></div><input class="form-control" placeholder="Ano" style="width:75px; position:relative; left:970px; top:-49px;" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button" style="position:absolute; top:60px;" title="Remove field">Remover Curso</a></div></div>'; //New input field html

var contCurso = 1; //Initial field counter is 1
            $(addButton).click(function(){ //Once add button is clicked
                if(contCurso < maxField){ //Check maximum number of input fields
                    contCurso++; //Increment field counter
                    $(wrapper).append(fieldHTML); // Add field html
                }
            });
            $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
                e.preventDefault();
                $(this).parent('div').remove(); //Remove field html
                contCurso--; //Decrement field counter
            });
        }); 

e o formulário inicial:

<a href="javascript:void(0);" class="add_button" title="Add field">Adicionar Cursos</a>
                                                    <div>
                                                        <div class="form-group" style="width:470px; position:absolute;">
                                                            <label>Instituição</label>
                                                            <input type="text" class="form-control" name="field_name[]" value="" placeholder="Nome e sede"/>
                                                        </div>

                                                        <div class="form-group" style="width:300px; position:absolute; left:510px;">
                                                            <label>Curso</label>
                                                            <input type="text" class="form-control" name="field_name[]" value=""/>
                                                        </div>
                                                        <div class="form-group" style="width:170px; position:relative; left:790px;">
                                                            <label>Conclusão</label>
                                                            <select class="form-control">
                                                                <option></option>
                                                                <option>Concluido em:</option>
                                                                <option>Espero concluir em:</option>
                                                            </select>
                                                        </div>
                                                            <input class="form-control" placeholder="Ano" style="width:75px; position:relative; left:970px; top:-49px;" name="field_name[]" value=""/>
                                                    </div> 

O script funciona, mas estou com um problema visual no site. Estou trabalhando com um template pronto que conta com vários css's externos. Então para modificar algumas propriedades da classe, precisei usar styles. Quando Adicionar Botão é clicado 5 vezes por exemplo, ele cria cinco desses formulários um em baixo do outro. Mas se excluo o quinto, e crio novamente, ele vai parar na posição do sexto.

Com cinco clicks

Removendo um e adicionando de novo

Acredito que o problema esteja nos styles, mas não conheço muito essa parte, será que podem me ajudar a resolver esse problema? Agradeço desde já!

1 Resposta 1

1

Como você está usando a classe '.form-control', tomei a liberdade de usar o bootstrap nesse exemplo:

HTML

Fiz uma limpa nos styles que você colocou e acrescentei algumas classes CSS nos botões, mas seria bom dar uma olhada aqui principalmente:

http://getbootstrap.com/css/#grid

 <div class="col-md-12 bar ">
      <a href="javascript:void(0);" class="btn btn-primary add_button" title="Add field">Adicionar Cursos</a>
   </div>
  <div class="field_wrapper">
    <div class="col-md-12 content">
          <div class="col-md-6 col-sm-6 col-xs-12 form-group">
            <label>Instituição</label>
            <input type="text" class="form-control" name="field_name[]" value="" placeholder="Nome e sede"/>
          </div>

          <div class="col-md-6 col-sm-6 col-xs-12 form-group">
            <label>Curso</label>
            <input type="text" class="form-control" name="field_name[]" value=""/>
          </div>
          <div class="col-md-6 col-sm-6 col-xs-12 form-group">
            <label>Conclusão</label>
            <select class="form-control">
              <option></option>
              <option>Concluido em:</option>
              <option>Espero concluir em:</option>
            </select>
          </div>
      <div class="col-md-6 col-sm-6 col-xs-12">
          <div class="form-group">
            <label>Ano</label>
            <input class="form-control" placeholder="Ano" name="field_name[]" value=""/>
          </div>
      </div>
      <div class="col-md-12">
          <a href="javascript:void(0);" class="btn btn-default remove_button" title="Remove field">Remover Curso</a>
      </div>
    </div>

  </div> 

CSS

O CSS foi só pra espaçar melhor os componentes.

.content, .bar {
  margin-bottom: 10px; 
}

JS

Ao invés de usar uma variável armazenando o HTML, utilize o clone() do Jquery.

https://api.jquery.com/clone/

E fiz uma mudança no botão de Remover, para aparecer só quando tiver mais de um $('.content').

        // Adicionar curso 
        $(document).ready(function(){
            var maxField = 15; //Input fields increment limitation
            var addButton = $('.add_button'); //Add button selector
            var wrapper = $('.field_wrapper'); //Input field wrapper

          var fieldHTML = '';

var contCurso = 1; //Initial field counter is 1
            $(addButton).click(function(){ //Once add button is clicked
                if(contCurso < maxField){ //Check maximum number of input fields
                    console.log("aaa")
                    contCurso++; //Increment field counter
                    $('.content').clone().appendTo(wrapper); // Add field html
                }
                if($('.content').length != 1) {
                  $('.remove_button').removeClass('hide');
                }
            });
            $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
                e.preventDefault();
                $(this).parent().parent().remove(); //Remove field html
                contCurso--; //Decrement field counter
                if($('.content').length == 1) {
                  $('.remove_button').addClass('hide');
                }
            });
        }); 

LINK

Abaixo o link disso funcionando e aumente o tamanho da janela de output para ver as classes responsivas do Bootstrap funcionando.

http://jsbin.com/qatacepoye/edit?html,css,js,output

3
  • Cara, funcionou legal, mas está com um problema no contador, quando você adiciona dois e depois exclui eles. se adiciona de novo ele cria três de uma vez! Se eu clico duas vezes, eu adicionaria dois cursos, mas estão adicionando quatro 23/02/2017 às 0:17
  • Adicionei $('.content:last').clone().appendTo(wrapper); no seletor quando clona, resolveu! -> jsbin.com/fomagifevo/edit?html,css,js,output @RafaZanezi 23/02/2017 às 11:34
  • cara, funcionou bem legal! Agradeço demais! 23/02/2017 às 22:52

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 .