我的引导模式下的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">×</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>
在此先感谢您的帮助。
答案 0 :(得分:1)
我看到您提交表单时正在替换#feedback
的内容,这将删除表单中的所有内容。这就是为什么您下次打开表单时要清空表单,而要替换其内容。
删除行$("#feedback").html(comment);
,或更改表单的id
并添加另一个元素以显示反馈