Question 179187 in Html Question posted in
Some basic documentation can be found here.

Why won’t input.autocomplete clear prev hist on my form? (HTML/JS)

const form = document.querySelector("#contact-form");
const feedback = document.querySelector(".feedback");
const patternName = /^[a-z A-Z]{3,25}$/;

form.addEventListener("submit", (e) => {
e.preventDefault();
const firstname = form.firstname.value;
if (patternName.test(firstname)) {
console.log(firstname);
feedback.textContent = "";
form.reset();
resetInputHistory();
} else {
console.log("invalid");
feedback.textContent =
  "Name field must not contain special characters or numbers and should not be less than three                letters.";
}


function resetInputHistory() {
const inputFields = form.querySelectorAll("input");
inputFields.forEach((input) => {
  input.autocomplete = false;
});
}
});

I have tried setting the input.autocomplete statement to both false and "off", yet field still shows all the previous input history.

Tags:

2

Answers


  1. 0

    Solution without JavaScript

    you can see i use autocomplete (on) on my form and i also use autocomplete (off) on my email input tag inside the form. if you type any name in name input tag and submit after the reload the autocomplete work on that but if you try this for the email tag then autocomplete not work… so you can doing this from the HTML without using JavaScript….

    <!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<p>Fill in and submit the form, then reload the page to see how autocomplete works.</p>
<p>Notice that autocomplete is "on" for the form, but "off" for the e-mail field!</p>

<form action="/action_page.php" autocomplete="on">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit">
</form>

</body>
</html>
    Login or Signup to reply.
  2. 0

    In your code, you’re already setting input.autocomplete to false, but that may not have the desired effect in all browsers.

    try setting it to "off"

    function resetInputHistory() {
  const inputFields = 
  form.querySelectorAll("input");
  inputFields.forEach((input) => {
  input.autocomplete = "off";
});}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search