dynamic_synthetic_form.html | Explore in Territory

<!-- A page that is used to test that a dynamic form fill feature works properly even for synthetic forms (no form). -->
<body>
  <div id="syntheticform1">
    Name: <input type="text" name="firstname" id="firstname"><br>
    Address: <input type="text" name="address1" id="address1"><br>
    City: <input type="text" name="city" id="city"><br>
    State: <select name="state" id="state">
      <option value="CA">CA</option>
      <option value="MA">MA</option>
      <option value="NY">NY</option>
      <option value="MD">MD</option>
      <option value="OR">OR</option>
      <option value="OH">OH</option>
      <option value="IL">IL</option>
      <option value="DC">DC</option>
    </select> <br>
    Zip: <input name="zip" id="zip"> <br>
    Country: <select name="country" id="country" onchange="CountryChanged()">
      <option value="CA">Canada</option>
      <option value="US">United States</option>
    </select> <br>
    Company: <input name="company" id="company"> <br>
    Email: <input name="email" id="email"> <br>
    Phone: <input name="phone" id="phone"> <br>
    <input type="reset" value="Reset">
    <input type="submit" value="Submit" id="profile_submit">
</body>

<script>
function CountryChanged() {
  RemoveForm('syntheticform1');

  var new_synth_form = document.createElement('div');
  new_synth_form.setAttribute('id', 'syntheticform1');

  AddFields(new_synth_form, 'syntheticform1');

  document.getElementsByTagName('body')[0].appendChild(new_synth_form);
}

function RemoveForm(form_id) {
  var initial_form = document.getElementById(form_id);
  initial_form.parentNode.removeChild(initial_form);
  initial_form.innerHTML = '';
  initial_form.remove();
}

function AddFields(new_form, form_id) {
  var first_name_input = document.createElement('input');
  first_name_input.setAttribute('type', 'text');
  first_name_input.setAttribute('name', 'firstname');
  first_name_input.setAttribute('id', 'firstname_' + form_id);
  first_name_input.setAttribute('autocomplete', 'given-name');
  new_form.appendChild(first_name_input);

  var i = document.createElement('input');
  i.setAttribute('type', 'text');
  i.setAttribute('name', 'address1');
  i.setAttribute('id', 'address_' + form_id);
  i.setAttribute('autocomplete', 'address-line1');
  new_form.appendChild(i);

  i = document.createElement('select');
  i.setAttribute('name', 'state');
  i.setAttribute('id', 'state_' + form_id);
  i.setAttribute('autocomplete', 'region');
  i.options[0] = new Option('CA', 'CA');
  i.options[1] = new Option('MA', 'MA');
  i.options[2] = new Option('TX', 'TX');
  new_form.appendChild(i);

  i = document.createElement('input');
  i.setAttribute('type', 'text');
  i.setAttribute('name', 'city');
  i.setAttribute('id', 'city_' + form_id);
  i.setAttribute('autocomplete', 'locality');
  new_form.appendChild(i);

  i = document.createElement('input');
  i.setAttribute('type', 'text');
  i.setAttribute('name', 'company');
  i.setAttribute('id', 'company_' + form_id);
  i.setAttribute('autocomplete', 'organization');
  new_form.appendChild(i);

  i = document.createElement('input');
  i.setAttribute('type', 'text');
  i.setAttribute('name', 'email');
  i.setAttribute('id', 'email_' + form_id);
  i.setAttribute('autocomplete', 'email');
  new_form.appendChild(i);

  i = document.createElement('input');
  i.setAttribute('type', 'text');
  i.setAttribute('name', 'phone');
  i.setAttribute('id', 'phone_' + form_id);
  i.setAttribute('autocomplete', 'tel');
  new_form.appendChild(i);

  window['refill'] = true;
  console.log('An event happened that should trigger a refill.');
}
</script>
chromium/chrome/test/data/autofill/dynamic_synthetic_form.html
