Бутстрап Модальная форма - PullRequest
Новая
       3

Бутстрап Модальная форма

0 голосов
/ 25 августа 2018

У меня проблемы с моей формой ajax, которая находится в модале начальной загрузки.В первый раз, когда я использую форму, она работает просто отлично.Во второй раз, когда я использую его (без обновления страницы), текстовая область не отображается в модальном режиме.Я хочу, чтобы пользователь мог использовать форму несколько раз, находясь на странице.

Я пытался, среди прочего, сбросить форму, используя: $ ('# feedback'). Trigger ('reset');

Я включил jsfiddle, который показываетвопрос.

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>

Заранее благодарен за любую помощь.

1 Ответ

0 голосов
/ 25 августа 2018

Я вижу, что вы заменяете содержимое #feedback при отправке формы, которая удаляет все содержимое из формы.Вот почему при следующем открытии формы у вас будет пусто, вы заменяете ее содержимое.

Удалите строку $("#feedback").html(comment); или измените id формы и добавьте еще один элемент для отображения отзыва

...