title: How to get my form submitted via jQuery/ajax?
body: <p>I'm trying to submit a form via jquery so that the whole page won't reloads. I'm following the instruction on <a href="http://api.jquery.com/jquery.post/" rel="nofollow">jQuery.post()</a> guide but so far it's not working. Here's what I'm looking for to complete this task.</p>
  
  <ol>
  <li>Submit the form to a ColdFusion proxy page and from their it will send the data as json via CFHTTP.</li>
  <li>During the process of submitting the form, show a progress gif or status.</li>
  <li>Somehow, hide or remove the form off of the page.</li>
  <li>Show a success or thank you message on the page where the form used to be.</li>
  </ol>
  
  <p>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:</p>
  
  <pre><code>$(function(){
          $("##frmComment##").submit(function(event){
              event.preventDefault();             
              $("##submitResponse").append('&lt;img src="http://st2.india.com/wp-content/uploads/2014/07/ajax-loader.gif" class="progressGif"&gt;');
  
  
              // 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("&lt;h6&gt;Thank you for your feedback.&lt;/h6&gt;");
                      $("##submitResponse").html(response).fadeIn('slow');
                  });
              });
  
  
              });
          })
  </code></pre>
  
  <p>Here's the <a href="https://jsfiddle.net/2Charlie/k6kz82er/5/" rel="nofollow">project</a> I've setup in JSFiddle. And here's the form.</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;form data-abide id="frmComment"&gt;
      &lt;div class="row"&gt;
          &lt;div class="large-12 medium-12 columns"&gt;
              &lt;div class="row" data-equalizer&gt;
                  &lt;div class="large-4 medium-4 columns"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="large-12 columns"&gt;
                              &lt;label&gt;
                                  &lt;input type="text" placeholder="Name" name="name" required&gt;
                              &lt;/label&gt;
                              &lt;small class="error"&gt;Name is required and must be a string.&lt;/small&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="large-12 columns"&gt;
                              &lt;label&gt;
                                  &lt;input type="text" placeholder="Email" name="mailfrom" required pattern='.*@.*\..{3}|.*@.*\..{2}'&gt;
                              &lt;/label&gt;
                              &lt;small class="error"&gt;An email address is required.&lt;/small&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="large-12 columns"&gt;
                              &lt;div class="g-recaptcha" data-sitekey="6LfjNwITABCDPbDHdC5wx6HXRmXtqO3pgUItl-E"&gt;&lt;/div&gt;
                              &lt;noscript&gt;
                                  &lt;div style="width: auto; height: 462px;"&gt;
                                      &lt;div style="width: auto; height: 422px; position: relative;"&gt;
                                          &lt;div style="width: auto; height: 422px; position: absolute;"&gt;
                                              &lt;iframe src="https://www.google.com/recaptcha/api/fallback?k=6LfjNwITABCDPbDHdC5wx6HXRmXtqO3pgUItl-E" frameborder="0" scrolling="no" &gt;
                                              &lt;/iframe&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;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;"&gt;
                                          &lt;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;"&gt;&lt;/textarea&gt;
                                      &lt;/div&gt;                                                  
                                  &lt;/div&gt;
                                  &lt;br /&gt;&lt;br /&gt;                                             
                              &lt;/noscript&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="large-8 medium-8 columns"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="large-12 columns"&gt;
                              &lt;textarea id="message" name="message" placeholder="Leave a comment...we love feedback!" rows="5"  required&gt;&lt;/textarea&gt;                                                  
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="large-12 columns"&gt;
                              &lt;button type="submit" class="tiny right button"&gt;Submit&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  &lt;div id="submitResponse"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>&lt;!---
      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.
  ---&gt;
  &lt;cflog text="CGI: #cgi#" type="Information" file="CGIparameters"&gt;
  &lt;cfhttp url="https://app.kb.com/api/head/comment.json" method="post" timeout="15" throwonerror="true"&gt;
      &lt;!---&lt;cfhttpparam type="body" name="data"value="#serializeJSON(jsonString)#" /&gt;---&gt;
      &lt;cfhttpparam type="url" name="_authbykey" value="56ec1f1232131c78636142d6"&gt;
      &lt;cfhttpparam type="url" name="project_id" value="55c4ffd123131c527e294fe6"&gt;
      &lt;!---&lt;cfhttpparam type="url" name="article_id" value="#artID#"&gt;
      &lt;cfhttpparam type="url" name="content" value="#form.message#"/&gt;
      &lt;cfhttpparam type="url" name="public_name" value="#form.name#"/&gt;
      &lt;cfhttpparam type="url" name="public_email" value="#form.mailfrom#"/&gt;---&gt;
      &lt;cfhttpparam type="url" name="status" value="pending"/&gt;
  
      &lt;!--- Pass along any URL values. ---&gt;
      &lt;cfloop item="strKey" collection="#URL#"&gt;
          &lt;!---&lt;cfhttpparam type="url" name="public_name" value="#URL[strKey]#" /&gt;
          &lt;cfhttpparam type="url" name="public_email" value="#URL[strKey]#" /&gt;---&gt;        
          &lt;cflog text="URL: #URL[strKey]#" type="Information" file="CGIparameters"&gt;
      &lt;/cfloop&gt;
  &lt;/cfhttp&gt;
  
  &lt;!---
      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.
  ---&gt;
  &lt;cfset binResponse = ToBinary(ToBase64( objRequest.FileContent )) /&gt;
  
  &lt;!--- Echo back the response code. ---&gt;
  &lt;cfheader statuscode="#Val( objRequest.StatusCode )#" statustext="#ListRest( objRequest.StatusCode, ' ' )#" /&gt;
  
  &lt;!--- Echo back response legnth. ---&gt;
  &lt;cfheader name="content-length" value="#ArrayLen( binResponse )#" /&gt;
  
  &lt;!--- Echo back all response heaers. ---&gt;
  &lt;!---&lt;cfloop item="strKey" collection="#objRequest.ResponseHeader#"&gt;
  &lt;!--- Check to see if this header is a simple value. ---&gt;
      &lt;cfif IsSimpleValue( objRequest.ResponseHeader[ strKey ] )&gt;
  
          &lt;!--- Echo back header value. The cfheader tag generate the error "Complex object types cannot be converted to simple values"---&gt;
          &lt;cfheader name="#strKey#" value="#objRequest.ResponseHeader[ strKey ]#" /&gt;
          &lt;cflog text="IsSimpleValue: #strKey#" type="Information" file="debugCFLoop"&gt;
      &lt;/cfif&gt;
  &lt;/cfloop&gt;---&gt;---&gt;
  
  &lt;!---
      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.
  ---&gt;
  &lt;cfcontent type="#objRequest.MimeType#" variable="#binResponse#" /&gt;
  </code></pre>