/**
*createTime:2015-09-13
*updateTime:2015-09-13
*author:刘俊
*phone:13469119119
*QQ:418873053
**/
var url='/index.php?m=formguide&c=index&a=show&formid=21&ajax=1'; //构建买家报名和卖家报名表单
var formStr = '<li class="clearfix"><div class="optTit fl">买家联系人:</div><div class="option fl"><input id="uname" name="info[uname]" type="text" />';
formStr += '<label class="namelabel" for="uname">请填联系人真实姓名</label></div></li>';
formStr += '<li class="clearfix"><div class="optTit fl">联系电话:</div>';
formStr += '<div class="option fl"><input id="tel" name="info[contact]" type="tel" /><label class="tellabel" for="tel">请填联系人手机号码</label></div></li>';
formStr += '<li class="clearfix"><div class="optTit fl">公司名称:</div>';
formStr += '<div class="option fl"><input id="company" name="info[company]" type="text" /><label class="companylabel" for="company">请填贵公司名称</label></div></li>';
formStr += '<li class="clearfix"><div class="optTit fl">产品要求:</div>';
formStr += '<div class="option fl" style="height:180px"><textarea id="demand" name="info[demand]"></textarea><label class="demandlabel" for="demand">请填写对卖家产品的要求</label></div></li>';
formStr += '<li class="clearfix"><div class="optTit fl">&nbsp;</div><div class="option fl"><a href="javascript:void(0);" class="okbtn font16 mt10 white tc">提交</a></div></li>';
formStr += '</ul></form></div>';
//买家地址
var htmlStr = '<div class="myform"><form id="myform" action="'+url+'" method="post" name="myform"><input name="info[usertype]" value="1" type="hidden" /><ul>';
htmlStr += formStr; //卖家地址
var htmlStr2 = '<div class="myform"><form id="myform" action="'+url+'" method="post" name="myform"><input name="info[usertype]" value="2" type="hidden" /><ul>';
htmlStr2 += formStr; //自定义弹出层
/*$("#toApply").click(function(){
layer.open({
type: 1,
title: "买家报名",
closeBtn: true,
shadeClose: true,
area:['500px','500px'],
skin: 'buyerBox',
content:htmlStr
});
//表单文本框提示文字
$("#myform input,#myform textarea").on({
focus:function(){$(this).next("label").hide();$(this).css("border-color","#999")},
blur:function(){
$(this).css("border-color","#e1e1e1")
var str =$.trim($(this).val());
if(str == ""){
$(this).next("label").show();
}}
});
//提交表单
$("#myform .okbtn").click(function(){
var uname=$("#uname").val();
var tel=$("#tel").val();
var company=$("#company").val(); var chinese = /^[\u4e00-\u9fa5]{2,4}$/;
var telpattern = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;
var phonepattern= /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(14[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
//return this.optional(element) || (chinese.test(value)); if(!chinese.test(uname)){
layer.msg('姓名未填写或未填写汉字!', {icon:0});
return false;
}
if(!telpattern.test(tel) && !phonepattern.test(tel)){
layer.msg('联系方式填写错误!', {icon:0});
return false;
}
if($.trim(company)==''){
layer.msg('请填写公司名称!', {icon:0});
return false;
} ajaxSubmit($("#myform"));
});
});*/
/*
$("#seller").click(function(){
layer.open({
type: 1,
title: "卖家报名",
closeBtn: true,
shadeClose: true,
area:['500px','300px'],
skin: 'sellerBox',
content:htmlStr2
});
//表单文本框提示文字
$("#myform input").on({
focus:function(){$(this).next("label").hide();},
blur:function(){
var str =$.trim($(this).val());
if(str == ""){
$(this).next("label").show();
}}
});
//提交表单
$("#myform .okbtn").click(function(){
var uname=$("#uname").val();
var tel=$("#tel").val();
var company=$("#company").val(); var chinese = /^[\u4e00-\u9fa5]{2,4}$/;
var telpattern = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;
var phonepattern= /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(14[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
//return this.optional(element) || (chinese.test(value)); if(!chinese.test(uname)){
layer.msg('姓名未填写或填写错误!', {icon:0});
return false;
}
if(!telpattern.test(tel) && !phonepattern.test(tel)){
layer.msg('联系方式填写错误!', {icon:0});
return false;
}
if($.trim(company)==''){
layer.msg('请填写公司名称!', {icon:0});
return false;
}
ajaxSubmit($("#myform"));
});
});*/ //将form转为AJAX提交
function ajaxSubmit(frm) {
var dataPara = getFormJson(frm);
var url=$("#myform").attr("action"); $.ajax({
url:$("#myform").attr("action"),
type:$("#myform").attr("method"),
data: dataPara,
success: function(data){
layer.closeAll();
if(data==='1'){
console.log(1);
layer.msg('报名成功!', {icon: 1});
}else if(data==='0'){
console.log(0);
layer.msg('报名失败,请重试!', {icon: 2});
}else{
console.log(data);
layer.msg(data, {icon: 0});
}
}
});
} //将form中的值转换为键值对。
function getFormJson(frm) {
var o = {dosubmit:1};
var a = $(frm).serializeArray();
$.each(a, function () {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
} //铝箔图片查看弹出层
function showPic(id,start,src,pid){
var json = {
"title": "铝箔相册", //相册标题
"id": id, //相册id
"start": start, //初始显示的图片序号,默认0
"data": [ //相册包含的图片,数组格式
{
"alt": "铝箔图片",
"pid": pid, //图片id
"src": "images/pic/"+src, //原图地址
"thumb": "images/pic/ProductImg2.jpg" //缩略图地址
}
]
};
layer.photos({
photos: json,
closeBtn: true,
});
};

序列化layer创建的弹出表单并ajax提交的更多相关文章

  1. jquery序列化from表单使用ajax提交返回json数据(使用struts2注解result type = json)

    1.action类引入struts2的"json-default"拦截器栈 @ParentPackage("json-default") //示例 @Paren ...

  2. layui弹出表单提交后,界面model验证部分起作用

    情况1----input属性中type=submit时验证都可以起作用,但是弹出层表单的返回值不能获取,所以用ajax二次提交后会出现重复添加数据的问题 情况2----input属性中type=but ...

  3. 织梦自定义表单通过ajax提交的实现方法

    自定义表单通过ajax判断,提交不用跳转页面,提高用户体验.具体方法如下: html表单代码部分,就提交按钮改成botton,,添加onclick事件 表单代码: <form action=&q ...

  4. ExtJs 4.2.1 点击按钮弹出表单的窗口

    初学ExtJs,做项目的时候想做一个这样的效果:点击按钮弹出对话框,之前一直是使用EasyUi来做的, EasyUi里有Dialog,用起来很方便,但是现在转移到ExtJs上后,发现没有Dialog这 ...

  5. jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...

  6. jquery.validate和jquery.form配合实现验证表单后AJAX提交

    基础代码其实很简单,之后一点一点扩充.最终代码写在最后. 表单: <form action="@Url.Action("AddColumns","Cont ...

  7. javascript表单的Ajax 提交插件的使用

    Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...

  8. Form 表单用 Ajax 提交数据并用 jQuery Validate 验证

    表单填写需要验证可用插件 jQuery Validate 提交数据使用 Ajax 可操控性得到提到 注意:请自行引入 jQuery 和 jQuery Validate HTML 代码 <form ...

  9. Bootstrap 弹出表单

随机推荐

  1. 16-js-缓冲运动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. map和reduce

    map()函数接收两个参数,一个是函数,一个是Iterable,map将传入的函数依次作用到序列的每个元素,并把结果作为新的Iterator返回. map()传入的第一个参数是f,即函数对象本身.由于 ...

  3. 布尔值(Boolean values)

    布尔值是特殊的整数. 尽管布尔值由常量 True 和 False 来表示, 如果将布尔值放到一 个数值上下文环境中(比方将 True 与一个数字相加), True 会被当成整数值 1, 而 False ...

  4. Java中的日期处理类

    在Java中可以使用Date类和Calendar类来处理日期 但是Date类很多方法都过时了,推荐使用Canlendar类来处理日期,并对日期的格式化做了介绍.下面的部分将会逐一介绍 Date类 Ja ...

  5. [UVA] 11995 - I Can Guess the Data Structure! [STL应用]

    11995 - I Can Guess the Data Structure! Time limit: 1.000 seconds Problem I I Can Guess the Data Str ...

  6. 挖掘机控制器与复制其MCU程序

    最近的时间都浪费在两台小松PW128UU-1上面.旧的一台拆了变速箱,装上去以后就变得换挡不行了.新的一台一直都不行,弄过液压泵以后下部分的行走又出现一时正常一时不动的情况. 先说说概况:PW128U ...

  7. 模拟IIC总线汇编程序软件包

    一.概述 为了非常方便地对 I2C 从器件进行快速的.正确的读写操作,我们为此而设计出虚拟 I2C 总线操作平台软件包.本软件包是主方式下的虚拟 I2C 总线软件包,只要用户给子程序提供几个主要的参数 ...

  8. 必须得是一万小时的 刻意训练(deliberate practice)

    成功素质1:一万小时与格物致知 “格物致知14”的概念,我是从张银奎11老师那里了解到的.它的意思是“推究事物的原理,从而获得知识”,跟我在<透过现象看本质 - 写在观看WWDC 2016 Ke ...

  9. AnimateWindow

    WINDOWS提供了一个很有意思的函数:AnimateWindow.之前我想实现像MSN,QQ这些收到邮件的时候动画方式,从地下升上来的显示一个窗口,感觉很麻烦,自己去写代码,效果很不理想,今天无意中 ...

  10. 【转】Linux中history历史命令使用方法详解

    原文网址:http://os.51cto.com/art/201205/335040.htm 当你在玩Linux的时候,如果你经常使用命令行来控制你的Linux系统,那么有效地使用命令历史机制将会使效 ...