I have this small table in the options column on the second button that is to edit, I would like to click on it to open a modal like the one shown below.
that I will upload the data and that I can change the values that I want according to the row that I select and that when I save it, I update the data.
According to my research, I have an idea of how to do it but I do not know how to take it to code, to say in the options column button I have to do an onclick function where I bring the data to the modal, later with ajax that I updated my table at the time of clicking on Save. I do not know where to start I could help make this function.
This is my JS:
$("#myModal1").on("click", ".modalForm", function(){
var parametros= {
"nombre" : $("input#txt_nombre").val(),
"inicio" : $("input#txt_inicio").val(),
"final" : $("input#txt_final").val(),
"ejecuta" : $("input#txt_ejecuta").val(),
"persona" : $("input#txt_persoma").val(),
"observaciones" : $("input#txt_observaciones").val()
};
Here is my table :
<table class="table table-striped">
<thead>
<th width="25%">Tipo de medida</th>
<th>Fecha inicio</th>
<th>Fecha final</th>
<th>Ejecuta</th>
<th>Persona</th>
<th>Observaciones</th>
<th>Opciones</th>
</thead>
<tbody>
@if(count($TablaProvidencia)==0)
<tr><td colspan="7" class="text-center">Sin registros</td></tr>
@else
@foreach($TablaProvidencia as $provide)
<tr>
<td>{{ $provide->providencia}}</td>
<td>{{ $provide->fechainicio }}</td>
<td>{{ $provide->fechafin }}</td>
<td>{{ $provide->ejecutor }}</td>
<td>{{ $provide->persona }}</td>
<td>{{ $provide->observacion }}</td>
<td>
<a href="{{ url('agregar-medidas/'.$provide->id.'/eliminar')}}" type="button" rel="tooltip" title="Eliminar Registro" class="btn btn-success btn-simple btn-xs">
<i class="fa fa-remove"></i></a>
<button type="button" class="btn btn-success btn-simple btn-xs" value={{$provide->id}} data-toggle="modal" data-target="#myModal1"><i class="fa fa-edit"></i></button>
</td>
</tr>
@endforeach
@endif
</tbody>
</table>
And here is my modal:
<div id="myModal1" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<!-- Modal content-->
<div class="modal-content">
<!--Cabecera del modal-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Actualizar</h4>
</div>
<!-- FORMULARIO -->
<form action="#" class="modalForm">
<!--Contenido del modal-->
<div class="modal-body">
<div class="form-group">
<div class="col-xm-6">
<input class="form-control" type="text" id="tipo_medida" name="tipo_medida" placeholder="Tipo de medida" >
</div>
</div>
<div class="form-group">
<div class="col-xm-6">
<input class="form-control " type="text" id="fecha_inicio" name="fecha_inicio" placeholder="Fecha Inicio">
</div>
</div>
<div class="form-group">
<div class="col-xm-6">
<input class="form-control" type="text" id="fecha_final" name="fecha_final" placeholder="Fecha Final" >
</div>
</div>
<div class="form-group">
<div class="col-xm-6">
<input class="form-control " type="text" id="ejecuta" name="ejecuta" placeholder="Ejecuta">
</div>
</div>
<div class="form-group">
<div class="col-xm-6">
<input class="form-control" type="text" id="persona" name="Persona" placeholder="Persona" >
</div>
</div>
<div class="form-group">
<div class="col-xm-6">
<input class="form-control " type="text" id="observaciones" name="observaciones" placeholder="Observaciones">
</div>
</div>
</div>
<!--Final del modal-->
<div class="modal-footer">
<button type="submit" id="guardar" class="btn btn-success btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Guardar</button>
</div>
</form>
<!-- FORMULARIO - END -->
</div>
</div>
</div>