Laravel Bootstrap Модальная кнопка отправки не работает - PullRequest
Новая
       11

Laravel Bootstrap Модальная кнопка отправки не работает

0 голосов
/ 27 августа 2018

Я схожу с ума, пытаясь заставить модальное окно вернуть элемент управления на мой взгляд. Тип кнопки - отправить, но он не запускает маршрут. Я видел несколько уроков, и все, что мне нужно сделать для создания, это определить действие как маршрут и иметь кнопку отправки. Я видел это, не нужно ajax, или я не знаю, когда они написали код ... Я пошел на w3c и там, на "попробуй сам", я нажал кнопку отправки, и по сути окно не закрыто. Так что я полностью застрял, была бы признательна за помощь.

Часть моего взгляда 

    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
        <h1 class="h5">Horarios</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
          <div class="btn-group mr-2">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#create-horario">+</button>

            <div class="modal fade" id="create-horario" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" >
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="ModalLabel">Nuevo horario</h5>                      
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>


                  </div>

                  <form action="{{ route('horarioperiodicos.store')}}" method="post">
         <!--           {{ method_field('patch')}} -->
                    {{ csrf_field() }}

                    <div class="modal-body">


                      <div class="form-group">
                        <label for="diaSemana" class="col-form-label">Día de la semana</label>
                        <select name="diaSemana" class="form-control">
                          <option value="1"  selected> Lunes</option>
                          <option value="2"  > Martes</option>
                          <option value="3"  > Miércoles</option>
                          <option value="4"  > Jueves</option>
                          <option value="5"  > Viernes</option>
                          <option value="6"  > Sábado</option>
                          <option value="7"  > Domingo</option>
                          </select> 
                      </div>


                      <div class="form-group">
                        <div style="width:50%;float:left;display:inline-block;">
                          <label for="HoraInicio" class="col-form-label">Hora de inicio</label>
                          <input type="time" id="HoraInicio" name="HoraInicio" min="9:00" max="18:00" value="09:00" >
                        </div>
                        <div align="right">
                          <label for="HoraFin" class="col-form-label">Hora de fin</label>
                          <input type="time" id="HoraFin" name="HoraFin" min="9:00" max="18:00" value="10:00">
                        </div>
                      </div>


                    </div>
                   </form>

                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-primary" id="submitForm">Guardar</button>
                  </div>
                </div>
              </div>
            </div>  



          </div>
        </div>
      </div>



    <table class="table">
      <thead class="thead-light">
        <tr>
          <th>Día</th>
          <th>Hora de inicio</th>
          <th>Hora de fin</th>        
          <th>Cambios</th>
       </tr>
      </thead>
      <tbody>

        @foreach($horarioPeriodicos as $horario)
          <tr>
            <td>  

              @switch( $horario->intDia )
                  @case( 1 )
                      Lunes
                    @break
                  @case( 2 )
                      Martes
                  @case( 3 )
                      Miércoles
                    @break
                  @case( 4 )
                      Jueves
                  @case( 5 )
                      Viernes
                  @case( 6 )
                      Sábado
                  @default
                      Domingo
                    @break
              @endswitch

            </td>
            <td> {{ $horario->timHoraInicio }} </td>
            <td> {{ $horario->timHoraFin }} </td>
            <td>
              <button class="btn btn-sm btn-outline-secondary">-</button> / 
              <button class="btn btn-sm btn-outline-secondary">Editar</button>
            </td>
          </tr>
        @endforeach


      </tbody>
    </table>




    </main>

HorarioPeriodicosController (не доходите до него, и он в моем списке) 

public function store(Request $request)
{
    //
    dd(1);
}

Мой список маршрутов

Я попытался изменить это 

                  <form action="{{ route('horarioperiodicos.store')}}" method="post">
                    {{ method_field('patch')}}

для этого 

                  <form action="{{ route('horarioperiodicos.store')}}" >

и т. Д. И т. П.

Что-то редкое в том, что даже когда я меняюсь там, он не запускает ошибки.

Большое спасибо

1 Ответ

0 голосов
/ 27 августа 2018

Вам необходимо поместить <button> внутри элемента <form>.

В противном случае форма не будет запущена для отправки.

В качестве альтернативы вы можете поместить кнопку вне формы, но вам нужно включить атрибут form=, который соответствует атрибуту id= формы в элементе кнопки: 

<form id="myform" method="post" action="{{ route('store.create') }}">
    <input type="text" name="name" />
</form>

<input type="submit" form="myform" />
...