您现在的位置是：技术博客 > PHPPHP

fastadmin表单之单选切换

Lucas2022-11-14 16:47【代码】74人已围观

简介点击表单中的单选按钮，显示不同的底部表单元素，要求提交表单的时候不能将隐藏的元素提交到后台。

实现如下图所示功能，要求，点击类型选择“内页”,“webview”,“小程序”,“拨打电话”时，分别展示不同的底部表单内容。
![](/upload/202504/01/article/image/6e4a2de8b0990c048e8a729f5ca87a0b.png)

add方法对应的html代码
```
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Adverttype')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="radio">
            {foreach name="advertTypeList" item="vo"}
            <label for="row[adverttype]"><input id="row[adverttype]-{$key}" name="row[adverttype]" class="modes" type="radio" value="{$key}" {if condition="$key == 'inside_page'"}checked{/if} /> {$vo}</label>
            {/foreach}
            </div>
        </div>
    </div>
    <input type="hidden" name="row[store_id]" value="{$store_id}">
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Devicetype')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="checkbox">
            {foreach name="deviceTypeList" item="vo"}
            <label for="row[devicetype]"><input id="row[devicetype]-{$key}" name="row[devicetype][]" type="checkbox" value="{$key}" {in name="key" value="dates"}checked{/in} /> {$vo}</label>
            {/foreach}
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Title')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-link" class="form-control" name="row[title]" type="text" data-rule="required" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Coverimg')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-image" data-rule="" class="form-control" placeholder="推荐尺寸：750 x 350" size="50" name="row[coverimg]" data-rule="required" type="text" value="">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-image" class="btn btn-danger faupload" data-input-id="c-image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-image"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-image"></ul>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Streamerimg')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-image1" data-rule="" class="form-control" placeholder="推荐尺寸：750 x ?" size="50" name="row[streamerimg]" data-rule="required" type="text" value="">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-image1" class="btn btn-danger faupload" data-input-id="c-image1" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-image1"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-image1" class="btn btn-primary fachoose" data-input-id="c-image1" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-image1"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-image1"></ul>
        </div>
    </div>
    <div class="form-section" data-type="inside_page">
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('页面')}:</label>
            <div class="col-xs-12 col-sm-8">
                <select  id="c-type" class="form-control selectpicker" name="row[link]">
                    {foreach name="wechatInsidePageList" item="vo"}
                        <option value="{$key}">{$vo}</option>
                    {/foreach}
                </select>
            </div>
        </div>
    </div>
    <div class="form-section" data-type="webview" style="display:none">
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('链接')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-link" class="form-control" name="row[link]" type="text" value="">
            </div>
        </div>
    </div>
    <div class="form-section" data-type="mini_app" style="display:none">
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('小程序页面路径')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-link" class="form-control" name="row[link]" type="text" value="">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Mini_appid')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-mini_appid" class="form-control" name="row[mini_appid]" type="text" value="">
            </div>
        </div>
    </div>
    <div class="form-section" data-type="call_phone" style="display:none">
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Phone')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-link" class="form-control" name="row[link]" type="text" value="">
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-weigh" data-rule="required" class="form-control" name="row[weigh]" type="number" value="0">
        </div>
    </div>
    <div class="form-group">
        <label for="c-status" class="control-label col-xs-12 col-sm-2">{:__('Is_index_pop')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:build_radios('row[is_index_pop]', ['0'=>__('否'), '1'=>__('是')])}
        </div>
    </div>
    <div class="form-group">
        <label for="c-status" class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:build_radios('row[status]', ['normal'=>__('Normal'), 'hidden'=>__('Hidden')])}
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
        </div>
    </div>
</form>

```
edit方法对应的html
```
<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Adverttype')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="radio">
            {foreach name="advertTypeList" item="vo"}
            <label for="row[adverttype]"><input id="row[adverttype]-{$key}" name="row[adverttype]" class="modes" type="radio" value="{$key}" {if condition="$key == $row.adverttype"}checked{/if} /> {$vo}</label>
            {/foreach}
            </div>
        </div>
    </div>
    <input type="hidden" name="row[store_id]" value="{$row.store_id|htmlentities}">
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Devicetype')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="checkbox">
            {foreach name="deviceTypeList" item="vo"}
            <label for="row[devicetype]"><input id="row[devicetype]-{$key}" name="row[devicetype][]" type="checkbox" value="{$key}" {if condition="in_array($key,explode(',',$row['devicetype']))"}checked{/if} /> {$vo}</label>
            {/foreach}
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Coverimg')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-image" data-rule="" class="form-control" size="50" name="row[coverimg]" data-rule="required" type="text" value="{$row.coverimg|htmlentities}">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-image" class="btn btn-danger faupload" data-input-id="c-image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-image"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-image"></ul>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Streamerimg')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-image1" data-rule="" class="form-control" size="50" name="row[streamerimg]" data-rule="required" type="text" value="{$row.streamerimg|htmlentities}">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-image1" class="btn btn-danger faupload" data-input-id="c-image1" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-image1"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-image1" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-image1"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-image1"></ul>
        </div>
    </div>
    <div class="form-section" data-type="inside_page" {if condition="$row['adverttype'] != 'inside_page'"}style="display:none"{/if}>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('页面')}:</label>
            <div class="col-xs-12 col-sm-8">
                <select  id="c-type" class="form-control selectpicker" name="row[link]">
                    {foreach name="wechatInsidePageList" item="vo"}
                        <option value="{$key}" {if condition="$row['adverttype'] == 'inside_page' && $key == $row['link']"}selected{/if}>{$vo}</option>
                    {/foreach}
                </select>
            </div>
        </div>
    </div>
    <div class="form-section" data-type="webview" {if condition="$row['adverttype'] != 'webview'"}style="display:none"{/if}>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('链接')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-link" class="form-control" name="row[link]" type="text" value="{if condition="$row['adverttype'] == 'webview'"}{$row.link|htmlentities}{/if}">
            </div>
        </div>
    </div>
    <div class="form-section" data-type="mini_app" {if condition="$row['adverttype'] != 'mini_app'"}style="display:none"{/if}>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('小程序页面路径')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-link" class="form-control" name="row[link]" type="text" value="{if condition="$row['adverttype'] == 'mini_app'"}{$row.link|htmlentities}{/if}">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Mini_appid')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-mini_appid" class="form-control" name="row[mini_appid]" type="text" value="{if condition="$row['adverttype'] == 'mini_app'"}{$row.mini_appid|htmlentities}{/if}">
            </div>
        </div>
    </div>
    <div class="form-section" data-type="call_phone" {if condition="$row['adverttype'] != 'call_phone'"}style="display:none"{/if}>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('Phone')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-link" class="form-control" name="row[link]" type="text" value="{if condition="$row['adverttype'] == 'call_phone'"}{$row.link|htmlentities}{/if}">
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Weigh')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-weigh" data-rule="required" class="form-control" name="row[weigh]" type="number" value="{$row.weigh|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label for="c-status" class="control-label col-xs-12 col-sm-2">{:__('Is_index_pop')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:build_radios('row[is_index_pop]', ['0'=>__('否'), '1'=>__('是')], $row['is_index_pop'])}
        </div>
    </div>
    <div class="form-group">
        <label for="c-status" class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:build_radios('row[status]', ['normal'=>__('Normal'), 'hidden'=>__('Hidden')], isset($row['status']) ? $row['status'] : 'hidden')}
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
        </div>
    </div>
</form>
```

js代码
```
result:function(){
    
    modechange();
    //类型切换
    $('.modes').click(function(){
        modechange();
    })
    function modechange(){
        var selectedType = $("input[name='row[adverttype]']:checked").val();
        console.log('adverttype',selectedType);
        // 隐藏所有表单部分
        $('.form-section').hide();
        $('.form-section:hidden :input').prop('disabled', false);
        // 显示选中的表单部分
        $('.form-section[data-type="' + selectedType + '"]').show();
        $('.form-section:hidden :input').prop('disabled', true);
        
    }
},
add: function () {
    this.result();
    Controller.api.bindevent();
},
edit: function () {
    this.result();
    Controller.api.bindevent();
},
api: {
    bindevent: function () {
        
        Form.api.bindevent($("form[role=form]"));
    }
}
```

很赞哦！ ( 0 )

上一篇：fastadmin开发记录

下一篇：redis实现防止库存超量