html 开机自检数据未发送

html POST data not being sent

本文关键字：数据 开机自检 html      更新时间：2023-09-26

我有一个简单的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 UI 对话框中，帖子是这样触发的：

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

我错过了什么？

发生这种情况的原因是 jQuery UI 将 UI 元素附加到 body 元素，而不是对话框的容器元素;窗体。然后，这会导致表单提交意外操作，因为所有输入字段都在实际表单元素之外。

解决此问题的方法是在对话框设置对象中定义 appendTo 元素。例如下面，我将对话框附加到其父级;窗体。

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' ) ，因为我担心使用"好"的旧方式会在具有多种形式的网页上轻松发生冲突。这样更安全。

相关文章：