<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="modal" id="newrow"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Add Survey Question</h4> </div> <link href="js/libs/jqueryui/css/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <div class="modal-body"> <div class="form-horizontal"> <div class="form-group"> <label class="col-sm-3" id="inputTo">Question</label> <div class="col-sm-9"><input type="email" class="form-control" id="nQ" title="Enter question to be asked" onchange="utext();"></div> <label class="col-sm-3">Control Type</label> <div class="col-sm-9"> <select class="form-control" id="nCT" onchange='showcontrol();' title="Select the type of input control for the user (either textbox or dropdown listbox)"> <option>Text Box</option> <option>Drop Down List</option> </select> </div> <label class="col-sm-3" >Options</label> <div class="col-sm-9"><textarea class="form-control" id="nOpt" rows="2" title="Comma separated list of selectable items"></textarea></div> </div> <div class="panel panel-primary"> <div class="panel-heading">Sample</div> <div class="panel panel-body"> <div id="questionspace"><label id="samplequestion">Question...</label></div> <div id="controlspace"></div> </div> </div> </div> </div> <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a> <a href="#" class="btn btn-primary" id="dlgbtn">Save changes</a> </div> </div> </div> </div> <a data-toggle="modal" href="#newrow" class="btn btn-primary">Launch modal</a> <div class="container"> <div class="row"> <div class="panel panel-default"> <div class="panel-heading">Survey Form</div> <div class="panel-body"> <table class="table" id="qtable"> <thead> <tr> <th width="10%">Index</th> <th>Component</th> <th>Label</th> <th>Options</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </div> </div>

<script src="js/libs/jquery/jquery.min.js" type="text/javascript"></script> <script src="js/libs/jqueryui/jquery-ui.min.js" type="text/javascript"></script> <script src="js/libs/twitter-bootstrap/js/bootstrap.js" type="text/javascript"></script> <script type='text/javascript'> $(document).ready(function() { $( document ).tooltip(); $('#dlgbtn').click(function() { addrow(); return false; }); $('#newrowbutton').click(function() { $('#newrow').modal({show: true}); }); }); function showcontrol(){ if ($("#nCT").value()==1){ $("#nOpt").hide(); }else{ $("#nOpt").show(); } } $rows = 1; function addrow() { $QuestionText = $('#nQ').val(); $ControlType = $('#nCT option:selected').text(); $Options = $('#nOpt').val(); $nr = '<tr><td>' + $rows + '</td><td>' + $ControlType + '</td><td>' + $QuestionText + '</td><td>' + $Options + '</td></tr>'; $('#qtable tbody').append($nr); $rows++; $('#newrow').modal('hide'); } </script>