dynamic_form_visibility_switch.html

<!-- A page that is used to test that a dynamic form fill feature works properly. -->
<body>
  <form name="addr1.1" id="form1" action="https://example.com/" method="post">
    Name: <input type="text" name="firstname" id="firstname" autocomplete="given-name"><br>
    Address: <input type="text" name="address1" id="address1"><br>
    City: <input type="text" name="city" id="city"><br>
    State/Province:
    <input type="text" name="state_first" id="state_first" onchange="StateFirstChanged()" autocomplete="region"><br>
    <input type="text" name="state_second" id="state_second" style="display: none;" autocomplete="region"><br>
    Zip: <input name="zip" id="zip"> <br>
    Country: <select name="country" id="country">
      <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">
  </form>
</body>

<script>
function StateFirstChanged() {
  var first_name_input = document.getElementById("firstname");
  // Reset the value of the first name field.
  first_name_input.value = '';
  window['refill'] = true;
  console.log('An event happened that should trigger a refill.');
  // Hide the first, display the second.
  var state_first = document.getElementById("state_first");
  state_first.setAttribute('style', "display: none;");
  var state_second = document.getElementById("state_second");
  state_second.removeAttribute('style');
}
</script>
chromium/chrome/test/data/autofill/dynamic_form_visibility_switch.html
