title: Submit form without form id
body: <p>I need to submit form using through Ajax call but I'm having trouble selecting the form. I don't want to use form ID because I'm having multiple forms and I need to setup one code for all</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".pay").on("click",function(){
    var form = $(this).closest(".card-body").find("form");
    //$(form).submit(function(e) {
    e.preventDefault();
    var formData = $(form).serialize();
    $.ajax({
      type: 'POST',
      url    : "php/pay.php",
      data: formData
    })
    .done(function(response) {
    })
    //});
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="card" &gt;
    &lt;div class="card-header"&gt;
      &lt;h1&gt;XXX&lt;/h1&gt;  
    &lt;/div&gt;
    &lt;div class="card-body" &gt;
      &lt;form&gt; 
        &lt;input name="user" value="mat" type="hidden"&gt;
        &lt;input name="id" value="12" type="hidden"&gt;
      &lt;/form&gt;
      &lt;button class="btn btn-success pay" value="pay"&gt;pay&lt;/button&gt;
      &lt;button class="btn btn-danger decline" value="decline" &gt;decline&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>