下面是个小例子:
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>
相关推荐
预览表单,查看后确认提交或者返回重填 XML/HTML Code 代码如下: <form class=”mform” id=”myform” method=”POST” id=”myform” action=””> <legend>Registeration ”0″> <td><label for...
序2 你绝对不可能全部做对的jQuery题 XVI 序3 最流行的前端面试题 XXIII 第1章 jQuery操作网页 1.1 显示或隐藏网页内容 1.2 切换页面的显示或隐藏 1.3 实现幻灯片式的淡入淡出效果 1.4 切换页面的淡入淡出 1.5 页面...
jquery.form.js异步提交表单 要做图片上传预览功能,这个很好用
使用JQuery的方式,在注册页面校验用户名是否已经存在,并作出提示。 我的博文中有预览图,博客路径:https://blog.csdn.net/qq_36654606/article/details/86650080
表单设计器 jQuery 版需求说明编写一个表单设计器。包含如下功能:添加字段选择字段删除字段预览表单添加字段页面中有一个“添加”按钮,点击会弹出选择对话框,在选择对话框中选择要添加的字段类型后,页面中新增一...
Dom提交表单及其他 Dom事件操作 Dom事件操作补充 Dom绑定时间的另外一种方式 JavaScript 词法分析解析 前端学习方法分享 Sublime Text工具使用介绍 谢幕 第17周 今日内容概要 jQuery 和Dom关系及jQuery版本 jQuery...
(含php上传后台)需要一个多图上传并预览,可删除的功能,找了很多资料,试了ssi-uploader.js,都不成功,自己写了一个最简单的,不需要任何组件,直接以正常form表单提交就可以
Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件。该表单通过自定义样式和jQuery来将Bootstrap的表单修改为扁平风格的表单,并带有浮动标签特效。 在线预览 源码下载 使用...
用内容交付网络和静态文件解释和实现库 使用jQuery执行DOM遍历和操作 解释如何使用jQuery解决与动态生成HTML相关的问题 用HTML解释和实现Bootstrap网格布局 将Bootstrap组件集成到HTML文件中以快速构建用户界面 将...
修复页面链接和表单提交默认在新窗口中打开的问题 更新suggest插件,修复错位问题 升级bootstrap版本到3.3.6版本 升级layer到2.1版本 升级echarts到2.2.7版本 升级webuploader到0.1.5版本 修复网络条件不好情况下,...
更新至2018-05-30 增加不支持IE8的页面提示 修复页面链接和表单提交默认在新窗口中打开的问题 更新suggest插件,修复错位问题 升级bootstrap版本到3.3.6版本 升级layer到2.1版本 升级echarts到2.2.7版本 升级...
修复页面链接和表单提交默认在新窗口中打开的问题 更新suggest插件,修复错位问题 升级bootstrap版本到3.3.6版本 升级layer到2.1版本 升级echarts到2.2.7版本 升级webuploader到0.1.5版本 修复网络条件不好情况下,...
在asp中您可以上传图片到指定的路径,并在原页面预览显示上传后的图片,Dreamweaver 8.0以上版本适用。 插件中使用的上传类为 风声 ASP 无组件上传类 V2.11 jquery 为 1.2.3 thickbox 为 3.1 详细介绍: ...
表单提交监听器:停止所有表单提交的默认操作,在提交表单时将gtm.formSubmit和其他数据推送到debugDL。 通过选择监听器并单击“切换”,您可以在页面上设置监听器。通过打开弹出窗口并单击“关闭”,您将取消所有...
■建站:版块表单功能,提交的表单后台存储 ■建站:模板增加预览功能(PC,iPad,iPhone) ■建站:使用新的编辑器替代ckeditor ■建站:版块数据管理功能(content|image等) ■修复:UEditor编辑器,图片上传Bug ■修复:...
表单的规范性校验 后台 Php后台语言 MySql数据库 前台展示页面 前台页面由5部分组成: 主页 导航栏目 banner轮播 客房预览 最新动态 酒店介绍 客房预订 客房列表页 图片 名称 简介 预订数量 客房价格 预订提交页 ...
├最新AngularJS开发宝典—第016讲 ng-init与ng-trim及表单中表单value与$scope数据提交差异分析.mp4 ├最新AngularJS开发宝典—第017讲 使用ng-if、ng-show、ng-disabled、ng-init超简单实现网站注册协议设置.mp4 ...
参数值:表单提交按钮的ID值,默认在form表单上绑定submit以同步结果 说明:通过本参数,在非标准submit提交环境下,比如AJAX提交,可以由用户点击提交按钮以触发编辑器最新值的同步 备注:v1.1.7新添加 onPaste:...
5.加强前台提交表单信息的安全过滤 6.修复几个细节BUG 2014年04月30日 V2.84更新包(推荐升级) 1.修复安装向导配置时对数据库字符过滤不严存在入侵漏洞 2.修复后台模板样式文件字符过滤不严存在入侵漏洞 3.修复...