CODEWITHSUNDEEP
jqueryhtmlajaxbootstrap-modal
AMB
AMB

Reputation: 13

Bootstrap Modal Form

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">&times;</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.

Upvotes: 0

Views: 147

Answers (1)

arieljuod
arieljuod

Reputation: 15838

I see that you are replacing the content of #feedback when you submit the form, that deletes all the content from the form. That's why you have the form empty the next time you open it, you are replacing it's content.

Remove the line $("#feedback").html(comment);, or change the id of the form and add another element to show the feedback

Upvotes: 1

Related Questions