html POSTデータが送信されていません

Question

私は受信したPHPページにPOSTされている単純なhtmlフォームを持っています。私は受信ページに到達しており、クエリーストリングの値は上がっていますが、投稿された入力値はありません。 はい、私はすべての入力要素に名前属性を使用しています。私はChrome Developer Toolsでリクエストを調べましたが、入力値は送信されていません。なぜ私は理解できません。上記

<form method="post" action="Authorize.Net/ProcessPayment.php?UserID=3"> 

    <div id="dialogCC" title="Pay by Credit Card" style="display:none"> 
     <p style="color:black"><b>Credit Card Info</b></p> 
     <p><input name="txtCCNumber" type="text" placeholder="Credit Card Number" maxlength="16" /></p> 
     <p> 
     <div style="white-space: nowrap"> 
      <select name="ccExpireMonth" style="width:130px;font-size:15px"> 
       <option value=''>Month</option> 
       <option value='01'>01-Janaury</option> 
       <option value='02'>02-February</option> 
       <option value='03'>03-March</option> 
       <option value='04'>04-April</option> 
       <option value='05'>05-May</option> 
       <option value='06'>06-June</option> 
       <option value='07'>07-July</option> 
       <option value='08'>08-August</option> 
       <option value='09'>09-September</option> 
       <option value='10'>10-October</option> 
       <option value='11'>11-November</option> 
       <option value='12'>12-December</option> 
      </select> 
      <select name="ccExpireYear" style="width:90px;font-size:15px"> 
       <option value=''>Year</option> 
       <option value='2016'>2016</option> 
       <option value='2017'>2017</option> 
       <option value='2018'>2018</option> 
       <option value='2019'>2019</option> 
       <option value='2020'>2020</option> 
       <option value='2021'>2021</option> 
       <option value='2022'>2022</option> 
       <option value='2023'>2023</option> 
       <option value='2024'>2024</option> 
       <option value='2025'>2025</option> 
       <option value='2026'>2026</option> 
      </select> 
     </div> 
     </p> 
     <p><input name="txtCVV" type="text" placeholder="CVV" style="width:50px;float:left" maxlength="4" />&nbsp;&nbsp;&nbsp;&nbsp;<b>$80.19</b></p> 
     <br> 
     <img src="images/creditcards.png" style="width:218px"> 
    </div> 

</form> 

HTMLは、jQueryのUIのダイアログ内で、ポストはthuslyトリガーされます。

function showCC(){ 
     $("#dialogCC").dialog({ 
      modal: true, 
      width: 268, 
      resizable: false, 
      position: { my: "center", at: "top" }, 
      buttons: [ 
      { 
       text: "Pay Now", 
       click: function() { 
       document.forms[0].submit(); 
       //$(this).dialog("close"); 
       } 
      }, 
      { 
       text: "Cancel", 
       click: function() { 
       $(this).dialog("close"); 
       } 
      } 
      ] 
     }); 
    } 

私は何をしないのですか？

Answer 1

これは、jQuery UIが、ダイアログエレメントのコンテナエレメントではなく、ボディエレメントにUIエレメントを追加するためです。フォーム。これは、すべての入力フィールドが実際のフォーム要素の外にあるので、フォームの送信が予期せず実行される原因になります。

これを修正する方法はdefine the appendTo element in the dialog settings objectです。次のように、私は親にダイアログを追加します。フォーム。

appendTo: $('#dialogCC').parent() 

完全なコードは、このようになります：私は、Webページ上で簡単に紛争に終わるだろう「良い」古い方法を使用して恐れるよう、$(this).closest('form')にdocument.forms[ 0 ]を変更したことも

function showCC() { 
    $('#dialogCC').dialog({ 
     appendTo: $('#dialogCC').parent(), 
     modal: true, 
     width: 268, 
     resizable: false, 
     position: { my: "center", at: "top" }, 
     buttons: [ 
      { 
       text: "Pay Now", 
       click: function() { 
        $(this).closest('form').submit(); 
        // $(this).dialog('close'); 
       } 
      }, 
      { 
       text: "Cancel", 
       click: function() { 
        $(this).dialog('close'); 
       } 
      } 
     ] 
    }); 
} 

注意複数の形式でこの方法でより安全です。