Error with custom inputs

Navigation
0
Hello, I'm using a script to add input fields to a 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
            });
        });

and the initial form: 

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

The script works, but I have a visual problem on the site. I'm working with a ready template that has several external css's. So to modify some properties of the class, I needed to use styles . When Add Button is clicked 5 times for example, it creates five of these forms one underneath the other. But if I exclude the fifth, and re-create, it will stop at the position of the sixth.

I believe the problem is in the styles, but I do not know much about this part, can you help me solve this problem? Thank you in advance!

    
asked by anonymous 22.02.2017 / 02:46

1 answer

1

As you are using the '.form-control' class, I took the liberty of using the bootstrap in this example:

HTML

I made a clean in the styles that you put and added some CSS classes in the buttons, but it would be nice to take a look here mainly:

link 

 <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

CSS was just to space the components better. 

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

JS

Instead of using a variable storing HTML, use the Jquery clone ().

link

And I made a change to the Remove button, to appear only when I have more than $('.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

Below is the link that works, and increase the size of the output window to see the responsive Bootstrap classes working.

link

    
22.02.2017 / 13:02
How to make the link clickable, to be accessed? Segmentation fault when switching system call the "int" to "syscall" in x86 assembly linux