Create manual submit button for Laravel Collective Form

Question

I'm developing a Laravel application, which uses set of Forms. Here I'm changing the form type when dropdown item selected. Here is a code snippt for that blade view.

@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')}} width="190" alt="User Avatar" 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

Here using Jquery I'm only changing the contents under <div id="uiElementForm" class="modal-body"> NOT the <div class="modal-footer">

But after doing that the submit button doesn't works, While I cannot put submit button inside of the <div id="uiElementForm" class="modal-body">. Is there any solution for this.

Answer 1

Try to open form before div id uiElementForm

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