Submit A Form Without Page Refresh using jQuery
<p>I want to submit a form without page refresh using jQuery. I found some examples online, like this one:
<a href="http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/" rel="nofollow">http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/</a></p>

<p>but the problem is they have hard-coded form fields:</p>

<pre><code>  &lt;div id="contact_form"&gt;
  &lt;form name="contact" action=""&gt;
    &lt;fieldset&gt;
      &lt;label for="name" id="name_label"&gt;Name&lt;/label&gt;
      &lt;input type="text" name="name" id="name" size="30" value="" class="text-input" /&gt;
      &lt;label class="error" for="name" id="name_error"&gt;This field is required.&lt;/label&gt;

      &lt;label for="email" id="email_label"&gt;Return Email&lt;/label&gt;
      &lt;input type="text" name="email" id="email" size="30" value="" class="text-input" /&gt;
      &lt;label class="error" for="email" id="email_error"&gt;This field is required.&lt;/label&gt;

      &lt;label for="phone" id="phone_label"&gt;Return Phone&lt;/label&gt;
      &lt;input type="text" name="phone" id="phone" size="30" value="" class="text-input" /&gt;
      &lt;label class="error" for="phone" id="phone_error"&gt;This field is required.&lt;/label&gt;

        &lt;br /&gt;
      &lt;input type="submit" name="submit" class="button" id="submit_btn" value="Send" /&gt;
    &lt;/fieldset&gt;
  &lt;/form&gt;
  &lt;/div&gt;
</code></pre>

<p>And the javascript:</p>

<pre><code>  var dataString = 'name='+ name + '&amp;email=' + email + '&amp;phone=' + phone;
  //alert (dataString);return false;
  $.ajax({
    type: "POST",
    url: "bin/process.php",
    data: dataString,
    success: function() {
      $('#contact_form').html("&lt;div id='message'&gt;&lt;/div&gt;");
      $('#message').html("&lt;h2&gt;Contact Form Submitted!&lt;/h2&gt;")
      .append("&lt;p&gt;We will be in touch soon.&lt;/p&gt;")
      .hide()
      .fadeIn(1500, function() {
        $('#message').append("&lt;img id='checkmark' src='images/check.png' /&gt;");
      });
    }
  });
  return false;
</code></pre>

<p>So in the example above, the <code>dataString</code> is created from hard-coded form fields. My form is dynamic so I don't know the name of input fields it has.</p>

<p><strong>Note:</strong> Although the form fields are dynamic, the form name is hard-coded, so I guess one option is to go through child nodes and parse the values. But I was wondering if there is an easier way.</p>
