Custom code Data Element returning empty value

[#1]

Hi, I tried using the below custom code to capture dropdown selection values as data element. It works in console but when i input the code as a data element and check the _satellite.getVar() for this data element, it just returns an empty value "". 

My Javascript is basic and i am fairly new to Adobe Launch so step by step instructions with visuals would be great.

Thank you

var selectElm = document.querySelector("#order_retailer_name")
selectElm.addEventListener("click",function(){
var elm = this;
var selectedElm = elm.options[elm.selectedIndex].textContent;
return selectElm;
});

[#2 · Accepted solution]

That code will not work in Data Element custom code as it's asynchronous.

One of the options is as follows:

1. create a rule with Click event mapped to the CSS selector #order_retailer_name
2. define a custom variable inside Conditions via a custom code
   var elm = this;
   _satellite.setVar('name', elm.options[elm.selectedIndex].textContent)
   
3. Reference the custom variable by name as a data element where necessary

[Andrey_Osadchuk]

Hi @Andrey_Osadchuk  thank you very much for your reply, much appreciated. I have a couple of further questions in regards to this which i hope you can help me with. I am trying to capture the successful submission of when user selects a retailer, inputs a voucher code and clicks Apply code. This then takes the user to a new page!

Visual below;

From your previous solution, i am thinking to create two rules for "Select retailer" and "voucher code" input following the method you proposed. Then i will create a third rule which will capture the Apply code click but with a condition of only firing the rule if the next page loads using page path. Under actions, i was thinking to use two eVars which will use the data elements that will be created in the first two rules and an event. See example below;

1. Activation - Brand v80
2. Activation - Voucher Code v81
3. Activation - Successful Voucher Application e27

I tried using this approach and the rules fire but it says the conditions have not been met (this happens for all 3 rules).

Any guidance would be much appreciated.

Thanks,

Kamil

[Andrey_Osadchuk]

Kamil,

You should add "return true;" at the end of the custom code to meet the condition criteria.

For the use case you have described, I would consider creating a single rule that gets fired on the button click. At that moment it should be possible to pull the values from both inputs using a custom JS code. In other words, if you are confident in JS and do not need to capture the input fields values unless the visitor submits the form, consider a single rule.