title: can't get value from input fields in bootstrap modal on a jquery post call
body: <p>I was trying to get the value of a couple of fields in a bootstrap modal and then have them sent via $.post call to a php script that sends an email and responds true if the email has been correctly sent or false otherwise.</p>
  
  <p>I can't get those values...fields are always sent empty (or with the default value in case of a "select". I do not understand why. I ahve also tried to have the fields and the $.post call instantiated on modal show (sho.bs.modal), but nothing changes.</p>
  
  <p>Here is my code...any hint?</p>
  
  <p><strong>HTML</strong></p>
  
  <p><em>SELECTOR</em></p>
  
  <pre><code>&lt;select name="stato" data-recordid="1469" data-recordcustomername="John Snow" data-recordcustomerid="416" data-recordmailuser="info@ccustmeremail.com" class="statuschanger form-control" required=""&gt;
      &lt;option value=""&gt;Choose...&lt;/option&gt;
      &lt;option value="1"&gt;Working on&lt;/option&gt;
      &lt;option value="2"&gt;Ready&lt;/option&gt;
      &lt;option value="3" selected=""&gt;Shipped with courier&lt;/option&gt;
      &lt;option value="4"&gt;Delivered&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><em>MODAL</em></p>
  
  <pre><code>    &lt;div class="modal fade" id="modaleSent" tabindex="10" role="dialog" data-focus-on="input:first" style="display: none;"&gt;
          &lt;div class="modal-dialog" role="document"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;h3 class="modal-title"&gt;Invio messaggio di Tracking&lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;    
                      &lt;div id="modaleSentContent"&gt;    
                          &lt;div id="nomeCliente" class="blocchiModale"&gt;&lt;/div&gt;
                          &lt;div id="emailCliente" class="blocchiModale"&gt;&lt;/div&gt;
                          &lt;div id="ordineCliente" class="blocchiModale"&gt;&lt;/div&gt;
                          &lt;div id="formTracking" class="blocchiModale"&gt;
                              &lt;form id="sendtrack"&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label for="track"&gt;Tracking number:&lt;/label&gt;
                                      &lt;input type="text" class="form-control" id="track" name="track"&gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label for="corrieri"&gt;Choose courier:&lt;/label&gt;
                                      &lt;select class="form-control" id="corrieri" name="corrieri"&gt;
                                          &lt;option value="brt"&gt;BRT&lt;/option&gt;
                                          &lt;option value="dhl"&gt;DHL&lt;/option&gt;
                                          &lt;option value="sda"&gt;SDA&lt;/option&gt;
                                          &lt;option value="tnt"&gt;TNT&lt;/option&gt;
                                          &lt;option value="ups"&gt;UPS&lt;/option&gt;
  
                                      &lt;/select&gt;
                                  &lt;/div&gt;
                                  &lt;input type="hidden" value="" name="cliente" id="hcliente"&gt;
                                  &lt;input type="hidden" value="" name="ordine" id="hordine"&gt;
                                  &lt;input type="hidden" value="" name="emailcliente" id="hemailcliente"&gt;
                                  &lt;button type="submit" class="btn btn-default" id="sendtrackbtn"&gt;Invia ora&lt;/button&gt;
                              &lt;/form&gt;                                 
                          &lt;/div&gt;
  
                          &lt;div id="sentmsg" class="blocchiModale"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-info iscriviti" data-dismiss="modal"&gt;OK&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>                $('#tblOrders').on('change', '.statuschanger', function(){
  
                  var record = $(this).attr('data-recordid');
                  var cliente = $(this).attr('data-recordcustomername');
                  var email = $(this).attr('data-recordmailuser');
                  var clienteid = $(this).attr('data-recordcustomerid');
                  var ostatus = $(this).val();
                  var cella = $(this).parent().parent();
  
                  console.log('Updated record: '+record);
  
                  $.post(
                  "order_status.php",
                  {
                      id:record,
                      stato:ostatus
                  },
                  function(data,status)
                  {
                      if(data)
                      {   
                          console.log(data);
                          if(data.esito == 1)
                          {
                              // $("#msgcontainer").html('&lt;div class="alert alert-success"&gt;Operazione correttamente eseguita!&lt;/div&gt;&lt;hr&gt;');
  
                              console.log('Record aggiornato corretamente! ID: '+record);
  
                              var originalcolor = cella.css("background");
                              cella.css("background", "#449D44");
                              setTimeout(function(){
                                  cella.css("background", originalcolor);
                              }, 1000);
                              //console.log(cella.attr('class'));
  
  
                              if(ostatus == 3)
                              {
                                  console.log('dovrebbe aprire una modale');
  
                                  $("#modaleSentContent").find("#nomeCliente").html('&lt;strong&gt;Cliente&lt;/strong&gt;: '+cliente);
                                  $("#modaleSentContent").find("#hcliente").val(cliente);
                                  $("#modaleSentContent").find("#emailCliente").html('&lt;strong&gt;Email&lt;/strong&gt;: '+email);
                                  $("#modaleSentContent").find("#hemailcliente").val(email);
                                  $("#modaleSentContent").find("#ordineCliente").html('&lt;strong&gt;Ordine&lt;/strong&gt;: '+record);
                                  $("#modaleSentContent").find("#hordine").val(record);
  
                                  $("#modaleSentContent").find("#sentmsg").html();
                                  //$('#modaleSent').modal('show');
  
  
                                  $('#modaleSent').on("shown.bs.modal", function (e) {
  
                                  var trackno = $("#modaleSent #track").val().trim();
                                  var courier = $("#modaleSent #corrieri").val();
  
  
  
  
                                  $("#sendtrackbtn").on('click',function(e){
                                      e.preventDefault();
  
                                      $.post(
                                      "send_track.php",
                                      {
                                          oemail:email,
                                          oname:cliente,
                                          orecord:record,
                                          ocourier:courier,
                                          oclienteid:clienteid,
                                          otrack:trackno
                                      },
                                      function(data,status)
                                      {
                                          if(data.esito !== false)
                                          {
                                              $("#modaleSentContent").find("#sentmsg").html('Messaggio inviato correttamente');
                                          }
                                          else{
                                              $("#modaleSentContent").find("#sentmsg").html('Si è verificato un problema con l\'invio');
                                          }
  
                                          //$("#modaleSentContent").find("#sentmsg").html(data.msg);
                                      },
                                      "json");
  
                                  });
  
                                  }).modal();
  
                              }
                          }
                          else 
                          {
                              $("#msgcontainer").html('&lt;div class="alert alert-danger"&gt;Operazione non eseguita!&lt;/div&gt;&lt;hr&gt;');
                              alert('Record NON aggiornato. ID: '+record);
  
                          }
                      }
                  },
                  "json");
  
              });     
  </code></pre>
  
  <p>I have prepared a fiddle, even though the $.post calls to the php files have been changed to the echo/json/ path shown on Jsfiddle documentation. </p>
  
  <p>Here is the <a href="https://jsfiddle.net/148ar3vy/" rel="nofollow noreferrer"><strong>link</strong></a>           </p>
  
  <p>Thank you</p>