一般填写一个表单时,需要先给用户预览一下才能提交,预览时:直接把表单input文本框的数据,显示在文本框的位置即可。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script
src="/common/js/jquery.js"
type="text/javascript"></script>
</head>
<body>
<form id="createSupplier_form" action="" method="post" enctype="application/x-www-form-urlencoded">
<div class="customer-info">
<ul class="grid clearfix">
<li class="c1 clearfix">
<label for="supplierName">供应商名称:</label>
<div class="input-box" title="supplier.fullName"><input type="text" name="supplier.fullName"
id="supplierName" class="input-text company-name" /></div>
</li>
<li class="c2 clearfix">
<label for="company-name1">供应商简称:</label>
<div class="input-box" title="supplier.shortName"><input type="text" name="supplier.shortName"
id="company-name1" class="input-text company-name" /></div>
</li>
</ul>
<ul>
<li class="clearfix">
<label for="company-desc">公司描述:</label>
<div class="input-box" title="supplierDetail.description"><textarea name="supplierDetail.description" id="company-desc" class="input-textarea company-desc"></textarea></div>
</li>
</ul>
</div>
</form>
<div style="display:none" id="showContent">
</div>
<div class="action action-hasline">
<a href="javascript:;" id="show_button" class="button button-yellow"><span><span>确认</span></span></a>
<a href="javascript:;" id="confirm_button" style="display:none" class="button button-yellow"><span><span>添加并完善信息</span></span></a>
<a href="javascript:;" id="back_button" style="display:none" class="button button-yellow"><span><span>返回上一页</span></span></a>
</div>
</body>
</html>
<script type="text/javascript">
//提交
$('#show_button').unbind("click").click(function () {
copyCustInfoData();
});
//预览信息
function copyCustInfoData(){
//拷贝form的内容
var content = $("#createSupplier_form").clone();
$("#showContent").html("");
$("#showContent").append(content);
$("#showContent #createSupplier_form").attr("id","sddddd");
$("#showContent input[type=text]").each(function(){
var name = $(this).attr("name");
var td = $("#showContent [title=" + name+"]" );
if(td!= null){
td.text($(this).val());
}
});
//预览显示
$("#createSupplier_form").hide();
$("#showContent").show();
//预览的按钮 click
$("#show_button").hide();
$("#confirm_button").show();
$('#confirm_button').unbind("click").click(function () {
$("#createSupplier_form").submit();
$('#confirm_button').unbind("click");
});
//不是text类型的
var description=($("#createSupplier_form [name=supplierDetail.description]").val());
$("#showContent [title=supplierDetail.description]" ).text(description);
$("#back_button").show();
$('#back_button').unbind("click").click(function () {
$("#createSupplier_form").show();
$("#showContent").hide();
$("#show_button").show();
$("#confirm_button").hide();
$("#back_button").hide();
});
}
</script>
分享到:
相关推荐
jquery实现PDF在线预览 jquery实现在线预览PDF文档
jquery.media在线预览pdf文件
使用 jQuery插件实现简单的图片预览功能
实用JS,jQuery实现上传图片的预览功能,可以跟随鼠标移动
jQuery 单图单击预览示例
jquery文档预览功能查看,有例子,一看就秒懂
jQuery页面窗口拖动预览效果是一款基于jQuery HTML5实现的模拟页面窗口显示拖动窗口预览特效。
35、jQuery页面窗口拖动预览效果
Jquery实例(图片预览) Jquery实例(图片预览)
jQuery滚动页面显示文章预览进度条代码
这是一份让你可以了解到JavaWeb开发中jquery(它是当前非常流行的javascript库)如何在不同页面中传数据,如何使用ajax进行数据初始化,对于初学javascript的同学是非常不错的入门代码实例。
jquery.copy.js 这个是一个用于copy 剪切板的。
jquery百度百科底部浮动导航页面滚动预览
jquery实现鼠标悬停图片预览功能的效果下载
jQuery多平台在线预览previewer是一款方便开发者进行快速进行手机端在线预览,平板电脑在线预览,桌面电脑在线预览
基于jquery的imgbox图片预览插件Demo源码
基于jquery实现的页面模板渲染组件 有需要的自己下载, 1.1版本后续传上来
基于Jquery实现的图片预览插件,支持图片手动和鼠标滚轮滑动放大缩小、支持图片旋转转和多图片切换、支持图片分组预览,下载后即可快速使用。