Javascript to autofill a form drop down - displayed versus stored value

[Taylor_McCarty]

So I have been asked by our Marketing VP to see about auto-filling an interested product field on our forms based upon the page the user is currently on. The idea being to limit the number of fields they have to actually fill something out. I know this is possible, but the question I do have is if the Javascript can be set up such that the form is autofilled with the displayed name of the product, but still actually capture the stored value upon form submission. 

[SanfordWhiteman]

---

but the question I do have is if the Javascript can be set up such that the form is autofilled with the displayed name of the product, but still actually capture the stored value upon form submission. 

---

Not sure exactly what you mean here.

Are you distinguishing between a display name (friendly name) and some other more technical value to be stored on the back end? If so, you can't really use a single field for this (there's a crazy hack for it but let's ignore it for the moment) but 2 fields, one displayed and one hidden, will work.

[Taylor_McCarty]

So on the form we have programs listed with a friendly name but the value that is actually captured and stored when the record created is an 18 digit number that relates to our SFDC instance. So I was wondering if the script could populate the field with the friendly name, but when the form is submitted it still passes over the 18 digit SFDC number, not the friendly name.

[SanfordWhiteman]

When you autofill a field (from URL query params, etc.) it's based on the server value (that is, the alphanumeric SFDC ID).

If you want to select the <option> that has value="ABC0123" then you pass program=ABC0123 in the URL.

But if the field is a <select>, it will still show the display name of the corresponding option (like "My Program" or whatever you have). It will send "ABC0123" to the server, since that's the value of the option. It won't create a new <option> whose friendly name and server value are both "ABC0123". So I don't see yet how the default behavior departs from what you describe.

[Taylor_McCarty]

So in this case no URL parameters are being passed, I wanted the script to look to the current URL the form loaded on and based upon the URL path, to pick up on that and then autofill the Program field with the corresponding option. Then if the user clicks on a different program page, when that page loads again the script looks at the URL and autofills in the program. So that it is one less thing the user has to select, but the drop down is still there in case the user decides to change it themselves.

This may not be a good thing for us to do and something that we should avoid, but given that it was something my boss asked me to research, here I am trying to accommodate the request.

[SanfordWhiteman]

What is the structure of the URL exactly (where does the Program field appear)?

[Taylor_McCarty]

So the URL structure would be something like /programs/program1

Then was hoping the javascript could be written such that if URL contains programs/program1 then populate the program field on the form with program1, but again having the value that is stored upon submission be the 18 digit SFDC number for program 1.

Again this may not be a good idea or it may violate a best practice, just trying to do my due diligence so I can accurate report by to the VP

[SanfordWhiteman · Accepted solution]

It's totally doable and I wouldn't even consider it a bad practice — the URL just needs to be predictably structured.

You don't want to be doing "fuzzy searches" all over the URL for an occurence of something that seems a like a program, it should be in a specific place. Like in /programs/program1 you can abstract that to the URI Template /program/{programName}.