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

我错过了什么？

Answer 1

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

解决此问题的方法是define the appendTo element in the dialog settings object。如下所示，我将对话框附加到其父对象;形式。

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' )更改为import javax.swing.*; import java.awt.*; import java.awt.event.*; public class EmptyFieldException { EmptyFieldException() { } }，因为我担心使用“好”旧方法会在具有多种形式的网页上轻松地发生冲突。这样更安全。

html POST数据未被发送

1 个答案: