Skip to content
Fix Code Error

How to add a div with bootstrap form elements dynamically?

April 3, 2021 by Code Error
Posted By: Anonymous

This is my JS fiddle : Demo

I have tried using the below JS code to dynamically replicate the form
elements within the box (Expression LHS, RHS, Operator, Datatype)
However, it did not work.

Could someone help me with this? Also, I will have to write it using Vue.js once I find help with Javascript/jQuery.

Any help would be much appreciated! Thank you!

     $('#addRow').click(function () {

           $('<div/>', {
               'class' : 'child-border', html: GetHtml()
     }).hide().appendTo('#container').slideDown('slow');

     });

 function GetHtml()
{
      var len = $('.child-border').length;
    var $html = $('.parent-border').clone();
    $html.find('[name=lhs]')[0].name="lhs" + len;
    $html.find('[name=rhs]')[0].name="rhs" + len;
    $html.find('[name=data]')[0].name="data" + len;
    $html.find('[name=op]')[0].name="op" + len;

    return $html.html();    
}

Solution

You can simplify everything:

  • clone parent-border
  • for each input element change the name and id
  • toggle the class from parent-border to child-border and append.

Remember: IDs must be unique and for each field to ajax it’s required a name.

_x000D_

_x000D_

$('#deleteRow').closest('.form-group').hide();_x000D_
$('#addRow').on('click', function (e) {_x000D_
    var len = $('.child-border').length;_x000D_
    $('.parent-border').clone().find(':input').each(function (idx, ele) {_x000D_
        ele.name = ele.name + len;_x000D_
        ele.id = ele.id + len;_x000D_
        ele.value = '';_x000D_
    }).end().find('.form-group').toggle(true).end()_x000D_
            .toggleClass('parent-border child-border').hide()_x000D_
            .appendTo('#container').slideDown('slow');_x000D_
});_x000D_
_x000D_
$('button.btn:contains("Save")').on('click', function (e) {_x000D_
    var jsonData = $('form.form-horizontal')_x000D_
            .find(':input:not(button)').get()_x000D_
            .reduce(function (acc, ele) {_x000D_
                acc[ele.name || ele.id] = ele.value;_x000D_
                return acc;_x000D_
            }, {});_x000D_
    console.log(jsonData);_x000D_
});_x000D_
_x000D_
$('#container').on('click', '[id^=deleteRow]', function(e) {_x000D_
    var jsonData = $(this).closest('.child-border, .parent-border')_x000D_
            .find(':input:not(button)').get()_x000D_
            .reduce(function (acc, ele) {_x000D_
                acc[ele.name || ele.id] = ele.value;_x000D_
                return acc;_x000D_
            }, {});_x000D_
    $(this).closest('.child-border, .parent-border').remove();_x000D_
    console.log(jsonData);_x000D_
});

_x000D_

.navbar-nav li {_x000D_
    margin-top: 8px;_x000D_
    margin-bottom: 8px;_x000D_
}_x000D_
.tabs-container {_x000D_
    margin-top: 100px;_x000D_
}_x000D_
.parent-border, .child-border {_x000D_
    border: 1px solid #CCC;_x000D_
    border-radius: 4px;_x000D_
    padding: 15px;_x000D_
    margin-bottom: 15px;_x000D_
}_x000D_
.btn-circle.btn-lg {_x000D_
    width: 50px;_x000D_
    height: 50px;_x000D_
    padding: 10px 16px;_x000D_
    font-size: 18px;_x000D_
    line-height: 1.33;_x000D_
    border-radius: 25px;_x000D_
}

_x000D_

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">_x000D_
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
_x000D_
_x000D_
<nav class="navbar navbar-inverse navbar-fixed-top">_x000D_
    <div class="container">_x000D_
        <div class="navbar-header pull-right">_x000D_
            <ul class="nav navbar-nav">_x000D_
                <li>_x000D_
                    <button class="btn btn-md btn-success">Login</button>_x000D_
                </li>_x000D_
            </ul>_x000D_
        </div>_x000D_
    </div>_x000D_
</nav>_x000D_
<div class="container">_x000D_
    <div class="row tabs-container">_x000D_
        <div class="col-sm-offset-2 col-sm-8">_x000D_
            <div class="panel with-nav-tabs panel-default">_x000D_
                <div class="panel-heading">_x000D_
                    <ul class="nav nav-tabs">_x000D_
                        <li class="active"><a href="#tab1default" data-toggle="tab">Rules</a></li>_x000D_
                        <li><a href="#tab2default" data-toggle="tab">Events</a></li>_x000D_
                    </ul>_x000D_
                </div>_x000D_
                <div class="panel-body">_x000D_
                    <div class="tab-content">_x000D_
                        <div class="tab-pane fade in active" id="tab1default">_x000D_
                            <form class="form-horizontal">_x000D_
                                <div class="form-group">_x000D_
                                    <label class="control-label col-sm-2" for="name">Name:</label>_x000D_
_x000D_
                                    <div class="col-sm-10">_x000D_
                                        <input type="text" class="form-control" id="name" name="name"_x000D_
                                               placeholder="Enter name">_x000D_
                                    </div>_x000D_
                                </div>_x000D_
                                <div class="form-group">_x000D_
                                    <label class="control-label col-sm-2" for="type">Type:</label>_x000D_
_x000D_
                                    <div class="col-sm-10">_x000D_
                                        <select class="form-control" id="type1" name="type1">_x000D_
                                            <option>Type1</option>_x000D_
                                            <option>Type2</option>_x000D_
                                            <option>Type3</option>_x000D_
                                            <option>Type4</option>_x000D_
                                        </select>_x000D_
                                    </div>_x000D_
                                </div>_x000D_
                                <div class="form-group">_x000D_
                                    <label class="control-label col-sm-2" for="type">Description:</label>_x000D_
_x000D_
                                    <div class="col-sm-10">_x000D_
                    <textarea class="form-control" rows="4" cols="50" name="descriptionRules">XYZ_x000D_
                    </textarea>_x000D_
                                    </div>_x000D_
                                </div>_x000D_
                                <div class="parent-border col-sm-offset-2 col-sm-10">_x000D_
                                    <div class="form-group">_x000D_
                                        <div class="col-sm-offset-10">_x000D_
                                            <button type="button" id="deleteRow" class="btn btn-success btn-circle btn-lg"><i_x000D_
                                                    class="glyphicon glyphicon glyphicon-trash"></i></button>_x000D_
                                        </div>_x000D_
                                    </div>_x000D_
                                    <div class="form-group">_x000D_
                                        <label class="control-label col-sm-2" for="type">Expression LHS:</label>_x000D_
_x000D_
                                        <div class="col-sm-10">_x000D_
                                            <input type="text" class="form-control" id="elhs" name="elhs"_x000D_
                                                   placeholder="Enter LHS"_x000D_
                                                   name="lhs">_x000D_
                                        </div>_x000D_
                                    </div>_x000D_
                                    <div class="form-group">_x000D_
                                        <label class="control-label col-sm-2" for="type">Operator</label>_x000D_
_x000D_
                                        <div class="col-sm-10">_x000D_
                                            <select class="form-control" id="op" name="op">_x000D_
                                                <option><=</option>_x000D_
                                                <option>>=</option>_x000D_
                                                <option>!==</option>_x000D_
                                                <option><</option>_x000D_
                                                <option>></option>_x000D_
                                                <option>==</option>_x000D_
                                            </select>_x000D_
                                        </div>_x000D_
                                    </div>_x000D_
                                    <div class="form-group">_x000D_
                                        <label class="control-label col-sm-2" for="erhs">Expression RHS:</label>_x000D_
_x000D_
                                        <div class="col-sm-10">_x000D_
                                            <input type="text" class="form-control" id="erhs" name="erhs"_x000D_
                                                   placeholder="Enter RHS"_x000D_
                                                   name="rhs">_x000D_
                                        </div>_x000D_
                                    </div>_x000D_
                                    <div class="form-group">_x000D_
                                        <label class="control-label col-sm-2" for="type">Datatype:</label>_x000D_
_x000D_
                                        <div class="col-sm-10">_x000D_
                                            <input type="text" class="form-control" id="datatype" name="datatype"_x000D_
                                                   placeholder="Enter datatype" name="datatype">_x000D_
                                        </div>_x000D_
                                    </div>_x000D_
                                </div>_x000D_
                                <div id="container">_x000D_
                                </div>_x000D_
                                <div class="form-group">_x000D_
                                    <div class="col-sm-offset-6">_x000D_
                                        <button type="button" id="addRow" class="btn btn-success btn-circle btn-lg"><i_x000D_
                                                class="glyphicon glyphicon-plus"></i></button>_x000D_
                                    </div>_x000D_
                                </div>_x000D_
                            </form>_x000D_
                        </div>_x000D_
                        <div class="tab-pane fade" id="tab2default">_x000D_
                            <form class="form-horizontal">_x000D_
                                <div class="form-group">_x000D_
                                    <label class="control-label col-sm-2" for="name1">Name:</label>_x000D_
_x000D_
                                    <div class="col-sm-10">_x000D_
                                        <input type="text" class="form-control" id="name1" name="name1"_x000D_
                                               placeholder="Enter name">_x000D_
                                    </div>_x000D_
                                </div>_x000D_
                                <div class="form-group">_x000D_
                                    <label class="control-label col-sm-2" for="type">Type:</label>_x000D_
_x000D_
                                    <div class="col-sm-10">_x000D_
                                        <select class="form-control" id="type" name="type">_x000D_
                                            <option>Type1</option>_x000D_
                                            <option>Type2</option>_x000D_
                                            <option>Type3</option>_x000D_
                                            <option>Type4</option>_x000D_
                                        </select>_x000D_
                                    </div>_x000D_
                                </div>_x000D_
                                <div class="form-group">_x000D_
                                    <label class="control-label col-sm-2" for="type">Description:</label>_x000D_
_x000D_
                                    <div class="col-sm-10">_x000D_
                    <textarea class="form-control" rows="4" cols="50" name="descriptionEvents">XYZ_x000D_
                    </textarea>_x000D_
                                    </div>_x000D_
                                </div>_x000D_
                            </form>_x000D_
                        </div>_x000D_
                    </div>_x000D_
                </div>_x000D_
            </div>_x000D_
        </div>_x000D_
    </div>_x000D_
    <!-- /.container -->_x000D_
    <div class="navbar navbar-inverse navbar-fixed-bottom">_x000D_
        <div class="container">_x000D_
            <div class="navbar-footer pull-right">_x000D_
                <ul class="nav navbar-nav">_x000D_
                    <li>_x000D_
                        <button class="btn btn-md btn-success">Save</button>_x000D_
                    </li>_x000D_
                </ul>_x000D_
            </div>_x000D_
        </div>_x000D_
    </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Answered By: Anonymous

Related Articles

  • Navbar not filling width of page when reduced to mobile view
  • What does this symbol mean in JavaScript?
  • Sort table rows In Bootstrap
  • Is it possible to apply CSS to half of a character?
  • Active tab issue on page load HTML
  • Style jQuery autocomplete in a Bootstrap input field
  • Difference in make_shared and normal shared_ptr in C++
  • [Vue warn]: Error in render: "TypeError: Converting circular…
  • What are the nuances of scope prototypal / prototypical…
  • Operator() crashing program on MSVC C++17 (2019)

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

Save several Backbone models at once

Next Post:

What is the best way to user authentication with Devise 3 and Backbone?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Get code errors & solutions at akashmittal.com
© 2022 Fix Code Error