为 Laravel 集体表单创建手动提交按钮

Posted 2023-03-14

【中文标题】为 Laravel 集体表单创建手动提交按钮

【英文标题】：Create manual submit button for Laravel Collective Form

【发布时间】：2018-05-04 12:15:25

【问题描述】：

我正在开发一个 Laravel 应用程序，它使用一组表单。在这里，我在选择下拉项目时更改表单类型。这是该刀片视图的代码片段。

@extends('layout.app')

@section('content')

<script>
    var machine_id = "$id";
</script>

<div class="mq-panel-body">

    @foreach(json_decode($machine_components, true) as $value)
        <a class='compon' id="$value['id']"  data-toggle="modal" data-target="#myModal1" id="trigger-btn" href="#" onclick="return theFunction(this.id);">
            <div class="mq-friends thumbnail">
                <div class="mq-friends-footer">
                    <small> $value['component_name'] </small>
                </div>
            </div>
        </a>
    @endforeach


    <a id="m7" data-toggle="modal" data-target="#myModal" id="trigger-btn" href="">
        <div class="mq-friends thumbnail">
            <div class="text-center">
                <img src=asset('images/plus_icon.png')   class="img-circle">
            </div>
            <div class="mq-friends-footer">
                <small>Add New</small>
                <small> $id </small>
            </div>
        </div>
    </a>

</div>

<div class="modal fade modal-fullscreen" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="form-group col-md-4 pull-right">
                    <select class="form-control" id="selectUiElement">
                        <option selected="selected" value="1">Gauge</option>
                        <option value="2">Indicator</option>
                        <option value="3">Toggle Button</option>
                        <option value="4">Stack Indicator</option>
                    </select>
                </div>

                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div id="uiElementForm" class="modal-body">
                <div class="col-md-8 col-lg-8">
                    <div>
                        <h1>Create New Gauge</h1>
                        <h1>$id</h1>

                    </div>
                    <br>
                    !! Form::open(['url' => url("/addNewComponent/$id")]) !!

                     Form::hidden('type', 'gauge') 

                    <div class="form-group">
                        Form::label('Component name', 'Component name')
                        Form::text('component_name', '',['class'=>'form-control', 'placeholder'=>'Component name to display'])
                    </div>

                    <div class="form-group">
                        Form::label('Start value', 'Start value')
                        Form::number('Start value','', ['class'=>'form-control'])
                    </div>

                    <div class="form-group">
                        Form::label('End value', 'End value')
                        Form::number('End_value','', ['class'=>'form-control'])
                    </div>

                    <div class="form-group">
                        Form::label('Unit', 'Unit')
                        Form::text('unit', '',['class'=>'form-control', 'placeholder'=>'Define unit here'])
                    </div>

                    <div class="form-group">
                        Form::label('Mqtt_topic', 'Mqtt_topic')
                        Form::text('topic', '', ['class'=>'form-control' , 'placeholder'=>'Mqtt topic'])
                    </div>

                    <div class="form-group">
                        Form::label('IP', 'IP')
                        Form::text('ip', '',['class'=>'form-control', 'placeholder'=>'IP address'])
                    </div>

                    <div class="form-group">
                        Form::label('port', 'port')
                        Form::number('port','', ['class'=>'form-control'])
                    </div>

                    <div class="form-group">
                        Form::label('time_interval', 'Time interval for fetch data')
                        Form::number('time_interval','', ['class'=>'form-control'])
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                --<button type="button" class="btn btn-primary">Save changes</button>--
                Form::submit('submit', ['class'=>'btn btn-primary'])
            </div>
            !! Form::close() !!
        </div>
    </div>
</div>
@endsection

这里使用 Jquery 我只是更改 <div id="uiElementForm" class="modal-body"> 下的内容，而不是 <div class="modal-footer">

但是这样做之后提交按钮不起作用，虽然我不能将提交按钮放在<div id="uiElementForm" class="modal-body"> 内。有什么解决办法吗？

【参考方案1】：

尝试在 div id uiElementForm之前打开表单

!! Form::open(['url' => url("/addNewComponent/$id")]) !!
<div id="uiElementForm" class="modal-body">