<!--
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>
Codebase Browser
chromium