I am having issues with my ajax form that is in a bootstrap modal. The first time I use the form it works just fine. The second time I use it (without a page refresh) the text area does not show up in the modal. I want the user to be able to use the form multiple times while on the page.
I have tried, among other things, to reset the form by using: $('#feedback').trigger('reset');
I have included a jsfiddle that shows the issue.
https://jsfiddle.net/uow7qfgz/11/#&togetherjs=1jQmKhwzSp
$(document).ready(function(){
$("button#submit_comment").click(
function(comment){
$("#feedback").html(comment);
$("#commentModal").modal('hide');
$('.modal-backdrop').remove();
});
});<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
</head>
<body>
<button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#commentModal">Leave a Comment</button>
<div class="modal fade" id="commentModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Comments</h4>
</div>
<div class="modal-body">
<form class="feedback" id="feedback">
<p>How can we help?</p>
<textarea style="min-width: 100%; " rows="10" name="comment" id="comment" ></textarea>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-success" id="submit_comment">Send</button>
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
</body>Thanks in advance for any help.
</div>
