title: Back Button Handle A Dynamic Form
body: <p>I have a form with an array of text fields.  The user (through javascript) can add an arbitrary number of text fields to the form.  After submitting the form and pressing the back button the form displays only with the fields that were on the original form when it was first rendered (any added text fields are lost).  What is the best way to allow the back button to render the form in the state when the user submitted it?  Any ideas are welcome, some things I've tried are:</p>
  
  <ul>
  <li>Put the form data in a cookie (this
  doesn't work great for a couple
  reasons but the biggest killer for me
  is that cookies are limited to 4K in
  size) </li>
  <li>Put the form data in a session</li>
  <li>Submit the form via AJAX and then manage the history</li>
  </ul>
  
  <p>Thanks for the help.  I've posted a test form on my website at <a href="http://fishtale.org/formtest/f1.php" rel="nofollow noreferrer">http://fishtale.org/formtest/f1.php</a>.  Also here is a simple form exhibiting the behavior I mentioned:</p>
  
  <pre><code>&lt;form action="f2.php" method="post"&gt;
  &lt;input type="text" name="text[]" id="text1"/&gt;
  &lt;input type="submit" name="saveaction" value="submit form" /&gt;
  &lt;/form&gt;
  
  &lt;a href="f2.php" id="add_element"&gt;Add Form Element&lt;/a&gt;
  
  &lt;script type="text/javascript" 
          src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" &gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" &gt;
      $('#add_element').click(function (event) {
          event.preventDefault();
          $('#text1').after('&lt;input type="text" name="text[]" /&gt;');
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>This is similar to a question I posted a while ago, <a href="https://stackoverflow.com/questions/507793/best-way-for-back-button-to-leave-form-data">Best Way For Back Button To Leave Form Data</a>, however, this form's elements are modified by the user.</p>