HTML POST數據沒有被髮送

Question

我有一個簡單的HTML表單被髮送到我的接收PHP頁面。我正在進入接收頁面，查詢字符串值已經結束，但沒有任何發佈的輸入值。 是的，我在我所有的輸入元素上都使用了名稱屬性。我已在Chrome開發人員工具中檢查了該請求，並且未輸入輸入值。我無法弄清楚爲什麼。

<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用戶界面對話框內，以及後正是如此觸發：

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() 

的完整代碼將隨後是這樣的：

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'); 
       } 
      } 
     ] 
    }); 
} 

還請注意，我改變了document.forms[ 0 ]到$(this).closest('form')，因爲我怕用「好」的老辦法將在網頁上輕鬆衝突結束有多種形式。這樣更安全。