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

最新推荐文章于 2024-09-29 11:29:55 发布

fly533

最新推荐文章于 2024-09-29 11:29:55 发布

阅读量127

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/fly533/article/details/84165319

版权

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