"new code"
Bootstrap 3.0.0 Snippet by Nirmaan

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.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 ----------> <!DOCTYPE html> <html ng-app="myApp" ng-controller="myToolControl"> <head> <title>Form Generator</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script src="scriptnew.js"></script> </head> <body> <br/><br/> <div class="container-fluid"> <div class="row"> <div class="col-md-2"> <div id="toolbox" style="border: 2px solid red;" align="center"> <br/><br/> <input type="submit" class="col-md-1 btn btn-default form-control" value="Input Field" data-toggle="modal" data-target="#myModal"> <br/><br/> <input type="submit" class="col-md-1 btn btn-default form-control" value="Radio" data-toggle="modal" data-target="#radioModal"/> <br/><br/> <input type="submit" class="col-md-1 btn btn-default form-control" value="Button" data-toggle="modal" data-target="#myModal"> <br/><br/> <input type="submit" class="col-md-1 btn btn-default form-control" value="Dropdown" data-toggle="modal" data-target="#myModal"> <br/><br/> <input type="submit" class="col-md-1 btn btn-default form-control" value="Check box" data-toggle="modal" data-target="#myModal"> <br/><br/> <input type="submit" class="col-md-1 btn btn-default form-control" value="Upload File" data-toggle="modal" data-target="#myModal"> <br/><br/> </div> </div> <div class="col-md-10" > <div class="panel panel-default"> <div class="panel-heading"><h3><strong>Form</strong></h3></div> <div class="panel-body" id="canvas"></div> </div> <p><span id="display"></span></p> <!--Input Field Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!--Input Field Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Input Field</h4> </div> <div class="modal-body"> <form name="myform"class="form-horizontal"> <div ng-app="" class="form-group"> <label class="control-label col-sm-3" for="pwd">Label name:</label> <div class="col-sm-5"> <input class="form-control" id="label" type="text" placeholder="Enter label name" ng-model="name"/> </div> </div> <div ng-app="" class="form-group"> <label class="control-label col-sm-3" for="pwd">Placeholder:</label> <div class="col-sm-5"> <input class="form-control" id="placeholder" type="text" placeholder="Enter placeholder name" ng-model="placeholder"/> </div> </div> <div ng-app="" class="form-group"> <label class="control-label col-sm-3">Type:</label> <div class="col-sm-5"> <select class="form-control" ng-model="type"> <option value="text">Text</option> <option value="email">Email</option> <option value="password">Password</option> <option value="number">Number</option> <option value="date">Date</option> </select> </div> </div> <div class="modal-footer"> <button type="submit" class="btn btn-success" data-dismiss="modal" ng-click="myTextFunction()">Submit</button> <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> </div> </form> </div> </div> </div> </div> <!-- Radio Modal --> <div class="modal fade" id="radioModal" role="dialog"> <div class="modal-dialog"> <!--Radio Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Radio Button</h4> </div> <div class="modal-body"> <form name="radioButtonForm" class="form-horizontal"> <div ng-app="" class="form-group"> <label class="control-label col-sm-3" for="pwd">Label Name:</label> <div class="col-sm-5"> <input class="form-control" type="text" placeholder="Enter radiolabel name" ng-model="radiolabelName"/> </div> </div> <div ng-app="" class="form-group"> <label class="control-label col-sm-3" for="pwd">Values:</label> <div class="col-sm-5"> <input class="form-control" type="text" placeholder="Enter value name" ng-model="radioVal1"/> <p></p> <input class="form-control"type="text" placeholder="Enter value name" ng-model="radioVal2"/> <p></p> <p id="newField"></p> <input type="button" class="btn btn-primary" ng-click="addField()" value="Add Field" /> </div> </div> <p id="newField"></p> <div class="modal-footer"> <button type="submit" class="btn btn-success" data-dismiss="modal" ng-click="addField()">Submit</button> <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> </div> </form> </div> </div> </div> </div> </div> </div> </div> </body> </html>
//Angular JS var app = angular.module("myApp", []); app.controller("myToolControl", function($scope) { $scope.formElements = ""; $scope.labelElements = ""; $scope.textboxCount = 1; $scope.radioCount = 1; $scope.labelCount = 1; $scope.drawLabel = function() { $scope.labelElements = "label" + $scope.labelCount; $scope.labelCount++; } $scope.drawTextBox = function() { $scope.formElements = "text" + $scope.textboxCount; $scope.textboxCount++; } $scope.drawRadio = function() { $scope.formElements = "radio" + $scope.radio; $scope.radioCount++; } $scope.myTextFunction = function(){ //console.log($scope.name); angular.element(document.getElementById("canvas")).scope().drawTextBox(); angular.element(document.getElementById("canvas")).scope().drawLabel(); var name = angular.element(document.getElementById("canvas")).scope().formElements; var labelName = $scope.name; var input = document.createElement("INPUT"); input.setAttribute("type", $scope.type); input.setAttribute("value", name); input.setAttribute('class', 'col-ms-5 form-control input-sm'); input.setAttribute('placeholder',$scope.placeholder ); input.setAttribute('required', 'required'); document.getElementById("display").innerHtML = document.getElementById("label").value; var label = document.createElement("label"); label.innerHTML=labelName; label.setAttribute('class', 'col-sm-2 control-label'); var mybr = document.createElement('br'); document.getElementById("canvas").appendChild(mybr); var mybr2 = document.createElement('br'); document.getElementById("canvas").appendChild(mybr2); var div_form_group = document.createElement('div'); div_form_group.setAttribute("class", "form-group"); var div_inner = document.createElement('div'); div_inner.setAttribute('class', 'col-sm-5'); div_inner.appendChild(input); div_form_group.appendChild(label); div_form_group.appendChild(div_inner); document.getElementById("canvas").appendChild(div_form_group); $scope.name=""; $scope.placeholder=""; }; $scope.myRadioFunction = function(){ angular.element(document.getElementById("canvas")).scope().drawRadio(); var name = angular.element(document.getElementById("canvas")).scope().formElements; var input = document.createElement("INPUT"); input.setAttribute("type", "text"); input.setAttribute("value", name); document.getElementById("canvas").appendChild(input); }; $scope.addField= function(){ var input = document.createElement("INPUT"); input.setAttribute("type", "text"); input.setAttribute("value", name); input.setAttribute('class', 'col-ms-5 form-control input-sm'); input.setAttribute('placeholder',$scope.placeholder ); document.getElementById("newField").appendChild(input); var myP = document.createElement('p'); document.getElementById("newField").appendChild(myP); }; }); //function myRadioFunction() { // angular.element(document.getElementById("canvas")).scope().drawRadio(); // var name = angular.element(document.getElementById("canvas")).scope().formElements; // // var input = document.createElement("INPUT"); // input.setAttribute("type", "radio"); // input.setAttribute("value", name); // document.body.appendChild(input); // //}

Related: See More

Vuetify Material Dashboard

Questions / Comments: