Question

我的引导模式下的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>

在此先感谢您的帮助。

Answer 1

我看到您提交表单时正在替换#feedback的内容，这将删除表单中的所有内容。这就是为什么您下次打开表单时要清空表单，而要替换其内容。

删除行$("#feedback").html(comment);，或更改表单的id并添加另一个元素以显示反馈

引导模态形式

1 个答案: