CODEWITHSUNDEEP
javascriptjqueryhtmlformsautofill
neanderslob
neanderslob

Reputation: 2693

Jquery Autofill repeated form fields

I'm attempting to create autofill functionality for a set of form fields that have (potentially) the same data. My situation is as follows: I have a form in which the user enters the contact information for people serving particular roles within a company (shareholders, officers, contractors, employees). So, for example:

For shareholders I have:

First Name:
Last Name:
Email:
Telephone:
Street:
City:
State:
Zip:

And for directors I have the same fields:

First Name:
Last Name:
Email:
Telephone:
Street:
City:
State:
Zip:

Often, there's a lot of overlap between the two (directors are often shareholders in a company). So if a user fills out Don Draper at 42 Bullet Park Road in Ossining NY as shareholder and then wants to add him as a director, I would like some kind of autofill function to offer to fill in the info when they start filling out the director functions.

I figure I can write up a JavaScript plugin from scratch if I need to but I was wondering if I might not need to reinvent the wheel. Is there something in jquery that would take care of much of this for me? Or is there a set of best practices for doing this? Feel free to share.

I'm certainly not looking for anyone to write this for me, but a nudge in the right direction would be appreciated.

Workarounds anticipated I do realize that the need for this could be avoided if I just provide fields for a generic person and then dynamically add roles (shareholder, director or whatever) on top of that person. I prefer to structure it as I've described out above for organizational reasons.

Many thanks in advance for any suggestions!

Upvotes: 0

Views: 257

Answers (1)

kockburn
kockburn

Reputation: 17616

I went ahead and made a little demo that will fill out a person if it notices the name is the same. http://jsfiddle.net/Grimbode/fqhrqwzt/1/ ( to validate a person.. click the checkbox when the row of inputs is filled out )

You'll be needing to create a search script client side. To be able to do this efficiently and with wasting the least amount of time possible you'll be creating a list of information relative to each person being filled out.

You'll need to initially create:

var persons = [];

You have a couple choices for the next part:

  1. You could fill persons by creating another {} list where you fill the information like so: { first: 'john', last: 'smith' /* ... */}
  2. You could create a class Persons like so:

Class:

function Person(o){
  this.first = o.first || 'unknown';
  this.last = o.last || 'unknown';
  //rest of the attributes
}

In use

persons.push(new Person({
  first: 'john',
  last: 'smith'
}));

Then you create a: (supposing your form has a class name of '.person')

$('.person input').on('keyup', function(){
    var $this = $(this);
    var n = $this.attr('name'); //supposing the input name corresponds to the kind of input it is ( first, last, email, number, etc )
    var v = $this.val();

//now you need to loop through persons and see if you get a hit
$.each(persons, function(a, b){
        if(n === 'first' && b.first === v){
            $this.next().val(b.last);
        }else if(n === 'last' && b.last ===v){
            $this.prev().val(b.first);
        }
    });
});

You may not want to check everytime they press a key but when they change inputs. You would have to use an .on('change', function(){}) event.

Unfortunately, I am unsure if there is something like this that already exists. If it does, you'd still have to adapt it to your specific requirements.

Keep in mind you could also create getters and setters with js classes.

Person.prototype.function = getFirst(){
  return this.first;
}

Upvotes: 1

Related Questions