如何让我的表单通过 jQuery/ajax 提交？

Question

I'm trying to submit a form via jquery so that the whole page won't reloads. I'm following the instruction on jQuery.post() guide but so far it's not working. Here's what I'm looking for to complete this task.

1. Submit the form to a ColdFusion proxy page and from their it will send the data as json via CFHTTP.
2. During the process of submitting the form, show a progress gif or status.
3. Somehow, hide or remove the form off of the page.
4. Show a success or thank you message on the page where the form used to be.

So far the form I have did not even find the values from the input. The error says that "TypeError: $form.find(...).value is not a function". Below is my JavaScript code thus far:

$(function(){
        $("##frmComment##").submit(function(event){
            event.preventDefault();             
            $("##submitResponse").append('<img src="http://st2.india.com/wp-content/uploads/2014/07/ajax-loader.gif" class="progressGif">');


            // Cache $form, we'll use that selector more than once
            var $form=$(this);

            var data = $form.serialize(); //get all the data of form

            //post it
            $.post(
            "/customcf/knowledgeOwl/proxyPost-KB.cfm",
            data,
            //console.log(response),                
            function(response){
                // Success callback.  Remove your progress gif, eg:
                 //$('body').removeClass('in-progress');
                 console.log(response);
                // Remove the spining gif from the div
                $("##submitResponse img:last-child").remove();
                //Remove the feedback form
                $("##frmComment").remove();
                $form.fadeOut('slow', function(){
                    //Add response text to the div
                    $("##submitResponse").append("<h6>Thank you for your feedback.</h6>");
                    $("##submitResponse").html(response).fadeIn('slow');
                });
            });


            });
        })

Here's the project I've setup in JSFiddle. And here's the form.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<form data-abide id="frmComment">
    <div class="row">
        <div class="large-12 medium-12 columns">
            <div class="row" data-equalizer>
                <div class="large-4 medium-4 columns">
                    <div class="row">
                        <div class="large-12 columns">
                            <label>
                                <input type="text" placeholder="Name" name="name" required>
                            </label>
                            <small class="error">Name is required and must be a string.</small>
                        </div>
                    </div>
                    <div class="row">
                        <div class="large-12 columns">
                            <label>
                                <input type="text" placeholder="Email" name="mailfrom" required pattern='.*@.*\..{3}|.*@.*\..{2}'>
                            </label>
                            <small class="error">An email address is required.</small>
                        </div>
                    </div>
                    <div class="row">
                        <div class="large-12 columns">
                            <div class="g-recaptcha" data-sitekey="6LfjNwITABCDPbDHdC5wx6HXRmXtqO3pgUItl-E"></div>
                            <noscript>
                                <div style="width: auto; height: 462px;">
                                    <div style="width: auto; height: 422px; position: relative;">
                                        <div style="width: auto; height: 422px; position: absolute;">
                                            <iframe src="https://www.google.com/recaptcha/api/fallback?k=6LfjNwITABCDPbDHdC5wx6HXRmXtqO3pgUItl-E" frameborder="0" scrolling="no" >
                                            </iframe>
                                        </div>
                                    </div>
                                    <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: ##f9f9f9; border: 1px solid ##c1c1c1; border-radius: 3px; height: 100px; width: 300px;">
                                        <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 280px; height: 80px; border: 1px solid ##c1c1c1; margin: 10px; padding: 0px; resize: none;"></textarea>
                                    </div>                                                  
                                </div>
                                <br /><br />                                             
                            </noscript>
                        </div>
                    </div>
                </div>
                <div class="large-8 medium-8 columns">
                    <div class="row">
                        <div class="large-12 columns">
                            <textarea id="message" name="message" placeholder="Leave a comment...we love feedback!" rows="5"  required></textarea>                                                  
                        </div>
                    </div>
                    <div class="row">
                        <div class="large-12 columns">
                            <button type="submit" class="tiny right button">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<div id="submitResponse"></div>

Okay, with some help, I managed to get the jQuery post to send the data to my proxyPost-KB.cfm page but it error out (505) when it hits that page. This is what I have in my proxyPost-KB.cfm page. None of the logs I setup in this CFM page is even get executed either.

<!---
    Make the proxy HTTP request using. When we do this, try to pass along all of the CGI information that was made by the original AJAX request.
--->
<cflog text="CGI: #cgi#" type="Information" file="CGIparameters">
<cfhttp url="https://app.kb.com/api/head/comment.json" method="post" timeout="15" throwonerror="true">
    <!---<cfhttpparam type="body" name="data"value="#serializeJSON(jsonString)#" />--->
    <cfhttpparam type="url" name="_authbykey" value="56ec1f1232131c78636142d6">
    <cfhttpparam type="url" name="project_id" value="55c4ffd123131c527e294fe6">
    <!---<cfhttpparam type="url" name="article_id" value="#artID#">
    <cfhttpparam type="url" name="content" value="#form.message#"/>
    <cfhttpparam type="url" name="public_name" value="#form.name#"/>
    <cfhttpparam type="url" name="public_email" value="#form.mailfrom#"/>--->
    <cfhttpparam type="url" name="status" value="pending"/>

    <!--- Pass along any URL values. --->
    <cfloop item="strKey" collection="#URL#">
        <!---<cfhttpparam type="url" name="public_name" value="#URL[strKey]#" />
        <cfhttpparam type="url" name="public_email" value="#URL[strKey]#" />--->        
        <cflog text="URL: #URL[strKey]#" type="Information" file="CGIparameters">
    </cfloop>
</cfhttp>

<!---
    Get the content as a byte array (by converting it to binary,
    we can echo back the appropriate length as well as use it in
    the binary response stream.
--->
<cfset binResponse = ToBinary(ToBase64( objRequest.FileContent )) />

<!--- Echo back the response code. --->
<cfheader statuscode="#Val( objRequest.StatusCode )#" statustext="#ListRest( objRequest.StatusCode, ' ' )#" />

<!--- Echo back response legnth. --->
<cfheader name="content-length" value="#ArrayLen( binResponse )#" />

<!--- Echo back all response heaers. --->
<!---<cfloop item="strKey" collection="#objRequest.ResponseHeader#">
<!--- Check to see if this header is a simple value. --->
    <cfif IsSimpleValue( objRequest.ResponseHeader[ strKey ] )>

        <!--- Echo back header value. The cfheader tag generate the error "Complex object types cannot be converted to simple values"--->
        <cfheader name="#strKey#" value="#objRequest.ResponseHeader[ strKey ]#" />
        <cflog text="IsSimpleValue: #strKey#" type="Information" file="debugCFLoop">
    </cfif>
</cfloop>--->--->

<!---
    Echo back content with the appropriate mime type. By using
    the Variable attribute, we will make sure that the content
    stream is reset and ONLY the given response will be returned.
--->
<cfcontent type="#objRequest.MimeType#" variable="#binResponse#" />

Answer 1

Here's an example to do what you describe:

$("#frmComment").submit(function(event) {
    event.preventDefault();

    // Form has been submitted - now show your progress gif, eg:
    // $('body').addClass('in-progress');
    // or maybe:
    // $('.spinner').show();
    // etc - CSS can be whatever you want

    // Cache $form, we'll use that selector more than once
    var $form=$(this);

    // Serialize all input from the form
    var data=$form.serialize();

    // Post it
    $.post(
        "your-proxy-url",
        data,
        function(response) {
            // Success callback.  Remove your progress gif, eg:
            // $('body').removeClass('in-progress');
            console.log(response); // show the proxy response on your console

            // Now hide the form
            $form.fadeOut('slow', function() {
                // And show a result once it's gone
                $(".result").html(response).fadeIn('slow');
            });
        }
    );
});

Answer 2

I think you could use this code inside the $( "#frmComment" ).submit(function( event ) { function:

event.preventDefault();
var data = $('#frmComment').serialize(); //get all the data of form
var url = "yourUrl.php";

 $.ajax({
    type: "POST",
    url: url,
    data: data,
    dataType: "json",
    success: function(data) {
        //var obj = jQuery.parseJSON(data); if the dataType is not specified as json uncomment this
        // do what ever you want with the server response
    },
    error: function() {
        alert('error handing here');
    }
});

The PHP 'yourUrl' will recive the form inputs (you could use var_dump($_POST); to see the structure.