How can I update a form with ajax in laravel?

0

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">&times;</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>
    
asked by Julio Vásquez Díaz 23.04.2018 в 15:59
source

0 answers