jQuery实现表单代码共享预览提交

预览表单，检查确认提交或返回重填充。



xml代码

复制代码代码如下所示：


注册



用户名:




密码:



电子邮件：



国：

选择国家
美国
大不列颠联合王国
中国



性别：

男性

女性


订阅我们：















Javaｓｃｒｉｐｔ代码

复制代码代码如下所示：

$（文档）Ready（函数（）{）
$（#以下是我参考网上的）PreviewForm（）；
}）；



previewform.js

复制代码代码如下所示：
（函数（$）{）

美元。fn.previewform =功能（选项）{
无功form_settings =美元。延长（{
标识符：'label，
show_password：真，
超文本：你想提交，
是的：是，
不，不，
标题：预览
}，选项）；

无功dia_log；
Var renderBUTTON；
无功this_frm；
this_frm = $（this）；

$（this）。提交（函数（）{）

如果（$（' # pfomdata）。长度）{
返回true；
}


dia_log = ；
无功needle_cnfrm；

如果（this.id.length > 0）{ needle_cnfrm =# +这个ID + 'label；}
别的{ needle_cnfrm =+ $（this）。Attr（' '）+标签；}

$（needle_cnfrm）。每个（功能（我，Val）{）
如果（$（.））文本（）长度> 2）{

what_t =（$ #+ $（this）。Attr（））；

开关（what_t.prop（））{
case'password：
如果（！form_settings show_password）。
dia_log + = $（this）（文本）+您选择的密码；
其他的
dia_log + = $（this）。文本（+ what_t。Val）（+）；
打破；
case'select-one：
dia_log + = $（this）（文本）（+ $ ' #+ $（this）。Attr（' '）的选择：选择（文本）+ +）；
打破；
case'radio：
如果（what_t.is（'检查'））
dia_log + = $（这）。文本（+ what_t。Val）+（+）；
打破；
case'checkbox：
如果（what_t.is（'检查'））
dia_log + = $（这）。文本（+ what_t。Val）+（+）；
打破；
case'undefined：
打破；
违约:
dia_log + = $（this）。文本（+ what_t。Val）（+）；
打破；

}
}
}）；
dia_log = dia_log.replace（'undefined '，'）；


renderbutton = ；
renderbutton =+ +是form_settings；
renderbutton =+ +没有form_settings；

无功rendertemplate = {
'，
'，
，form_settings.title，，
，dia_log，，
，form_settings.extratext，，
'，
RenderBUTTON，
'
}加入（）；

$（rendertemplate）。隐藏（）。AppendTo（'body）。FadeIn（）；

$（。form_yes）。Click（function（）{）
输入= $（var ）。Attr（类型
this_frm.append（$（输入））；
this_frm.submit（）；
}）；

$（。form_no）。Click（function（）{）
$（# previewoverlay）。FadeOut（function（）{）
美元（这个）；
}）；
}）；

返回false；

}）；
}

}（jQuery）；


previewform.css

复制代码代码如下所示：
# previewoverlay {
宽度：100%；
身高：100%；
位置：固定；
顶部：0；
左：0；
背景：URL（'ie.png）；
背景：-moz线性梯度（RGBA（11,11,11,0.1），RGBA（11,11,11,0.6））repeat-x RGBA（11,11,11,0.2）；
背景：-webkit-gradient（线性的，0%，0%，0%，100%，从（RGBA（11,11,11,0.1）），以（RGBA（11,11,11,0.6）））repeat-x RGBA（11,11,11,0.2）；
Z指数：100000；
}

# previewbox {
背景：URL（'body_bg .jpg）repeat-x左下# e5e5e5；
宽度：460px；
位置：固定；
左：50%；
顶部：50%；
保证金：- 00 - 230px 130px；
border: 1px solid RGBA（33, 33, 33，0.6）；

-moz盒阴影：00 2px RGBA（255, 255, 255，0.6）的插图；
Webkit框阴影：00 2px RGBA（255, 255, 255，0.6）的插图；
盒子的影子：00 2px RGBA（255, 255, 255，0.6）的插图；
}

# previewbox H1，
# previewbox p {
字体：26px / 1'cuprum '，'lucida Sans Unicode，'lucida Grande，sans serif；
背景：URL（'header_bg .jpg）repeat-x左下# f5f5f5；
填料：18px 25px；
文字阴影：1px 1px 0 RGBA（255, 255, 255，0.6）；
颜色：# 666；
}

# previewbox h1 {
字母间距：0.3px；
颜色：# 888；
}

# previewbox p {
背景：无；
字体大小：16px；
线高度：1.4；
7px垫上；
}

# previewbuttons {
填充物：0 25px 15px；
文本对齐：中心；
}

# previewbox按钮{。
显示：内联块；
背景：URL（'buttons。png）不重复；
颜色：白色；
职位：相对；
身高：33px；

字体：17px / 33px'cuprum '，'lucida Sans Unicode，'lucida Grande，sans serif；

右边距：15px；
填充物：0 35px 0 40px；
文字装饰：无；
边界：无；
}

# previewbox。按钮：最后一个孩子{保证金：0；}

# previewbox.button跨度{
位置：绝对；
顶部：0；
右：- 5px；
背景：URL（'buttons。png）不重复；
宽度：5px；
身高：33px
}

# previewbox。form_yes {背景位置：左上；文字阴影：1px 1px 0 # 5889a2；}
# previewbox.form_yes跨度{背景位置：- 195px 0；}
# previewbox。form_yes：悬停{背景位置：左下；}
# previewbox。form_yes：悬停跨度{背景位置：- 195px底；}

# previewbox。form_no {背景位置：- 200px顶；文字阴影：1px 1px 0 # 707070；}
# previewbox.form_no跨度{背景位置：- 395px 0；}
# previewbox。form_no：悬停{背景位置：- 200px底；}
# previewbox。form_no：悬停跨度{背景位置：- 395px底；}