The Autofiller Widget requires CSS selectors to do it's job. Typically these are specified as parameters in the configuration for the widget.
What do you do though if your fields change dynamically?
Option 1: Use More Complex Selectors
This first option is to use more complex CSS selection syntax. Maybe you don't have an ID, but maybe all of your fields have some name value or other attribute value that is unique. In these cases, you could use a more dynamic selector to find your fields. A good place to start is http://www.w3schools.com/cssref/css_selectors.asp
For example if the fields all have an attribute of name, but the name changes based on which flow the user has taken through registration. However, the name always starts with a consistent pattern, e.g., name="firstname_path2_paylater_etc_etc".
In this case, you can use a CSS selector like:
[name^="firstname_"]
This selector tells the javascript to find any element where the name attribute starts with the letters "firstname_". This will essentially allow the Autofiller Widget to ignore the remaining parts of the name attribute, and find and fill the field regardless of the remaining characters in the attribute.
Selector syntax allows you to get pretty specific. If you need help formulating the syntax, we're here to help.
That may or may not meet your needs, depending on the complexity of your registration flow.
Option 2: Change the Selectors With Javascript
Another alternative is to load the registration widget in a javascript block and modify the names of the fields to look for within the page itself. For example
<script>
$(function() {
var howwegothere = ... // some javascript...
if (howwegothere !== null) {
switch(howwegothere) {
case "path1":
InGo.ingoWidget({ widgetId: "MNHYASDKJFIO50TRRLD0SDFSD", "fields": {"user.firstName": "#F27", "user.lastName": "#L14"} });
break;
case "path2":
InGo.ingoWidget({ widgetId: "MNHYASDKJFIO50JRRLD0SDFSD", "fields": {"user.firstName": "#F51", "user.lastName": "#L454"} });
break;
case ...
...
default:
...
}
}
});
</script>
Something like this allows you to dynamically modify the CSS selectors the Autofiller will use on-the-fly during page load. In this case, the elements that we're looking for have a programatic alpha-numeric ID, which might prove difficult to write a dynamic selector to find.
Get your fill!
Hope you enjoyed this article. Thanks!