double_dynamic_form.html | Explore in Territory

<!-- A page that is used to test that a dynamic form fill is only triggered the first time the form changes. -->
<body>
  <form name="addr1.1" id="form" action="https://example.com/" method="post">
    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">
      <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">
  </form>
</body>

<script src="dynamic_form_utils.js"></script>
<script>
function CountryChanged() {
  RemoveForm('form');
  var new_form = AddNewFormAndFields('form', 'addr1.1');

  // Trigger a second form change on refill.
  new_form.elements[0].addEventListener('change', function(){
    RemoveForm("form")
    var new_form2 = AddNewFormAndFields("form", "addr1.2");
    document.body.appendChild(new_form2);
    window['refill'] = true;
    console.log('An event happened that should not trigger a second refill.');
  });

  document.body.appendChild(new_form);
}
</script>
chromium/chrome/test/data/autofill/double_dynamic_form.html
