Home » Javascript » i found this code online to add fields dynamically in html but for some reason its not working

i found this code online to add fields dynamically in html but for some reason its not working

Posted by: admin August 19, 2018 Leave a comment

Questions:

I found this code online to add fields dynamically in html but for some reason it is not working. When I try clicking on the ‘+’ button nothing happens. I have barely worked on jQuery before. If someone can fix this, it will be very useful for me.

Initially, I was loading jQuery from online but that didn’t work so I used the downloaded files directly.

HTML/CSS CODE:

    * {
      .border-radius(0) !important;
    }
    
    #field {
        margin-bottom:20px;
    }
<html>
    <head>
      <link href="bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="bootstrap.min.js"></script>
    <script src="jquery.min.js"></script>
    
      <link rel="stylesheet" href="hello.css">
    
    <!------ Include the above in your HEAD tag ---------->
    </head>
   
    <body>
    
    <div class="container">
      <div class="row">
        <input type="hidden" name="count" value="1" />
            <div class="control-group" id="fields">
                <label class="control-label" for="field1">Nice Multiple Form Fields</label>
                <div class="controls" id="profs"> 
                    <form class="input-append">
                        <div id="field"><input autocomplete="off" class="input" id="field1" name="prof1" type="text" placeholder="Type something" data-items="8"/><button id="b1" class="btn add-more" type="button">+</button></div>
                    </form>
                <br>
                <small>Press + to add another form field :)</small>
                </div>
            </div>
      </div>
    </div>
     <script type="text/javascript">
            $(document).ready(function(){
        var next = 1;
        $(".add-more").click(function(e){
            e.preventDefault();
            var addto = "#field" + next;
            var addRemove = "#field" + (next);
            next = next + 1;
            var newIn = '<input autocomplete="off" class="input form-control" id="field' + next + '" name="field' + next + '" type="text">';
            var newInput = $(newIn);
            var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >-</button></div><div id="field">';
            var removeButton = $(removeBtn);
            $(addto).after(newInput);
            $(addRemove).after(removeButton);
            $("#field" + next).attr('data-source',$(addto).attr('data-source'));
            $("#count").val(next);  
            
                $('.remove-me').click(function(e){
                    e.preventDefault();
                    var fieldNum = this.id.charAt(this.id.length-1);
                    var fieldID = "#field" + fieldNum;
                    $(this).remove();
                    $(fieldID).remove();
                });
        });
        </script>
    </body>
    
    </html>

    
Answers: