请问提交多行name相同的表单如何取数据?

提问 未结 10 267
大笨狗
悬赏:20飞吻
版本:layuiAdmin 浏览器:
问题:请问提交多行name相同的表单如何取数据?
界面如下:

现在的情况只能取到最后一行的数据,请高手指点。

之前没有使用layui的时候我是这么处理的:
    function getpara($form) {
var form = $form;
var formMethod = form.attr("method");
if (formMethod == null || !/^(POST|GET)$/i.test(formMethod.trim())) {
formMethod = "GET"
}
var params = new Object();
var items = form.find("input[type=hidden]," + "input[type=text]," + "input[type=password]," + "textarea," + "select," + "input[type=radio]:checked," + "input[type=checkbox]:checked");
items.each(function(index) {
if (params[this.name] == undefined) {
params[this.name] = this.value
} else {
params[this.name] += "," + this.value
}
});

return params;
}
回帖
  • table.cache[layTableId] 获取表格所有数据啊
    0 回复
  • 爱认真
    2020-2-20
    思路: 将表单数据系列化,之后再提价

    代码:
    var fields=$(data.form).serialize();
    例子:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>layui.form小例子</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    </head>
    <body>
    <form class="layui-form" lay-filter="formTest"> <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
    <label class="layui-form-label">输入框1</label>
    <div class="layui-input-block">
    <input type="text" name="myName" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">输入框2</label>
    <div class="layui-input-block">
    <input type="text" name="myName" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">输入框3</label>
    <div class="layui-input-block">
    <input type="text" name="myName" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">输入框4</label>
    <div class="layui-input-block">
    <input type="text" name="myName" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">输入框5</label>
    <div class="layui-input-block">
    <input type="text" name="myName" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
    </div>
    <div class="layui-form-item">
    <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    </form>
    <script src="layui/layui.js"></script>
    <script>
    layui.use(['form', 'jquery'], function(){
    var $ = layui.jquery;
    var form = layui.form;

    //各种基于事件的操作,下面会有进一步介绍
    form.on('submit(*)', function(data){
    var fields=$(data.form).serialize();
    console.log(data1) //当前容器的全部表单字段
    return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
    });
    });
    </script>
    </body>
    </html>
    0 回复
  • @白手起家想发财 关键是用不上,在上面个页面传递过来的data里面就只有最后一行数据。
    详细代码如下:
    iframeWindow.layui.form.on('submit(LAY_kpi_front_submit)', function (data) {
    var field = data.field; //获取提交的字段
    var action = "insert";
    if(data.field['kpi_id'] != ""){
    action = "update";
    }
    //提交 Ajax 成功后,静态更新表格中的数据
    $.ajax({
    type: "POST",//方法类型
    dataType: "json",//预期服务器返回的数据类型
    url: layui.setter.rootPath + "index.php?p=admin&c=kpi&a=disposeKpi&action="+action,//url
    data: field,
    success: function (data) {
    if (data.result) {
    layer.alert(data.message);
    initTree();
    table.reload('LAY_kpi_Manage_myKpi');
    layer.close(index); //关闭弹层

    } else {
    layer.alert(data.message);
    }
    },
    error: function (xhr, status, err) {
    alert("发生未知错误,请联系管理员!" + xhr + "==" + status + "---" + err);
    }
    });

    });
    麻烦再给看看是什么问题?
    0 回复
  • CrazyYi
    2020-2-20
    @大笨狗
    用序列化等办法是不行的。
    因为layui form,内部已经处理了所有的数据。相同name 的,后面会覆盖前面的。所以就变成只获取最后一个了。

    建议做法:
    1、比如你的name=“username”,你可以在渲染前,改变 name = "username[0]",后面的数字是行号(下标)。
    2、这样比如你有3行,获取之后,form.on 里面带过来的data.field = {"username[0]":第一个名字,“username[1]”:第二个名字,"username[2]":第三个名字} 这样一个数据。
    3、你就可以写一个通用的方法,循环获取出来。至于你要怎么整合,就是你自己的事情了。

    ——此方法,参考checkbox 获取的值的做法。供参考
    0 回复
  • CrazyYi
    2020-2-20
    这个的思路就是:
    在同一个form 下面,要把name 区分开来。否则就会后面的覆盖前面的。
    0 回复
  • CrazyYi
    2020-2-20
    注意:你也不能给每一行单独设置一个子form。因为看你的案例,你右下角的按钮,应该是在一个form 下面。form下面的子form里面包含的元素,都会算到父级form去。
    0 回复
  • @CrazyYi 这样做是可以的,但比较复杂,因为我的行也是动态增加的,当中间删除行,我需要重新去更新下标。
    0 回复
  • CrazyYi
    2020-2-21
    @大笨狗 并不需要更新下标,因为你并不是需要精确的下标。你只是需要能够区分而已。
    0 回复
  • 冷殇o
    2020-2-21
    我做过table的新增一行和删除一行,用的是数据表格,不是静态表格,数据表格的data模式,获取整个表格的全部数据之后,for循环一行一行取出来拼接成后台需要的对象,再传给后台,这个对象是{{},[{},{},{}]}这种格式的,后台再取出来分别处理。
    0 回复
  • @CrazyYi 已解决,最后还是增加了form,借助jquery的特性来解决,name相同,解决起来比较方便一些。
    0 回复