How to send data from a modal bootstrap dialog to a table in mysql?

1.- Use the JQuery click event to receive the event, within the event retrieve the content of the field and validate the data if you require it.

link

2.- Once the above is done, you can send it through ajax de jquery and send it to a page where you can connect to your DB

$.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
})
  .done(function( msg ) {
    alert( "Data Saved: " + msg );
  });

    <form name="form2" method="POST" action="actualizar_lista.php">
  <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
          <h4 class="modal-title custom_align" id="Heading">Editar informacion</h4>
        </div>

        <div class="modal-body">

             <div class="form-group">
            <input class="form-control " type="text" placeholder="id" id="txt_id" name="txt_id">
          </div>

          <div class="form-group">
            <input class="form-control " type="text" placeholder="Nombre del trabajo" id="txt_nombre" name="txt_nombre">
          </div>

          <div class="form-group">
            <input class="form-control " type="text" placeholder="Costo" id="txt_costo" name="txt_costo">
          </div>


      <div class="form-group" align="center">

     <input type="submit"  class="btn btn-warning" name="btn"  id="btn" value="Actualizar"/>

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


    Archivo Actualizar_lista.php

          include("conexion.php");
          $txt_id=$_POST["txt_id"];
          $txt_nombre=$_POST["txt_nombre"];
          $txt_costo=$_POST["txt_costo"];
    $sql=mysqli_query($conexion,"update nombretabla set nombre=$txt_nombre, costo=$txt_costo where id=$txt_id");
    if ($conexion->query($sql) === TRUE) {
    echo "Actualizado Correctamente";
     }

Try not to concatenate the data entered by the user into the query, otherwise you will be vulnerable to SQLi Also, your code can be better organized if you do not mix views with backend. You can see more about separation of interests here .

edit.php

// variables
$data = json_decode($_POST['data']);
$id_trabajo = $data[0]['id_trabajo'];
$nombre_trabajo = $data[1]['nombre_trabajo'];
$costo = $data[2]['costo'];

// realiza la consulta
$query = "UPDATE trabajos SET nombre_trabajo=?, costo=? WHERE id_trabajo=?";
$pstmt = $conn->prepare($query);
$pstmt->bind_param("sdi", $id_trabajo, $nombre_trabajo, $costo);

if($pstmt->execute($pstmt)) {
  json_encode(array("status" => "OK"));
} else {
  json_encode(array(
    "status" => "FAIL",
    "error" => $conn->error
  ));
}

modal

For semantic reasons it is better to use forms even if you use AJAX. This helps to quickly identify which group of data will be sent to the server.

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <form class="modal-content" action="actualizar_trabajo.php" method="POST">
      <div class="modal-header">
        <button type="button" class="close" 
                data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Editar trabajo</h4>
      </div>
      <div class="modal-body">
          <div class="form-group">
            <input class="form-control " type="hidden" placeholder="id" name="txt_id">
          </div>
          <div class="form-group">
            <input class="form-control " type="text" placeholder="Nombre del trabajo" name="txt_nombre">
          </div>
          <div class="form-group">
            <input class="form-control " type="text" placeholder="Costo" name="txt_costo">
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        <button type="submit" class="btn btn-primary">Guardar</button>
      </div>
    </form>
  </div>
</div>

JavaScript

$('.modal form').on('submit', function(e) {
  e.preventDefault();
  $.ajax({
    url: $(this).attr('action'),
    type: $(this).attr('method'),
    data: { data: $(this).serializeArray() }
  })
  .done(function(response) {
    if(response.status === "OK") {
      $('.modal').modal('hide');
    } else {
      // mostrar el error al usuario
    }
  });
});

It is considered necessary to add the name attribute for each of the form's fields, so that the values can be taken through the array $ _POST ['field_name']:

<input class="form-control " type="text" placeholder="id" id="txt_id" name="txt_id">

If it were my case, I would use ajax.

Sorry for not appending example. But I attach a page that helped me in time to do something similar to your question link