After sending the form (in javascript and ajax) I execute a script that resets the form with a loop (node as input element).
node.value = ""
The problem is that if the inputs have been auto-filled, the placeholder text doesn't reappear. This problem doesn't exist on Chrome.
Here are three forms, each with an event listener. In the first callback function I clear the form using input.value = ''; and in the second callback I use e.target.reset(); for clearing the form. Both work fine. After the callback functions are done the placeholder text will appear again. I tested it using Bitwarden for filling in the form in both cases. In the third form I use JS for setting the value. It also works fine.
document.forms.login_value.addEventListener('submit', e => {
e.preventDefault();
fetch('data:text/plain,test').then(res => res.text()).then(text => {
console.log(text);
[...e.target.elements].forEach(input => input.value = '');
});
});
document.forms.login_reset.addEventListener('submit', e => {
e.preventDefault();
fetch('data:text/plain,test').then(res => res.text()).then(text => {
console.log(text);
e.target.reset();
});
});
document.forms.login_js.addEventListener('submit', e => {
e.preventDefault();
fetch('data:text/plain,test').then(res => res.text()).then(text => {
console.log(text);
[...e.target.elements].forEach(input => input.value = '');
});
});
document.forms.login_js.username.value = "test";
document.forms.login_js.password.value = "test";<form name="login_value">
<label>Username:<input type="text" name="username"
placeholder="username" autocomplete="on"></label>
<label>Password:<input type="password" name="password"
placeholder="password" autocomplete="on"></label>
<button>Login</button>
</form>
<form name="login_reset">
<label>Username:<input type="text" name="username"
placeholder="username" autocomplete="on"></label>
<label>Password:<input type="password" name="password"
placeholder="password" autocomplete="on"></label>
<button>Login</button>
</form>
<form name="login_js">
<label>Username:<input type="text" name="username"
placeholder="username" autocomplete="on"></label>
<label>Password:<input type="password" name="password"
placeholder="password" autocomplete="on"></label>
<button>Login</button>
</form>