layui的form.val中的单选按钮动态赋值无效解决

最新推荐文章于 2022-09-20 11:42:28 发布

昵称长度需在 2 到 20 个字符

最新推荐文章于 2022-09-20 11:42:28 发布

阅读量9.2k

点赞数 4

分类专栏： layui 文章标签： layui java 单选 form 获取

本文链接：https://blog.csdn.net/qq_39187822/article/details/89419722

版权

layui 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在使用layui的form.val对单选框进行动态赋值时发现单选框赋值无效果，经过多次排查，发现动态赋值为1,在form.val写为固定值 ‘1’ 单选框可用，动态时不行，最后只得判断值然后输出固定值，代码在下面

js代码

$.ajax({
                    url     : "接口名称",
                    data    : {
                        //参数名称
                        id  : id1
                    },
                    method  : 'POST',
                    success : function (data) {
                        console.log(data);
                        if (data.code == 0) {
                            var res = data.data;
                            //初始赋值
                            form.val('first', {
                                'id'              :   res.id,
                                'name'            :   res.name,
                                'phone'           :   res.phone,
                                                        //在数据库里面存值为0,1
                                'sex'             :   res.sex=='1'?'1':'0',
                                'isphysical'      :   res.isphysical=='1'?'1':'0',
                                'isupgrade'       :   res.isupgrade=='1'?'1':'0',
                                'islive'          :   res.islive=='1'?'1':'0',
                                'companytitle'    :   res.companytitle,
                                'card'            :   res.card,
                                'cardtype'        :   res.cardtype,
                                'address'         :   res.address,
                                'physicalstatus'  :   res.physicalstatus,
                                'hobby'           :   res.hobby,
                                'taboo'           :   res.taboo,
                                'remark'          :   res.remark,
                                'firstserver'     :   res.firstserver,
                                'sencondserver'   :   res.secondserver
                            });
                        } else {
                            layer.msg("code:"+data.code+" msg:"+data.msg);
                        }
                    },
                    error   : function () {
                        layer.msg("可能是因为网络原因操作失败了，请重试，若多次重试不成功，请于网站管理员联系");
                    }
                });

页面代码

<form class="layui-form layui-form-pane1" action="javascript:;" lay-filter="first">

    <!-- 名称 -->
    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" id="name" lay-verify="required|title" required placeholder="请输入客户名称" autocomplete="off" class="layui-input">
        </div>
    </div>

    <!-- 性别 -->
    <div class="layui-form-item">
         <label class="layui-form-label">性别</label>
         <div class="layui-input-block">
             <input type="radio" name="sex" value="0" title="男" checked>
             <input type="radio" name="sex" value="1" title="女">
         </div>
    </div>

    <!-- 联系电话 -->
    <div class="layui-form-item">
        <label class="layui-form-label">联系电话</label>
        <div class="layui-input-block">
            <input type="text" name="phone" id="phone" lay-verify="required|title" required placeholder="请输入联系电话" autocomplete="off" class="layui-input">
        </div>
    </div>

    <!-- 退休单位及职称 -->
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">退休单位及职称</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入退休单位及职称" id="companytitle" name="companytitle" class="layui-textarea"></textarea>
        </div>
    </div>

    <!-- 卡种及其补贴 -->
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">卡种</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入卡种" name="card" id="card" class="layui-textarea"></textarea>
        </div>
    </div>

    <!-- 卡类别 -->
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">卡种补贴</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入卡种补贴" name="cardtype" id="cardtype" class="layui-textarea"></textarea>
        </div>
    </div>


    <!-- 是否领取居住证 -->
    <div class="layui-form-item pane">
        <label class="layui-form-label">是否领取居住证</label>
        <div class="layui-input-block">
            <input type="radio" name="islive" value="0" title="是" checked>
            <input type="radio" name="islive" value="1" title="否">
        </div>
    </div>

    <!-- 家庭住址 -->
    <div class="layui-form-item">
        <label class="layui-form-label">家庭住址</label>
        <div class="layui-input-block">
            <input type="text" name="address" id="address" lay-verify="required|title" required placeholder="请输入家庭住址" autocomplete="off" class="layui-input">
        </div>
    </div>

    <!-- 是否体检 -->
    <div class="layui-form-item">
        <label class="layui-form-label">是否体检</label>
        <div class="layui-input-block">
            <input type="radio" name="isphysical" value="0" title="是" checked>
            <input type="radio" name="isphysical" value="1" title="否">
        </div>
    </div>

    <!-- 身体状况 -->
    <div class="layui-form-item">
        <label class="layui-form-label">身体状况</label>
        <div class="layui-input-block">
            <input type="text" name="physicalstatus" id="physicalstatus" lay-verify="required|title" required placeholder="请输入身体状况" autocomplete="off" class="layui-input">
        </div>
    </div>

    <!-- 兴趣喜好特长 -->
    <div class="layui-form-item">
        <label class="layui-form-label">兴趣喜好特长</label>
        <div class="layui-input-block">
            <input type="text" name="hobby" id="hobby" lay-verify="required|title" required placeholder="请输入兴趣喜好特长" autocomplete="off" class="layui-input">
        </div>
    </div>

    <!-- 禁忌 -->
    <div class="layui-form-item">
        <label class="layui-form-label">禁忌</label>
        <div class="layui-input-block">
            <input type="text" name="taboo" id="taboo" lay-verify="required|title" required placeholder="请输入禁忌" autocomplete="off" class="layui-input">
        </div>
    </div>

    <!-- 是否升级转介绍 -->
    <div class="layui-form-item">
        <label class="layui-form-label">是否升级转介绍</label>
        <div class="layui-input-block">
            <input type="radio" name="isupgrade" value="0" title="是" checked>
            <input type="radio" name="isupgrade" value="1" title="否">
        </div>
    </div>

    <!-- 备注 -->
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入备注" name="remark" id="remark" class="layui-textarea"></textarea>
        </div>
    </div>

    <!-- 第一服务顾问 -->
    <div class="layui-form-item">
        <label class="layui-form-label">第一服务顾问</label>
        <div class="layui-input-block">
            <input type="text" name="firstserver" id="firstserver" lay-verify="required|title" required placeholder="请输入第一服务顾问" autocomplete="off" class="layui-input">
        </div>
    </div>

    <!-- 第二服务顾问 -->
    <div class="layui-form-item">
        <label class="layui-form-label">第二服务顾问</label>
        <div class="layui-input-block">
            <input type="text" name="sencondserver" id="sencondserver" lay-verify="required|title" required placeholder="请输入第二服务顾问" autocomplete="off" class="layui-input">
        </div>
    </div>

    <br/>
    <hr>
    <br/>

    <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>

上面是我的解决方式，获取表格中性别选择代码

layui.use('form', function(){
//监听提交
            form.on('submit(*)', function(data){
                console.log(data);
                data = data.field;
                $.ajax({
                    url     : "接口名称",
                    data    : {
                        id              : data.id,
                        name            : data.name,
                        sex             : data.sex,
                        phone           : data.phone,
                        title           : data.title,
                        cardtype        : data.cardtype,
                        card            : data.card,
                        subsidy         : data.subsidy,
                        islive          : data.islive,
                        address         : data.address,
                        familystatus    : data.familystatus,
                        isphysical      : data.isphysical,
                        physicalstatus  : data.physicalstatus,
                        hobby           : data.hobby,
                        taboo           : data.taboo,
                        isupgrade       : data.isupgrade,
                        remark          : data.remark,
                        firstserver     : data.firstserver,
                        secondserver    : data.secondserver,
                        status          : data.status,
                        companytitle    : data.companytitle
                    },
                    method  : 'POST',
                    success : function (data) {
                        if (data.code == 0) {
                            layer.msg("操作成功");
                        } else {
                            layer.msg("code:"+data.code+" msg:"+data.msg);
                        }
                    },
                    error   : function () {
                        layer.msg("可能是因为网络原因操作失败了，请重试，若多次重试不成功，请与网站管理员联系");
                    }
                });
                return false;
            });

        });