jquery做的表单提交前的内容预览
下面是个小例子:
jsp页面:
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.js"></script>
</head>
<body>
<div id="content">
//form里面的是要提交到服务器的内容
<form method="post" action="add.html" enctype="multipart/form-data">
<textarea id="title" name=“title"></textarea>
</form>
//因为预览不用提交到浏览器,所以写在form外面
<input type="button" id="previewBt" value="预览"/>
</div>
//这个是要显示的预览的内容
<div id="previewContent">
</div>
</body>
<script type="text/javascript">
$(function(){
$("#previewContent").hide();//预览的div一开始隐藏
$("#previewBt").click(preview);//绑定点击事件
});
//预览事件
function preview(){
$("#content").hide();//隐藏form
$("#previewBt").hide();
var contentStr = $("#title").val();//获取textarea里面的文本信息
$("#previewContent").html(contentStr);//注意:这样用的是html()不是用val(),因为用val的话,获取到的文本信息假如含有html标签,是不会转换的
$("#previewContent").show();//把预览的显示出来
}
</script>
</html>