<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="jumbotron"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#resetModalForm">Open Model</button> </div> <div class="modal fade" id="resetModalForm" > <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <div class="form-group"> <label>Input:</label> <input type="text" class="form-control" id="resetInput"> </div> <div class="form-group" id="resetCheckbox"> <label class="checkbox-inline"><input type="checkbox" value=""> Option 1</label> <label class="checkbox-inline"><input type="checkbox" value=""> Option 2</label> </div> <div class="form-group" id="resetRadio"> <label class="radio-inline"><input type="radio" name="optradio" checked> Option 1</label> <label class="radio-inline"><input type="radio" name="optradio"> Option 2</label> </div> <div class="form-group"> <label>Select list:</label> <select class="form-control" id="resetDropdown"> <option value="0">Select</option> <option value="1">Item 1</option> <option value="2">Item 2</option> <option value="3">Item 3</option> </select> </div> <div class="form-group"> <label for="comment">Textarea:</label> <textarea class="form-control" rows="2" id="resetTextarea"></textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" id="request_entity" class="btn btn-primary"> Save changes </button> </div> </div> </div> </div>

$( document ).ready(function() { $('#resetModalForm').on('hide.bs.modal', function (e) { $('#resetInput').val(''); $('#resetDropdown').prop('selectedIndex',0); $('#resetRadio input[type="radio"]').prop('checked',0); $('#resetCheckbox input[type="checkbox"]').prop('checked',0); $('#resetTextarea').val(''); }); });