title: HTML5 history with AJAX form
body: <p>I am trying to implement HTML5 history with an AJAX form.</p>
  
  <p>The form contains some radio buttons and dropdowns. Upon changing any of these inputs, the form is automatically submitted and results are returned via AJAX.</p>
  
  <p>Now having implemented history, the URL gets updated, so it looks like this for example:</p>
  
  <p><code>/currencies?type=usd&amp;year=2015</code></p>
  
  <p>Here is how I perform the AJAX and update the URL:</p>
  
  <pre><code>$('#currency-form input, #currency-form select').change(function() {
      var form = $('#currency-form');
      var url = form.attr('action');
      var data = form.serialize();
  
      $.ajax({
          url: url,
          type: 'get',
          dataType: 'json',
          data: data,
          success: function(response) {
              // update the page content
              processResponse(response.data);
  
              // update the page url
              window.history.pushState({}, response.meta_title, response.new_url);
          }
      });
  });
  </code></pre>
  
  <p>To detect the back button, I have done the following:</p>
  
  <pre><code>$(window).on('popstate', function(event) {
      var state = event.originalEvent.state;
  
      if (state !== null) {
          console.log(state);
      }
  });
  </code></pre>
  
  <p>There is one thing I am struggling with. Upon pressing the back button, it should pre-select the previous form values and submit the form again.</p>
  
  <p>Does anybody know how I can achieve this?</p>