title: ajax form submission with jquery multiple forms
body: <p>Following the examples on this page: <a href="http://www.formget.com/submit-form-using-ajax-php-and-jquery/" rel="nofollow">http://www.formget.com/submit-form-using-ajax-php-and-jquery/</a>
  I am converting the forms on one of my sites to use ajax for submission, that way uses can use the forward and back buttons, and their info isn't showing up in the address bar.
  It's worked so far, on pages that have a single form. But one page has multiple forms on it.</p>
  
  <p>Form from campers.php</p>
  
  <pre><code>&lt;form id="retro1457806069"&gt;
  &lt;input type="hidden" id="class" name="classa" value="retro"&gt;
  &lt;input type="hidden" id="type" name="type" value="1"&gt;
  &lt;input type="submit" id="submit" value="Rent This Camper"&gt;&lt;/form&gt;
  
  &lt;form id="two1457806069"&gt;
  &lt;input type="hidden" id="class" name="classa" value="classtwo"&gt;
  &lt;input type="hidden" id="type" name="type" value="1"&gt;
  &lt;input type="submit" id="submit" value="Rent This Camper"&gt;&lt;/form&gt;
  
  &lt;form id="three1457806069"&gt;
  &lt;input type="hidden" id="class" name="classa" value="classthree"&gt;
  &lt;input type="hidden" id="type" name="type" value="1"&gt;
  &lt;input type="submit" id="submit" value="Rent This Camper"&gt;&lt;/form&gt;
  </code></pre>
  
  <p>Those are the actual form codes generated by my script (with all the excess text and such removed around them.</p>
  
  <p>script.js:</p>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function() {
    $("#submit").click(function() {
      var classa = $("#classa").val();
      var type = $("#type").val();
      // Returns successful data submission message when the entered information is stored in database.
      var dataString = 'class=' + classa + '&amp;type=' + type;
      if (classa == '' || type == '') {
        alert("Please Fill All Fields");
      } else {
        // AJAX Code To Submit Form.
        $.ajax({
          type: "POST",
          url: "campersub.php",
          data: dataString,
          cache: false,
          success: function(result) {
            window.location.assign("gear.php")
  
          }
        });
      }
      return false;
    });
  });
  </code></pre>
  
  
  
  <p>campersub.php</p>
  
  <pre><code>&lt;?php
  session_start();
  $_SESSION["class"]=$_POST["class"];
  $_SESSION["type"]=$_POST["type"];
  echo "Success.";
  ?&gt;
  </code></pre>
  
  <p>The problem is, instead of adding the form information to the $_SESSION array and redirecting the browser to gear.php when I click on the first submit button, absolutely nothing happens. But when I click on the second or third submit buttons it redirects the page to campers.php?classa=classone&amp;type=1 for example.</p>