您现在的位置是： 首页前端

layui form点击单选显示不同元素且获取部分表单

发布时间：2023-09-13作者：冰貂主人点击：64

<form class="layui-form " >
                        
    <div class="layui-form-item">
        <label class="layui-form-label">AI接口：</label>
        <div class="layui-input-block">
            <input type="radio"  {eq name="$chatgpt_data.channel" value='baidu'}checked{/eq}{eq name="$chatgpt_data.channel" value=''}checked{/eq} value="baidu" title="文心一言" name="channel" class="layui-input channel_rad"
            lay-filter="channel_ra">
            <input type="radio" {eq name="$chatgpt_data.channel" value='api2d'}checked{/eq} value="api2d" title="API2d" name="channel" class="layui-input channel_rad" lay-filter="channel_ra">
            
        </div>
        
    </div>
    <div class="channel_radio channel_baidu" {eq name="$chatgpt_data.channel" value=''}style="display:block;"{/eq} {eq name="$chatgpt_data.channel" value='baidu'}style="display:block;"{/eq}>
        <div class="layui-form-item">
            <label class="layui-form-label">温度(temperature)：</label>
            <div class="layui-input-block" >
                <input type="text" value="{$chatgpt_data.temperature}" name="baidu_temperature" class="layui-input" >

            </div>
        </div>
        
    </div>
    <div class="channel_radio channel_api2d" {eq name="$chatgpt_data.channel" value='api2d'}style="display:block;"{/eq}>
        <div class="layui-form-item">
            <label class="layui-form-label">温度(temperature)：</label>
            <div class="layui-input-block" >
                <input type="text" value="{$chatgpt_data.temperature}" name="api2d_temperature" class="layui-input" >

            </div>
        </div>
        
    </div>                            
    <div class="layui-form-item">
          <label class="layui-form-label">关联知识库</label>
          <div class="layui-input-block">
             {volist name="book_list" id="vo"}
            <input type="checkbox" lay-verify='required' name="books" title="{$vo.title}"  class="layui-input" value="{$vo.id}"  >
             {/volist}
          </div>
        </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <button class="layui-btn btn-submit" lay-submit lay-filter="form_gpt">提交</button>
        </div>
    </div>
</form>
<script type="text/javascript">

    layui.use(['form','upload'],function(){
        var form=layui.form;
        var upload=layui.upload;
        form.on('submit(form_gpt)',function(e){
            newsfields={};
            if(e.field.channel=='baidu'){
                newsfields.channel='baidu';
                newsfields.temperature=e.field.baidu_temperature;
                newsfields.model=e.field.baidu_model;
               purview=[];
               $('input[name=books]:checked').each(function() {
                 purview.push(parseInt($(this).val()));
               });   
              if(purview==''){
                layer.msg('关联知识库不能为空');
                return false;
              }
              e.field.books=purview;
              newsfields.books=e.field.books;
            }
            if(e.field.channel=='api2d'){
                newsfields.channel='api2d';
                newsfields.temperature=e.field.api2d_temperature;
                newsfields.model=e.field.api2d_model;
                newsfields.max_tokens=e.field.api2d_max_tokens;
            }
            
            fields=JSON.stringify(newsfields);
            $.ajax({
                type:'post',
                url:"__URL__/index",
                data:{val:fields,'type':submitbtn},
                beforeSend: function (xhr) {
                   loading=layer.load(1,{shade:[0.3,'#000']});
                },
                success:function(data){
                    if(data.code==1000){
                        layer.msg(data.msg,{icon:1,time:1000},function(){ location.reload();  });

                    }else{
                        layer.msg(data.msg,{icon:2});
                    }
                    layer.close(loading);
                }               
            })
            return false;
        })                       
        
        // 渠道单选
        form.on('radio(channel_ra)', function(data){
              $(".channel_"+data.value).css('display','block').siblings('.channel_radio').css('display','none');
              
        });  
    })

</script> 

标签：
阿里云免费试用