jQuery ，copy页面数据，预览输入的值

fly533

浏览: 109319 次
性别:
来自: 广西

最近访客更多访客>>

beokwithanything

Eric.Yan

itxxz

wangjn1130

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

一般填写一个表单时，需要先给用户预览一下才能提交，预览时：直接把表单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>

分享到：