当前位置：首页 > 行业动态 > 正文

dede自定义js表单

admin
行业动态
2025-03-17
1

在DedeCMS中，自定义JavaScript表单可以通过编写特定的JS代码来实现。这通常涉及在模板文件中插入自定义的JavaScript代码，以实现特定的表单功能或验证逻辑。

在DedeCMS（织梦内容管理系统）中，自定义JS表单是一种灵活且强大的功能，它允许网站管理员根据特定需求创建各种自定义表单，如在线订单、在线报名、用户反馈等，以下是关于DedeCMS自定义JS表单的详细解答：

一、创建自定义表单

1、进入自定义表单管理界面：登录DedeCMS后台，找到主菜单“核心”选项卡下的“频道模型”，然后点击“自定义表单”进入管理界面。

2、新建自定义表单：

点击“增加新的自定义表单”按钮，填写表单名称和对应的表名称（表名称用于存储表单数据，建议与模型名称对应）。

根据需求选择表单的排序规则（如按id、发布时间等）和每页显示的行数。

3、添加字段：

成功创建表单后，返回自定义表单管理界面，点击相应操作栏的“小图标”进行编辑以新增表单字段。

进入表单编辑界面，点击“添加新字段”，根据需求填写字段信息，如字段名、字段类型（文本、数字、日期等）、是否必填等。

若有多个字段，重复上述步骤添加即可。

二、前端调用自定义表单

在需要展示表单的页面模板中，使用Dede标签进行调用，具体代码格式如下：

{dede:loop table='表单名称' sort='排序规则' row='每页显示行数'}
    [field:字段名/] [field:其他字段名/] ...
{/dede:loop}

table属性指定要调用的自定义表单的名称，sort属性指定排序规则，row属性指定每页显示的行数，field标签用于输出字段的值。

三、前端提交表单

1、创建HTML表单：在前端页面中，创建一个HTML表单，包含必要的输入字段和提交按钮。

<form action="plus/diy.php" method="post" enctype="multipart/form-data">
    <input type="hidden" name="action" value="post">
    <input type="hidden" name="diyid" value="1">
    <label>姓名：</label><input type="text" id="name" name="name"><br>
    <label>电话：</label><input type="text" id="tel" name="tel"><br>
    <label>手机：</label><input type="text" id="iphone" name="iphone"><br>
    <label>邮箱：</label><input type="text" id="email" name="email"><br>
    <label>留言：</label><textarea id="liuyan" name="liuyan"></textarea><br>
    <input class="submit fr" type="button" value="提 交" onclick="add_ajaxmessage()">
</form>

action属性指定提交表单的处理文件为plus/diy.php，diyid属性指定自定义表单的ID。

2、编写JavaScript函数处理提交：引入jQuery库（如果尚未引入），并编写一个JavaScript函数来处理表单提交。

function add_ajaxmessage(){
    var name=document.getElementById("name").value;
    var tel=document.getElementById("tel").value;
    var iphone=document.getElementById("iphone").value;
    var email=document.getElementById("email").value;
    var liuyan=document.getElementById("liuyan").value;
    var dataString='name='+ name +'&tel='+ tel +'&iphone='+ iphone +'&email='+ email +'&liuyan='+ liuyan +'&dede_fields='+'name,textchar;tel,textchar;iphone,textchar;email,textchar;liuyan,multitext';
    $.ajax({
        type: "POST",
        url: "/plus/diy.php",
        data: dataString,
        success: function(data){
            alert(data); // 打印返回的PHP值
        }
    });
    return false;
}

该函数首先获取表单中各字段的值，然后将这些值拼接成一个字符串（格式为字段名=字段值，多个字段用&连接），最后通过jQuery的ajax方法将数据提交到plus/diy.php处理文件，并在成功后打印返回的结果。