CODEWITHSUNDEEP
javascriptjqueryhtmlcss
1252748
1252748

Reputation: 15372

Make text input fields remember previously entered data

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?

Upvotes: 31

Views: 66197

Answers (9)

Tareq Saif
Tareq Saif

Reputation: 479

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();
});

Upvotes: 0

cs01
cs01

Reputation: 5773

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

Upvotes: -1

hanshenrik
hanshenrik

Reputation: 21493

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");
    }

Upvotes: 4

Robert Sinclair
Robert Sinclair

Reputation: 5416

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

Upvotes: 0

Jeff Moretti
Jeff Moretti

Reputation: 683

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

Upvotes: 23

Nguyen
Nguyen

Reputation: 423

Add attribute autocomplete="off" to your input.

Upvotes: -6

Andrei Nemes
Andrei Nemes

Reputation: 3122

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.

Upvotes: 3

Georgios Balasis
Georgios Balasis

Reputation: 353

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.

Upvotes: 20

mmohiudd
mmohiudd

Reputation: 320

You may try autocomplete="on"

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

Upvotes: -4

Related Questions