title: Not all fields are available after submit form POST
body: <p>I have a simple form with a 4 fields and submit button:</p>
  
  <ul>
  <li>Name (text)</li>
  <li>Surname (text)</li>
  <li>Region (select)</li>
  <li>City (select)</li>
  <li>Submit (button)</li>
  </ul>
  
  <p>For fields "Region" and "City" option-data loaded dynamically by ajax from the server.
  When I fill all fields and press "Submit", I see that not all data was sent.
  Only text fields were sent (Name and Surname), but select fields (which option data loaded dynamically ) - are not.
  Why?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function changeCities(region) {
      $.ajax({
          url: "/comment/",
          context: document.body,
          data: {"region": region},
          success: function(response){
              var resp_data = JSON.parse(response);
              $.each(resp_data, function (i, item) {
                  $('#city').append($('&lt;option&gt;', {
                      value: i,
                      text: item
                  }));
              });
          }
      });
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form action="#" method="POST"&gt;
      &lt;input type="text" name="name" id="surname"&gt;&lt;br&gt;
      &lt;input type="text" name="surname" id="name"&gt;&lt;br&gt;
      &lt;select id="region" onchange="changeCities(this.value)"&gt;
          &lt;option value="default"&gt;&lt;/option&gt;
      &lt;/select&gt;&lt;br&gt;
      &lt;select id="city"&gt;%s&lt;/select&gt;&lt;br&gt;
      &lt;input type="submit" value="Submit" id="button"&gt;&lt;br&gt;&lt;br&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>