kann nicht Wert von Eingabefeldern in Bootstrap-Modal auf einem Jquery-Post-Aufruf

Question

Ich habe versucht, den Wert von ein paar Felder in einem Bootstrap-modal zu bekommen und dann über $ .post Aufruf an ein PHP-Skript gesendet werden sendet eine E-Mail und antwortet mit "True", wenn die E-Mail korrekt gesendet wurde oder "False".

Ich kann diese Werte nicht bekommen ... Felder werden immer leer gesendet (oder mit dem Standardwert im Falle eines "Select". Ich verstehe nicht warum. Ich habe auch versucht, die Felder und die $ .post rufen instanziiert auf modal Show (sho.bs.modal), aber es ändert sich nichts.

Hier ist mein Code ... jeder Hinweis?

HTML

SELECTOR

<select name="stato" data-recordid="1469" data-recordcustomername="John Snow" data-recordcustomerid="416" data-recordmailuser="info@ccustmeremail.com" class="statuschanger form-control" required=""> 
    <option value="">Choose...</option> 
    <option value="1">Working on</option> 
    <option value="2">Ready</option> 
    <option value="3" selected="">Shipped with courier</option> 
    <option value="4">Delivered</option> 
</select> 

Modal

<div class="modal fade" id="modaleSent" tabindex="10" role="dialog" data-focus-on="input:first" style="display: none;"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <h3 class="modal-title">Invio messaggio di Tracking</h3> 
       </div> 
       <div class="modal-body">  
        <div id="modaleSentContent">  
         <div id="nomeCliente" class="blocchiModale"></div> 
         <div id="emailCliente" class="blocchiModale"></div> 
         <div id="ordineCliente" class="blocchiModale"></div> 
         <div id="formTracking" class="blocchiModale"> 
          <form id="sendtrack"> 
           <div class="form-group"> 
            <label for="track">Tracking number:</label> 
            <input type="text" class="form-control" id="track" name="track"> 
           </div> 
           <div class="form-group"> 
            <label for="corrieri">Choose courier:</label> 
            <select class="form-control" id="corrieri" name="corrieri"> 
             <option value="brt">BRT</option> 
             <option value="dhl">DHL</option> 
             <option value="sda">SDA</option> 
             <option value="tnt">TNT</option> 
             <option value="ups">UPS</option> 

            </select> 
           </div> 
           <input type="hidden" value="" name="cliente" id="hcliente"> 
           <input type="hidden" value="" name="ordine" id="hordine"> 
           <input type="hidden" value="" name="emailcliente" id="hemailcliente"> 
           <button type="submit" class="btn btn-default" id="sendtrackbtn">Invia ora</button> 
          </form>         
         </div> 

         <div id="sentmsg" class="blocchiModale"></div> 
        </div> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-info iscriviti" data-dismiss="modal">OK</button> 
       </div> 
      </div> 
     </div> 
    </div> 

JS

   $('#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('<div class="alert alert-success">Operazione correttamente eseguita!</div><hr>'); 

          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('<strong>Cliente</strong>: '+cliente); 
           $("#modaleSentContent").find("#hcliente").val(cliente); 
           $("#modaleSentContent").find("#emailCliente").html('<strong>Email</strong>: '+email); 
           $("#modaleSentContent").find("#hemailcliente").val(email); 
           $("#modaleSentContent").find("#ordineCliente").html('<strong>Ordine</strong>: '+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('<div class="alert alert-danger">Operazione non eseguita!</div><hr>'); 
          alert('Record NON aggiornato. ID: '+record); 

         } 
        } 
       }, 
       "json"); 

      });  

ich eine Geige vorbereitet haben, obwohl die $ .post auf die PHP-Dateien Anrufe auf das Echo/json geändert/Pfad, der in der Jsfiddle-Dokumentation angezeigt wird.

Hier ist die link

Danke

Answer 1

Es sieht aus wie Sie id in Ihrer Tabelle hinzuzufügen id="tblOrders" verpasst. Fügen Sie also id für Ihre table hinzu und versuchen Sie es. Hier ist die Arbeit jsfiddle.

UPDATE:

Sie Zuweisen von Werten für trackno und courier auf modal selbst gezeigt. Dies bedeutet, dass die Werte nach dem Modal-Wert leer bleiben, bevor Sie auf den modalen Submit-Button klicken.

So aktualisierten Wert erhalten Ihre courier und trackno Zahlenwerte innerhalb $("#sendtrackbtn").on('click',function(e){}); wie zuweisen unter

$('#modaleSent').on("shown.bs.modal", function (e) { 
    $("#sendtrackbtn").on('click',function(e){ 
     e.preventDefault(); 
     var trackno = $("#modaleSent #track").val().trim(); 
     var courier = $("#modaleSent #corrieri").val(); 
     $.post("/echo/json/", { 
      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('show'); 

Hier ist der Arbeits jsfiddle aktualisiert ist. Hoffe, das wird dir helfen!