title: How to submit clone of jQuery form with current data?
body: <p>I need to dynamically create and submit HTML form. </p>
  
  <p>I join many forms into one AJAX request so I clone them and send by jQuery. Code in the link shows the not working part. The problem is that jQuery is sending original HTML code instead of generated/user changes code.</p>
  
  <p>What do I wrong?
  <a href="http://ajax.dev.brown.sk/test1.html" rel="nofollow">http://ajax.dev.brown.sk/test1.html</a></p>
  
  <p>Whole example:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
          &lt;script&gt;
          $(document).ready(function(){
              $("form").submit(function(){
  
                  // copy inputs and take it to form element
                  $clone = $(this).clone(true,true);
  
                  // display the code to below
                  $("pre:first").text($clone[0].outerHTML);
  
  
                  // ajax form submit
                  $.post("/post.php", $clone.serialize(), function(data){
                      // data contains output of &lt;?php print_r($_POST) ?&gt;
                      $("pre:last").text(data);
                  });
  
                  return false;
              });
          });
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
  
          &lt;form&gt;
              &lt;select name="select"&gt;
                  &lt;option value="a"&gt;aaa&lt;/option&gt;
                  &lt;option value="b" selected="selected"&gt;bbb&lt;/option&gt;
                  &lt;option value="c"&gt;ccc&lt;/option&gt;
              &lt;/select&gt;
              &lt;input type="submit" /&gt;
          &lt;/form&gt;
  
          &lt;hr /&gt;
          &lt;pre&gt;&lt;/pre&gt;
  
          &lt;hr /&gt;
          &lt;pre&gt;&lt;/pre&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I think the problem is with serialization of cloned form. Check this example:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
          &lt;script&gt;
          $(document).ready(function(){
              $("form").submit(function(){
  
                  // copy inputs and take it to form element
                  $clone = $(this).clone();
  
                  // display the serialized values below
                  $("pre").text($clone.serialize());
  
                  return false;
              });
          });
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
  
          &lt;form&gt;
              &lt;select name="select"&gt;
                  &lt;option value="a"&gt;aaa&lt;/option&gt;
                  &lt;option value="b" selected="selected"&gt;bbb&lt;/option&gt;
                  &lt;option value="c"&gt;ccc&lt;/option&gt;
              &lt;/select&gt;
              &lt;input type="submit" /&gt;
          &lt;/form&gt;
  
          &lt;pre&gt;&lt;/pre&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>