How to track form info before submit button click?

[#1]

I have to track the info on a pop up form when user click the submit button. I noticed that when the rule fire and if the form submit successfully, then I can not get any form info. If the form submit fail, then I can get all the info. This seems to me that the click button happen first and then the info already lost. Is there a way allow to to grab the form info before the form submit?

Thanks

[#2 · Accepted solution]

One way would be to store the values of the form fields as session storage items, once a 'blur' event occurs on the input field.

For example, if you're using jQuery and you have simple text input fields you could do:

$('input').on('blur',function() {
     // cancel if no data or if the input field is type "submit"
     if (!$(this).val() || $(this).attr('type') === 'submit') return;
     // get the value of the input field
     var inputFieldValue = $(this).val();
     // get the field name
     var inputFieldName = $(this).attr('name') // or your own selector for the field name - you know your app better than i do!
     // write the data to session storage
     if (inputFieldValue && inputFieldName) sessionStorage.setItem('fa_field_' + inputFieldName,inputFieldValue);
});

From here, just can make sure that your custom event process scrapes the content of session storage items that have an index of 'fa_field_', and allocate them to their respective eVars or context data properties (depending on your implementation).

For example, let's assume your form has four different input fields:

Input Field Name	Session Storage Item Name	Input Field Value / Session Storage Item Value	Adobe Analytics Conversion Variable
animal	fa_field_animal	Sloth	eVar1
fruit	fa_field_fruit	Pineapple	eVar2
snack	fa_field_snack	M&M's	eVar3
drink	fa_field_drink	Water	eVar4

From here, we want to allocate each of the of these input field values to a respective s.evarX property so that it's included in the server call to Adobe Analytics:

// convert session storage items into an array

var sessionStorageItems = [];

var keys = Object.keys(sessionStorage);

var i = keys.length;

while(i--) {

     sessionStorageItems.push(sessionStorage.getItem(keys[i]));

}

// now we want to set the respective values against their respective evars

for (var x = 0; x < sessionStorageItems.length; x++) {

     if (/^fa\_field\_/.test(sessionStorageItems[x])) {

          // check item name and allocate to evar

          switch(true) {

               case /animal/g.test(sessionStorageItems[x]):

                    s.eVar1 = sessionStorage.getItem(sessionStorageItems[x]);

                    break;

               case /fruit/g.test(sessionStorageItems[x]):

                    s.eVar2 = sessionStorage.getItem(sessionStorageItems[x]);

                    break;

               case /snack/g.test(sessionStorageItems[x]):

                    s.eVar3 = sessionStorage.getItem(sessionStorageItems[x]);

                    break;

               case /drink/g.test(sessionStorageItems[x]);

                    s.eVar4 = sessionStorage.getItem(sessionStorageItems[x]);

                    break;

          }

     }

}

// trigger custom s.tl() process

...

Hope that helps!

[#3]

Sorry, there was additional code examples in there for scrapping the session storage items and adding the right ones to the respective s.eVarX property, but it didn't save the post properly when I commited the reply

[#4]

It should work if you're triggering the image request on the onClick event. Does the information instantly disappear on your form when you hit submit? That would be the only reason why I'd anticipate it not working.