- TLC Home Home
- Discussions Discussions
- Documentation Documentation
- Knowledge Base Knowledge Base
- Education Education
- Blog Blog
- Support Desk Support Desk
05-11-2016 02:18 PM
05-11-2016 03:05 PM
@tglaittli sounds like something that should be part of the data layer as part of the next link or view event. I would reach out to your Deployment Team. These types of questions are pretty common for a Tealium Deployment and differ on a per web applicaiton basis.
05-11-2016 03:44 PM
Hi @tglaittli,
There are a few ways to do this. Let me share an approach I might use. My example assumes that you have jQuery loaded on your page.
First is to determine the selector of the input element. I'm going to use an example from Tealium's Contact page and use the phone number input box that is available. However, the method is the same and you can apply this to your zip code example.
Here is the example page:
I've opened this in Chrome and activated the Developer Tools. Then, on the input box, right-clicked and selected Inspect in the pop-up window that displays. What you see in the image above is the results after selecting Inspect.
This input box has an ID of 'Phone'. So the selector would be '#Phone'. To verify this is correct, you can add test the selector using
jQuery('#Phone')
through the Console:
The response confirms that jQuery locates this input box as expected. Had this been incorrect, the Console would respond with '[ ]'.
Your input element may not have an ID. If it has a class, then you can use the value of the class. jQuery uses '.' for classes (as you saw '#' is used for IDs). Using the class above is a bit trickier since there are spaces, which just get replaced with '.', resulting with
jQuery('.mktoField.mktoTelField.mktoHasWidth.mktoRequired.mktoValid')
If neither of those are available you can always use the name of the input box, as follows
jQuery("input[name='Phone']")
Now that we have jQuery targeted on the element of interest, the next step is to read the information within the text box. You can use the jQuery .val method. Applying that to my Phone number example, this results with:
From here it depends on what you want to do with the value. You mention capturing it on a button click. You can use similar steps to find the ID or class of the button. From my example, there is a Submit button on the page. Repeating the above step, using Inspect, I find I can use class mktoButton:
jQuery(".mktoButton")
To combine these I'll demonstrate using in a Events jQuery onHandler extension. Here's an example using my Phone number input element:
Note that I've created a Data Source 'customer_phone' to capture the value in my Phone input box.
You could also create this in a Javascript extension. Here's an example:
I've taken a shotgun approach to this. Your solution will depend on the configuration of your input element and submit button as well as the results to seek after you have captured the zip code.
Let me know if this has helped.
Thanks, David
05-17-2016 01:04 AM
Thanks for your detalied explanation on tracking input field values using jQuery on handler.
I have querty on this. Could you please tell me if i want to capture more than four input field values with the same variable.
Example: i want to capture the four input field values in single variable as event_id: "input field values"
Appreciate your help in advane! Thanks!
05-17-2016 09:37 PM
05-18-2016 02:55 PM
Hi @Srinivasan,
I think we are going to need some more details to properly address your question. Feel free to reach out to your Account Manager to get a Solutions Engineer to help you with this. That way we can arrange a screen share and walk through getting this working for you.
Thanks, David
02-07-2020 01:09 PM
What if the website in question doesn't load JQuery and all we want to do is capture the click to the button? The example for javascript starts with JQuery..pesky little thing...So, if I create a data layer object called click_tracking and want to put the ID of the button clicked as it's value...
Copyright All Rights Reserved © 2008-2023