2017-12-14 9 views
0

私は、ブートストラップモーダルでいくつかのフィールドの値を取得しようとしていたし、$ .postコールを介してPHPスクリプト電子メールが正しく送信された場合は電子メールを送信し、それ以外の場合は真に応答します。jqueryのポストコールでブートストラップモーダルの入力フィールドから値を取得することができません

私はこれらの値を得ることができません...フィールドは常に空です(または "選択"の場合はデフォルト値を使用しています)理由はわかりません。フィールドと$ .postモーダル・ショー(sho.bs.modal)でインスタンスを呼び出すが、何も変わりません。ここで

は私のコード...任意のヒントですか?

HTML

SELECTOR

<select name="stato" data-recordid="1469" data-recordcustomername="John Snow" data-recordcustomerid="416" data-recordmailuser="[email protected]" 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> 

PHPファイルへの呼び出し.post $エコー/ JSONに変更されているにもかかわらず、私は、フィドルを用意しました

   $('#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"); 

      });  

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 /パスはJsfiddleのドキュメントに示されています。ここで

link

は、あなたのテーブルid="tblOrders"idを追加するために見逃しているように見えますあなた

+0

インスペクタの[ネットワーク]タブを見ると、値が正しく送信されていることがわかります。問題はあなたのPHPコードにあるかもしれませんが、あなたが持っているものを私たちに示していますか? –

+0

@ChinLeungフィールドはPHPファイルに転送されますが、#trackフィールドと#corrieriフィールドは空であるか、デフォルト値(選択の場合)に設定されます。だから問題はPHPファイルに到着する前です。 – Aptivus

答えて

0

に感謝されます。したがって、tableidを追加して試してみてください。ここには作業jsfiddleがあります。

UPDATE:

あなたがモーダルにtracknocourierの値を代入している自分自身を示しました。これは、モーダル送信ボタンをクリックする前に、モーダル表示値が空のままであることを意味します。だから、更新GETに

値は

$('#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'); 

以下のように$("#sendtrackbtn").on('click',function(e){});の内側にあなたのcouriertrackno数値を割り当てるここでは、更新作業jsfiddleです。これがあなたに役立つことを願っています!

+0

はい、私はIDを追加していない...申し訳ありません...しかし、それはポイントではありません。あなたが見ることができるように、私は2 $ .post呼び出しを持っています。最初のものは正常に動作し、2番目のもの(モーダルでは入力フィールドと選択ボックスを使用します)は動作しません。私はそれを求めていた。 – Aptivus

+0

@Aptivus - 最新の回答をご覧ください。それがあなたを助けることを願っています! –

関連する問題