dede自定义表单实现分步提交，也就是可以下一步下一步

Posted 2023-04-27

各位大侠好，小弟在此请教一个问题，就是利用dedecms建站有个表单，客户需要分页提交，请各位大侠赐教。不胜感激

比如你有六个表单分两次提交：
<form action="diy.php">
表单一
表单二
表单三
submit后跳转到下一页，获取本次提交的id
</form>
下一页表单根据上次提交的表单id填充值为空的表单
<form action="diy.php">
表单四
表单五
表单刘
submit后直接显示成功
</form>

参考技术A 在织梦里面自定义表单，然后预览这个表单，把源码拷贝到另外一个文件里面，自己修改成你想要实现的效果，提交的时候就会提交到后台里面。 参考技术B 没见过哪个网站把一个表单设计成分页提交的。建议和客户说明问题解决。 参考技术C 分页提交我倒是没见过，都是在一个页面上的

smartwizard 点击提交按钮后界面被刷新

项目中用到了smartwizard，对用户的入网配置进行了分步操作

这个插件给的范例中除了提供上一步下一步之外, 还可以添加其他的按钮

我这边额外添加了两个按钮，分别是提交和关闭

点击提交按钮时，异步向后台提交数据，步骤配置代码如下：

$(‘#smartwizard‘).smartWizard({
        selected: 0,
        theme: ‘dots‘,
        cycleStep: false,
        transitionEffect:‘fade‘,
        keyNavigation: false,
        showStepURLhash: false,
        toolbarSettings: {toolbarPosition: ‘bottom‘,
            toolbarExtraButtons: [btnFinish, btnCancel]
        },
        lang : {
            next: ‘下一步‘,
            previous: ‘上一步‘
        }

    });

btnFinish和btnCancel分别对应的就是上述的[提交]和[关闭] 按钮, 按钮对应的方法如下：

var btnFinish = $(‘<input type="button" id="btnFinish"></input>‘).addClass(‘btn btn-info‘).on(‘click‘, function(){    
    var mask;
    $.ajax({
        type: "POST",
        url: ‘/xxx‘,
        data: {corpId: "123"},
        dataType: ‘json‘,
        async: false,
        cache: false,
        beforeSend: function() {
            mask = layer.load(0, {
                shade: [0.7, ‘#393D49‘]
            },
            {
                shadeClose: true
            }); //0代表加载的风格，支持0-2
        },
        success: function(data) {
            var jsonData = eval(data);
            if (jsonData.code == ‘10000‘) {
                layer.alert(‘配置成功‘, {
                    icon: 1
                });
                $(‘#reportTable‘).bootstrapTable(‘refresh‘);
            } else {
                layer.alert(jsonData.msg, {
                    icon: 2
                });
            }
            layer.close(configLayer);
            layer.close(mask);
        },
        error: function(data) {
            alert("error");
            $(‘#reportTable‘).bootstrapTable(‘refresh‘);
        }
    })
});

碰到的问题：

1. 点击提交按钮和关闭按钮后, 界面被刷新

根据https://bbs.csdn.net/topics/391852021中4楼的回答

将上面代码标红的地方修改为如下代码，问题虽好了，但是我明明有给设置value值呀.. 咋button就没名字了：最终显示效果是button有了，但是button中没有值了..

<input type="button" id="btnFinish" value="提交"></input>

解决办法是：在初始化smartWizard控件后给这两个button赋值（手动笑脸??）

我这边的分步操作的界面是放在模态框中的，当模态框打开成功后我就给两个button的value赋值

$(‘#btnFinish‘).val("提交");
$(‘#btnCancel‘).val("关闭");