how to create bootstrap Panel dynamically through javascript?

Question

I am experiencing a problem to create Bootstrap Panel dynamically and that panel contains a form for the "Day Schedule Info"... I tried to do it with the help of the following code but it is not working correctly the way I want

HTML

<div class="col-md-6 it-right-side pull-right">
                            <div>
                                <div class="col-md-12" id="dynamicInput">
                                    <!--Start Panel-->
                                    <div class="panel-group" id="accordion">
                                        <div class="panel panel-info">
                                            <div class="panel-heading">
                                                <h4 class="panel-title">
                                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                                                        Day 1
                                                        <i class="fa fa-plus pull-right" aria-hidden="true"></i>
                                                    </a>
                                                </h4>
                                            </div>
                                            <div id="collapse1" class="panel-collapse collapse">
                                                <div class="panel-body">
                                                    {{--Schedule--}}
                                                    <div class="row">
                                                        <div class="col-md-12 sch-box">
                                                            <div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]"></div>
                                                            <div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]"></div>
                                                            <div class="col-md-12 form-group"><input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]"></div>
                                                            <div class="col-md-12 form-group"><textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea></div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                            <button type="button" class="btn center-block"><i class="fa fa-plus"></i> </button>

                                        </div>
                                        <button type="button" class="btn center-block" onClick="addInput('dynamicInput');"><i class="fa fa-plus"></i> </button>
                                    </div>
                                </div>
                                <!--End panel-->

                                </div>
                            </div>

JAVASCRIPT

 <script>
    var counter = 1;
    var limit = 6;
    function addInput(divName){
        if (counter == limit)  {
            alert("You have reached the limit of adding " + counter + " inputs");
        }
        else {
            var newdiv = document.createElement('panel');
            newdiv.innerHTML = '<div class="panel panel-info">' +
                    '<h4 class="panel-title">' +
                    '<a data-toggle="collapse" data-parent="#accordion" href="#collapse' + (counter + 1) + '">Day ' + (counter + 1) + '<i class="fa fa-plus pull-right" aria-hidden="true"></i></a></h4>' +
                    '</div> ' +
                    '<div id="collapse' + (counter + 1) + '" class="panel-collapse collapse">' +
                    '<div class="panel-body">' +
                    '<div class="row">' +
                    '<div class="col-md-12 sch-box">' +
                    '<div class="col-md-6 form-group">' +
                    '<input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]">' +
                    '</div>' +
                    '<div class="col-md-6 form-group">' +
                    '<input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]">' +
                    '</div>' +
                    '<div class="col-md-12 form-group">' +
                    '<input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]">' +
                    '</div>' +
                    '<div class="col-md-12 form-group">' +
                    '<textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea>' +
                    '</div></div></div></div></div>';
            document.getElementById(divName).appendChild(newdiv);
            counter++;
        }
    }
</script>

max · Accepted Answer · 2017-02-03 08:02:37Z

3

You should create div element (not panel).

var newdiv = document.createElement('div');

You forgot .panel-heading div.

'<div class="panel panel-info">' + '<div class="panel-heading">'

CODEPEN

answered Feb 3, 2017 at 8:02

max

8,6973 gold badges25 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Srinivas · Accepted Answer · 2017-02-03 08:06:35Z

I did some changes to your script. Here i am using jquery function to append. Also there is no such element 'panel' which you are trying to create.

 <script type="text/javascript">
    var counter = 1;
    var limit = 6;
    function addInput(divName) {
        if (counter == limit)  {
            alert("You have reached the limit of adding " + counter + " inputs");
        }
        else {
            newdiv = '<div class="panel panel-info">' +
                    '<h4 class="panel-title">' +
                    '<a data-toggle="collapse" data-parent="#accordion" href="#collapse' + (counter + 1) + '">Day ' + (counter + 1) + '<i class="fa fa-plus pull-right" aria-hidden="true"></i></a></h4>' +
                    '</div> ' +
                    '<div id="collapse' + (counter + 1) + '" class="panel-collapse collapse">' +
                    '<div class="panel-body">' +
                    '<div class="row">' +
                    '<div class="col-md-12 sch-box">' +
                    '<div class="col-md-6 form-group">' +
                    '<input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]">' +
                    '</div>' +
                    '<div class="col-md-6 form-group">' +
                    '<input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]">' +
                    '</div>' +
                    '<div class="col-md-12 form-group">' +
                    '<input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]">' +
                    '</div>' +
                    '<div class="col-md-12 form-group">' +
                    '<textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea>' +
                    '</div></div></div></div></div>';

            $("#" + divName).append(newdiv);
            counter++;
        }
    }
  </script>

Collectives™ on Stack Overflow

how to create bootstrap Panel dynamically through javascript?

2 Answers 2

CODEPEN

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related