Join Two Form Fields into One

Anonymous

Have two form fields you want to merge into one? Try this jQuery script.

In short, any time someone changes focus off one of the selected fields, the destination field will be updated.

Build the form

For example, say you want to populate a field called Full Name with the first and last name provided in the form. First, go to the Form Editor and add Full Name as a hidden field in the form.

Next, open the landing page for editing, or create a new one and add the form to the page.

Get the form IDs

You'll need to get the IDs of the form fields. Go back to the Design Studio, preview the page, then view the source in your browser. You'll need to find the entries for the fields you want to retrieve the values from and set the concatenated value into.

For example, if you're looking for the First Name field's id, it's FirstName:

<label>First Name:</label><span class='mktInput'><input class='mktFormText mktFormString mktFReq' name="FirstName" id="First Name" type='text' value="" maxlength='255' tabIndex='1' /><span class='mktFormMsg'></span>

Note: Marketo Technical Support is not equipped to troubleshoot custom javascript. It is recommend to work with an experienced developer when implementing custom javascript.

Add custom Javascript

In the Javascript below, replace the following:

destinationField: id of the field where the appended value will go ("#FullName")
joinFields: a list of the field ids it should read from ("#FirstName,#LastName")
joinString: text that goes between each item (" ")

Add the Javascript to your landing page as a Custom HTML element. Test it to make sure it works correctly, then approve the page.

// jQuery selector of the field that receives the joined value
var destinationField = "#FullName";

// jQuery selectors of the fields to be joined together.
// Use "#ID option:selected" if it's a dropdown
var joinFields = "#FirstName,#LastName;

// the text that will be added between each item
var joinString = " ";

$jQ(document).ready(function(){
   // You may need to change the field types that trigger the concatenation
   // depending on the input types you're using in the form
$jQ("input,select,option").blur( function () {
    concatFields()
});
});

function concatFields() {
$jQ(destinationField).attr("value",
     $jQ(joinFields).map(function(){
       return $jQ(this).val();
     }).get().join(joinString)
);
}
</script>