发 帖

Mstore下载排行

赞助者

分享者

MS开发手册-自定义表单 

楼主: 铭飞科技 2015-11-26 11:30:58 8506 10

万能的表单!预定、留言、报名想怎么用就怎么用~

1. 概要

自定义表单插件是一个强大的表单提交插件,后台新建自定义表单,根据用户需求创建字段,自动生成表单提交的加密地址,可以根据需要,前端取出提交的表单数据,灵活方便的做一些基本的表单提交功能,如:留言,意见反馈等。

2. 约束说明

a)       后台新增自定义表单。

b)      表单提交地址复制后台新增自定义表单生成的请求地址。

3. 操作流程

1新增自定义表单  2自定义表单字段信息  3前端模板操作 4前端访问

a) 在后台新增自定义表单,输入表单名称、表单表名并保存。

填写信息说明:

表单名称:自己任意填写,用于区分自定义表单列表中不同的表单。

表单表名:只能为英文、数字或下划线,表名保存后不能修改。

001.jpg

 

b) 保存表单后,根据需求自定义新增表单字段。

填写信息说明:

字段提示文字:自己任意填写,用于区分自定义表单中的字段。

字段名称:只能为英文、数字或下划线,不能有重名。

0.jpg

1.jpg

blob.png

c)  按需求新增好字段信息后,将字段名称对应前端模板中表单name值;使用ajax的方式将用户提交的数据提交到后台,提交地址:/请求地址(后台自定义表单列表页的请求地址)。

blob.png

演示代码如下:

<form  method="post" id="postForm">
<table cellpadding="0" cellspacing="1">
<tr>
       <td valign="top">姓名:</td>
       <td><input type='text' name='name' value='' /></td>
</tr>
<tr>
       <td valign="top">电话:</td>
       <td><input type='text' name='phone value='' /></td>
</tr>
<tr>
       <td valign="top">地址:</td>
       <td><input type='text' name='address'  value='' /></td>
</tr>
<tr>
       <td valign="top">邮政编码:</td>
       <td><input type='text' name='code' value='' /></td>
</tr>
</table>
<input type="button" id="submitButton" name="submit" value=""/>
</form>
<script>
var flag = false;
$("#submitButton").click(function() {
  if (!flag) {
$.ajax({
   type: "POST",
   url: "/eac663a0c0a2a61824f4d2db11467b5a.do",
   data: $("#postForm").serialize(),
   success: function(msg){
   flag = true;
    alert("提交成功");
   }
});
 } else {
   alert("您已经提交过了!");
 }
})
</script>

注意:  1.为保证安全性问题,表单提交我们需要图片验证码(详情请看api文档)

            2.如果是开源版用户,需要在url地址前面加上域名标签; 

d) 前端访问表单提交页面

创建栏目选择带表单的页面作为模板,或者在系统管理的自定义页面管理界面新增自定义页面,填写表单提交页面的访问地址和表单提交页面模板(具体操作可参考《MS模版开发手册-自定义页面》


4. 前端获取自定义表单数据

请求地址:/后台生成的请求地址/queryData.do(具体可以参考下面的使用示例)

请求参数说明:

名称

是否必须

类型

默认值

描述

 pageNo

int

1

当前页码

pageSize

int

10

每页显示的数量

返回数据示例:

[{"Id":6,"date":1445349316000,"fromID":3,"test":"留言"},{"Id":5,"date":1445348839000,"fromID":3,"test":"留言"}]

返回json数据说明

名称

类型

示例值

描述

 Id

int

6

自定义表单中数据的Id

date

String

1445349316000

用户提交表单数据的时间戳

fromID

int

3

自定表单的id

test

String

留言

test为新增自定义表单时的字段名,用户提交到的test字段的数据

使用示例:

$.ajax({
     type: "POST",
     url: "/cf8124e5b7f83677566cbcc71c456d7c/queryData.do?pageNo=1&pageSize=10",
     success: function(msg){
       alert(msg)
   } 
});





++++++++++++++

我们很渺小,但我们有大梦想!

++++++++++++++

全部回帖

10条回复
该帖子暂无评论!
  • 1F

    顶!d=====( ̄▽ ̄*)b一下

    2015年11月26日 13:45 | 回复

  • 2F

    2015年11月27日 10:38 | 回复

  • 3F

    为什么4.6的提交后一直走error呢?


    <div class="mainContect">

    <ul class="books">

    <form  method="post" id="postForm">

    <li>您的姓名:

    <input type="text" class="k" name='name' id='name'>

    </li>

    <li>您的电话:

    <input type="text" class="k" name='phone' id='phone'>

    </li>

    <li>您的邮箱:

    <input type="text" class="k" name='email' id='email'>

    </li>

    <li>留言内容:

    <textarea name='content' id='content'></textarea>

    </li>

      </li>

              <!--  <input type="hidden" name="isCode" value="true"/>  -->

                <input class="t" id="rand_code" maxlength="4" style="width: 259px;" name="rand_code" placeholder="验证码" required type="text" value="">

          <img id="yzmimg" class="ms-w32 ms-h16" style="position: relative;top: 9px;height:26px;width:86px;" src="{ms:global.host/}/code" onclick="this.src='{ms:global.host/}/code?t='+new Date().getTime()">

         </li>

    <li> 

    <input type="button" id="submitButton" name="submit" value="提交" class="t">

    </li>

    </form>

    </ul>

    </div>

    </div>

    <div class="clear"></div>

    </div>

    </div>

    {ms:include filename=footpic.htm/}

    <script>scrolling("footPicList","footPicList1","footPicList2");</script>

    {ms:include filename=footer.htm/}


    <script>

    var flag = false;

    $("#submitButton").click(function() {

    /*   if (!flag) { */

     

    $.ajax({

       type: "POST",       

       url: "/from/mdiy/diyForm/f2c131968438246e885e0feed7256dbc.do",

       data: $("#postForm").serialize(),    

               success: function (result) {    

                   alert(result);    

               },    

               error: function (jqXHR, textStatus, errorThrown) {    

                   alert("ERR");    

               }

    });

     /* } else {

       alert("您已经提交过了!");

     } */

    })

    </script>



    2017年04月23日 20:46 | 回复

  • 4F

    字段添加为什么保存不上

    2017年08月31日 10:37 | 回复

  • 5F

    自定义表单 请求路径找不到  而且上面的教程有错误


    • 苏诺说:
      请问这个问题解决了么 我也遇到了 不知道怎么解决

    2017年11月20日 19:02 | 回复

  • 6F

    请问验证码怎样添加?

    2017年11月24日 16:35 | 回复

  • 7F

    3. 操作流程 里面的 步骤d, 和现在的版本不一样了。 更新下文档??

    2018年05月30日 12:10 | 回复