How do I capture a zipcode from an input field on a button click?

[tglaittli]

How do I get the zipcode from an input field and store it in a variable on a button click?

[brian_kranson]

@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. 

[david_bird]

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

[Srinivasan]

@david_bird

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!

[Srinivasan]

@brian_kranson Could you please help me on this.

[david_bird]

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

[bradmarcus]

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...