2017-11-21 10 views
2

Forms 집합을 사용하는 Laravel 응용 프로그램을 개발하고 있습니다. 여기서 드롭 다운 항목을 선택하면 양식 유형이 변경됩니다. 다음은 해당 블레이드보기에 대한 코드 스 니펫입니다. jQuery를 사용하여 여기에 Laravel Collective Form에 대한 수동 제출 버튼을 만듭니다.

@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 

는 난 단지 <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"> 
+0

와우 감사 톤 전에 양식을 열어보십시오. 그것은 잘 작동했다. –