html POST data not being sent

Question

I have a simple html form that is being POSTed to my receiving php page. I'm getting to the receiving page and the querystring values are coming over, but none of the posted input values. Yes, I am using name attributes on all my input elements. I have examined the request in Chrome Developer Tools, and the input values are not being sent. I cannot figure out why.

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

The html above is inside a jQuery UI Dialog, and the post is triggered 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");
              }
            }
          ]
        });
    }

What am I missing?

Answer 1

The reason why this occurs is because jQuery UI appends the UI element to the body element , and not to the dialog's container element; the form. This then causes the form submit to act unexpectedly, as all the input fields are outside of the actual form element.

The way to fix this is to define the appendTo element in the dialog settings object . Such as the following, where I append the dialog to its parent; the form.

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

Full code would then be this:

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

Note also that I changed the document.forms[ 0 ] to $( this ).closest( 'form' ) , as I fear using the "good" old way would end up in conflicts easily on web pages with multiple forms. It is safer this way.