title: Jquery serialize() not working on using two div inside one form
body: <p>I want to take user info in two parts using single form and then serialize these values. Here's how I'm doing this in my code-</p>
  
  <pre><code> &lt;form action=""&gt;
  &lt;div id="11"&gt;
  First name: &lt;input type="text" name="FirstName" value="" /&gt;&lt;br&gt;
  Last name: &lt;input type="text" name="LastName" value="" /&gt;&lt;br&gt;
  &lt;/div&gt;
  
  &lt;button id="b1" &gt;Proceed to get next two values&lt;/button&gt;
  
  &lt;div id="22" style="display:none"&gt;
  First name2: &lt;input type="text" name="FirstName2" value="" /&gt;&lt;br&gt;
  Last name2: &lt;input type="text" name="LastName2" value="" /&gt;&lt;br&gt;
  &lt;/div&gt;
  
  &lt;/form&gt;
  
  &lt;button id="b2"  style="display:none"&gt;Serialize all form values&lt;/button&gt;
  &lt;div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Thus in the code above i want to display two fields at a time while hiding other two. And then serializing all four values using jquery serialize().
  Here's is how i'm trying to handle this in my Jquery:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
    $("#b1").click(function(){
    $("#11").hide();
    $("#b1").hide();
    $("#22").show();
    $("#b2").show();
  });
    $("#b2").click(function(){
      y = $("div").text($("form").serialize());
     alert("output" + y);
     });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>When i click on button(with id 11) div2 gets display and then it automatically gets disappear. Not sure what mistake i'm making. Please help.</p>