Laravel Bootstrap Modal Submit button not working - laravel

Question

I'm crazy trying to make a modal window return the control to my view. The button type is submit but it doesn't launch the route. I've seen some tutorials and there, all I have to do for create is to define action as the route and have a submit button. I've seen that, no need of ajax, or I'm not aware when they wrote the code... I went to w3c and there at the "try it yourself" I agregated the submit button, and effectively the window is not closed. So I'm totally stuck, some help would be appreciated.
Part of my view
<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">×</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 (don't get to it and is in my rotes list)
public function store(Request $request)
{
//
dd(1);
}
My routes list
I tryed modifying this
<form action="{{ route('horarioperiodicos.store')}}" method="post">
{{ method_field('patch')}}
for this
<form action="{{ route('horarioperiodicos.store')}}" >
etc, etc.
Something rare is that even when I do changes there, It doesn't launch errors.
Thanks a lot

Answer 1

You need to place your <button> inside of the <form> element.
Otherwise the form will not be triggered to submit.
Alternatively you can place the button outside of the form, but you need to include the form= attribute that corresponds with the form's id= attribute in the button element:
<form id="myform" method="post" action="{{ route('store.create') }}">
<input type="text" name="name" />
</form>
<input type="submit" form="myform" />