| <!-- |
| This page enables to simulate the following scenario: |
| On password form submit, the page's JavaScript deletes that form, creates |
| another one, almost an exact copy of the deleted form, just with a different |
| action, and submits the new one. |
| --> |
| <html> |
| <head> |
| <script src="form_utils.js"></script> |
| <script> |
| function preCreatePasswordForm() { |
| // Remember the filled in password + destroy the old form. |
| var old_password = document.getElementById('password').value; |
| document.getElementById('contains-form').innerText = ''; |
| // Spin the message loop: it's not clear spinning it is needed, but |
| // let's make sure the deletion side effects, if any, have time to |
| // propagate and don't cause flakes. |
| window.setTimeout(createPasswordForm, 0, old_password); |
| } |
| function createPasswordForm(old_password) { |
| // Create and append the new password form. It is almost the |
| // same as the deleted one, only with a different action. |
| document.body.appendChild(createSimplePasswordForm()); |
| // Spin the message loop again, to let the creation settle in. |
| window.setTimeout(postCreatePasswordForm, 0, old_password); |
| } |
| function postCreatePasswordForm(old_password) { |
| // Copy over the old password + add a dummy username, and submit |
| // the new form. |
| document.getElementById('username').value = 'test'; |
| document.getElementById('password').value = old_password; |
| document.getElementById('submit-button').click(); |
| } |
| </script> |
| <title>Test dynamically created password form</title> |
| </head> |
| <body> |
| <div id="contains-form"> |
| <form action="none.html"> |
| Old Form (to visually distinguish it from the form it is replaced with): |
| <label for="username">Username</label> |
| <input type="text" id="username" name="username"> |
| <label for="password">Password</label> |
| <input type="password" id="password" name="password"> |
| <input type="submit" id="submit-button" value="Don't click!"> |
| </form> |
| <button id="non-form-button" onclick="preCreatePasswordForm();"> |
| Click! |
| </button> |
| </div> |
| </body> |
| </html> |
