0

Ok so...like many other posts this is driving me nuts. Chrome is continually offering autocomplete suggestions for fields that I would rather it not be on. It, along with the soft keyboard take up the whole page which blocks the view for the user / the form is not intended to fill our the users data but rather a new address that would be previously unknown.

So far I've got these both on

<form autocomplete="off">

and

<input autocomplete="randomstringxxx">

Their effect is noticed and chrome is no longer filling the whole form - but it STILL wants to suggest single field suggestions for each element in my form.

I've finally realised that its now picking up the id/name fields from my form elements.

i.e the below will give me a list of names I have used before.

<input id="contact_name" name="contact_name">

Can anyone suggest a way to stop this without renaming the elements? They are tied to fields in my database and ideally I would not have to manually rename and match up these together.

example -

https://jsfiddle.net/drsx4w1e/ with random strings as autocomplete element attribute - STILL AUTOCOMPLETING

https://jsfiddle.net/drsx4w1e/1/ with "off" as autocomplete attribute. - STILL AUTOCOMPLETING

https://jsfiddle.net/6bgoj23d/1/ example no autocomplete when labels / ids/ name attr are removed - NOT AUTOCOMPLETING

example

enter image description here

8
  • Have you tried using autocomplete="off" for all form inputs?
    – Karakuchi
    Mar 21, 2022 at 22:49
  • yes - it just ignores it Mar 21, 2022 at 22:51
  • this is strange, because it doesn't do autocomplete for me when its set to off. would you mind adding your html to your question?
    – Karakuchi
    Mar 21, 2022 at 22:57
  • see my jsfiddle Mar 21, 2022 at 22:58
  • on your inputs you have put autocomplete="None" this will turn the autocomplete on. either remove autocomplete="None" or change it to autocomplete="off"
    – Karakuchi
    Mar 21, 2022 at 23:01

2 Answers 2

1

I know this isn't ideal because it changes the name of the inputs but it only does it temporarily. Changing the name attribute is the only way I found that completely removes the autocomplete.

This solution is all in JS and HTML but I think it would be better if it was implemented with a server side language such as PHP or Java.

I found autocomplete="none" works best for chrome but it doesn't fully turn off auto complete.

How it works

So, on page load this solution adds a string of random characters to each input name.

eg. 'delivery_contact_name' becomes 'delivery_contact_nameI5NTE'

When the form is submitted it calls a function (submission()) which removes the random character that were added. So the submitted form data will have the original names.

See solution below:

<html>
  <body>
    <form autocomplete="none" id="account_form" method="post" action="" onsubmit="return submission();">
     
        <div class="my-2">
          <label for="delivery_contact_name" class="">*</label>
          <input autocomplete="none" class="form-control" id="delivery_contact_name" maxlength="200" minlength="2" name="delivery_contact_name" required="" type="text" value="">
        </div>
        <div class="my-2">
          <label for="delivery_telephone" class="">Telephone*</label>
          <input autocomplete="none" class="form-control" id="delivery_telephone" maxlength="200" minlength="8" name="delivery_telephone" required="" type="tel" value="">
        </div>
        <div class="my-2">
            <label for="delivery_address_1" class="">Delivery Address*</label>
            <input autocomplete="none" class="form-control" id="delivery_address_1" maxlength="50" minlength="2" name="delivery_address_1" required="" type="text" value="">
          </div>
          <div class="my-2">
            <label for="delivery_address_2" class="">Delivery Address*</label>
            <input autocomplete="none" class="form-control" id="delivery_address_2" maxlength="50" minlength="2" name="delivery_address_2" required="" type="text" value="">
          </div>
          <div class="my-2">
            <label for="delivery_address_3" class="">Delivery Address</label>
            <input autocomplete="none" class="form-control" id="delivery_address_3" name="delivery_address_3" type="text" value="">
          </div>
          <div class="my-2">
            <label for="delivery_address_4" class="">Delivery Address</label>
            <input autocomplete="none" class="form-control" id="delivery_address_4" name="delivery_address_4" type="text" value="">
          </div>
          <div class="my-2">
            <label for="delivery_address_postcode" class="">Delivery Postcode*</label>
            <input autocomplete="none" class="form-control" id="delivery_address_postcode" maxlength="10" minlength="6" name="delivery_address_postcode" required="" type="text" value="">
          </div>
        <input type="submit" name="submit" value="Send">
    </form>
  </body>
  <script>
    
      //generate a random string to append to the names
      const autocompleteString = btoa(Math.random().toString()).substr(10, 5);

      //get all the inputs in the form
      const inputs = document.querySelectorAll("input");

      //make sure script calls function after page load
      document.addEventListener("DOMContentLoaded", function(){
        changeInputNames();
      });

      //add random characters to input names
      function changeInputNames(){
        for (var i = 0; i < inputs.length; i++) {
          inputs[i].setAttribute("name", inputs[i].getAttribute("name")+autocompleteString);
          }
      }

      //remove the random characters from input names
      function changeInputNamesBack(){
        for (var i = 0; i < inputs.length; i++) {
          inputs[i].setAttribute("name", inputs[i].getAttribute("name").replace(autocompleteString, ''));
          }
      }
     
      
    function submission(){
      let valid = true;
      //do any additional form validation here
      if(valid){
        changeInputNamesBack();
      }
      return valid;
    }
    
  </script>
</html>

1
  • 1
    Sorry I passed out was way too late, thanks. This is a great solution, why didn't I think of it!! Will test and let you know Mar 22, 2022 at 6:15
0

Thanks to @rydog for his help. I've changed it into a function that I've put into a my js file as I didn't want to manually add to each page / fire on every page - I have also added the submit event handler with js rather than adding to the on submit of the form.

GREAT SOLUTION by Rydog


function stop_autofill() {

    //generate a random string to append to the names
    this.autocompleteString = btoa(Math.random().toString()).substr(10, 5);

    this.add_submit_handlers = () => {
        document.querySelectorAll("form").forEach(value => {
            value.addEventListener("submit", (e) => {
                this.form_submit_override(e)
            })
        })
    }

    //add random characters to input names
    this.changeInputNames = () => {
        for (var i = 0; i < this.input_elements_arr.length; i++) {
            this.input_elements_arr[i].setAttribute("name", this.input_elements_arr[i].getAttribute("name") + this.autocompleteString);
        }
    }

    //remove the random characters from input names
    this.changeInputNamesBack = () => {
        for (var i = 0; i < this.input_elements_arr.length; i++) {
            this.input_elements_arr[i].setAttribute("name", this.input_elements_arr[i].getAttribute("name").replace(this.autocompleteString, ''));
        }
    }

    this.form_submit_override = (e) => {
        e.preventDefault()
        this.changeInputNamesBack()
        e.currentTarget.submit()
        return true
    }

    this.setup_form = () => {
        //get all the inputs in the form
        this.input_elements_arr = document.querySelectorAll("input");
        this.changeInputNames();
        this.add_submit_handlers();
    }

    //make sure script calls function after page load
    this.init = () => {
        if (document.readyState === "complete") {
            this.setup_form()
        } else {
            let setup_form = this.setup_form
            document.addEventListener("DOMContentLoaded", function (e) {
                setup_form()
            })
        }
    }
}

on the page that needs it

<script>
    af = new stop_autofill()
    af.init()
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.