CODEWITHSUNDEEP
angularjsformstwitter-bootstrap-3modal-dialog
adamconkey
adamconkey

Reputation: 4745

Reset bootstrap form inside modal

I want to simply clear the fields on a form that exists in a bootstrap modal. I tried this solution by incorporating

<button type="reset" class="btn btn-danger">Reset</button>

but it didn't seem to do anything. Here is a plunkr with what I attempted:

Plunkr

Upvotes: 0

Views: 4880

Answers (1)

Akshay Dhankhar
Akshay Dhankhar

Reputation: 274

Hey You can do it like with angular js.

Code on Plunker

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>

<div class="container" ng-app="app">
  <h2>Modal Form Reset Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog" ng-controller="demoController">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Form</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" name="personForm" novalidate="">
          <div class="form-group">
            <label class="col-sm-2 control-label">Name</label>
            <div class="col-sm-5">
              <input class="form-control" type="text" placeholder="Name" ng-model="person.name" />
            </div>
          </div>
        </form>
        </div>
        <div class="modal-footer">
          <button type="reset" ng-click="reset()" class="btn btn-danger">Reset</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>
<script>
  var app = angular.module("app",[]);

app.controller("demoController",function($scope){
  $scope.person = {};

  $scope.reset = function(){
    $scope.person = {};
  };
});
</script>
</body>
</html>

Upvotes: 2

Related Questions