Make text input fields remember previously entered data

Question

My text inputs seem not to remember values that have been typed before. For example, many websites that I don't even have an account on, but have, for example entered my email address before (buying a train ticket as a "guest") give me a sort of dropdown with email addresses I've used in the past. Yet my form does not do this. It obliges me to type it out completely every time. It seems to be the opposite of this question...

I have simple inputs like <input type="text" id="firstName" placeholder="First name" />

And they are submitted with simple a jQuery Ajax post. Something like this. However the Ajax isn't working on jsbin on that example, I just show it to demonstrate my basic structure. Is there a jQuery plugin for this? Is there a way I can control this seemingly browser-driven behavior?

Answer 1

I had the same problem. For me, it was when developing in ASP.NET MVC. Anyway, the solution I had to make was a combination of things:

1. Having the name attribute defined in my input tags

2. Having autocomplete="on" in my input tags

3. Changing the button tag to be a type="submit" tag

4. Enclosing all my input controls in a <form> tag

Answer 2

In most browsers, you can make your browser display values previously entered in input fields by giving a name to the input. For example:

<input type="text" id="firstName" placeholder="First name" name="firstName" >

If the field has no name attribute, the browser won't show suggestions.

Also check if javascript prevents the default action on submit.

Answer 3

some browsers adamantly refused to remember an input until i "remembered it manually" via (ab)using localStorage... this worked for me:

    {
        // hack to remember last error id on page refresh
        // can't believe i have to do this, but my browser don't want to remember it itself, 
        // ... not sure why
        let errorid_element=document.querySelector("#errorlog_id");
        let rememberHack=function(){
            localStorage.setItem("last_id_remember_hack",errorid_element.value);
        };
        errorid_element.addEventListener("input",rememberHack);
        errorid_element.addEventListener("change",rememberHack);
        errorid_element.value = localStorage.getItem("last_id_remember_hack");
    }

Answer 4

It may vary depending on the browser and user privacy settings and sorts, and it should be on by default, but try adding autocomplete="on" to your input tag.

Answer 5

In bootstrap you would fill up the for='' field

Example:

    <div class="custom-control custom-checkbox checkbox-lg">
      <input type="checkbox" class="custom-control-input" id="TER" value="TER">
      <label class="custom-control-label" for="TER">Land/Lot</label>
    </div>

^ Notice how for and id values match

Answer 6

If you are using React

• give each input a name
• wrap in <form>
• prevent default form action
• add type="submit" on any submission buttons, and do not include onClick. Let the onSubmit callback handle that.

Now hitting enter or clicking the button will remember the value entered.

<form onSubmit={(e) => {
        e.preventDefault(); // prevent new page from being opened
        // do something with input data
     }
}>
    <input name="myInput" ... />
    <button type="submit" ... />
</form>

https://reactjs.org/docs/forms.html

Answer 7

The below worked well for me. I'm copying and pasting the chunks that matter so you may need to tweak it slightly to get it to work for you but it should largely "just work".

$(function(){
  function save_user_inputs(ev){
    $("input").each(function(index, $input){
      if ($input.name == ""){
        return true;
      }       
      localStorage.setItem("input." + $input.name, $input.value);
    }); 
    return true;
  } 

  function load_user_inputs(){
    var input_names = Object.keys(localStorage);
    for(var i=0; i<input_names.length; i++){
      var input_name = input_names[i];
      if (!input_name.startsWith("input.")){
        continue;
      }   
      var $input = $("[name='"+input_name.split(".")[1]+"']")
      $input.val(localStorage[input_name]);
    }   
  } 
        
  $(document).on('submit', save_user_inputs);
  load_user_inputs();
});

Answer 8

You may try autocomplete="on"

<input type="text" id="firstName" placeholder="First name" autocomplete="on" />

Answer 9

Add attribute autocomplete="off" to your input.