I have two input fields that had the user access card and password. and the user click on submit button to authenticate.
I'm using DTM in my app to capture the user navigation but I want also to get the values of those field to my DTM so I would know who the user is.
And here is what I tried but with no luck.
Created Data element as below:
And created Event based rule. But not sure how to get the values to be shown in my report:
Thanks for your help.
Example Form
Since you did not post what your form code looks like, here is a simple form based on what I see in the screenshots you posted, that I will use in my examples below.
<form id='someForm'>
User Name <input type='text' name='userName'><br>
Password <input type='password' name='userPass'><br>
<input type='submit' value='submit' />
</form>
Data Elements
Okay first, let's go over what you did wrong.
1) You said you want to capture two form fields, but you only have one data element...maybe? You didn't really convey this in your question. I just assumed as much because of what you did throughout the rest of the screenshots. But to be clear: you should have two separate data elements, one for each field.
2) The CSS Selector Chain value you used is just input, so it will select the first input field on the page, which may or may not coincide with one of the input fields you are looking to capture. So, you need to use a CSS selector that is unique to the input field you want to capture. Something as simple as input[name="userName"] will probably be good enough (but I cannot confirm this without seeing your site). You will need to do the same for the 2nd Data Element you create for the other input field (e.g. input[name="userPass"])
3) In the Get the value of dropdown, you chose "name". This means that if you have for example <input type='text' name='foo'>, it will return "foo". Since you want to capture the value the user inputs, you should select "value" from the dropdown.
Solution
Putting all the above together, you should have two Data Elements that look something like this (one for the user name field and one for the password field; only one shown below):
Event Base Rule
Okay first, let's go over what you did wrong.
1) The value you specified in Element Tag or Selector is input. You aren't submitting an input field; you are submitting a form. Input fields don't even have a submit event handler! Your Event Type is "submit", so at a minimum, Element Tag or Selector should be form. But really..
2) Ideally, you should use a CSS Selector that more directly and uniquely targets the form you want to trigger the rule for. For example, maybe the form has an id attribute you can target in your CSS Selector. Or maybe the form is on a specific page, so you can add additional conditions based on the URL. What combination of CSS Selector or other conditions you use to uniquely identify your form depends on how your site is setup. In my example form above, I added an id attribute, so I can use form#someForm as the CSS Selector.
3) You checked the Manually assign properties & attributes checkbox, and then added two Property = Value items. This tells DTM to only trigger the rule if the input has a name attribute with value of "userName" AND if it has a name attribute value of "userPass". Well name can't have two values at the same time, now can it!
<input name='foo' name='bar'> <!-- bad! -->
All of this needs to be removed, because again (from #1), you should be targeting a form, not an input field.
4) For good measure, looks like you added a Rule Condition of type Data > Custom, but the code box is empty. The rule will only trigger if the box returns a truthy value. Since there is no code in the box, it will return undefined (default value returned by a javascript function if nothing is returned), which is a falsey value. This also needs to be removed.
Solution
Putting all the above together, the Conditions section of the Event Based Rule should look something like this:
But again, ideally your conditions should be more complex, to more uniquely target your form.
Referencing the Data Elements
Lastly, you can reference the input fields to populate whatever fields in the various Tool sections with the %data_element% syntax. For example, you can populate a couple of Adobe Analytics eVars like this (data element names reflect the examples I created above):
Or, you can reference them with javascript syntax in a custom code box as e.g. _satellite.getVar('form_userName');
Additional Notes
1) I Strongly recommend you do not capture / track this type of info. Firstly, based on context clues in your post, it looks like this may count as Personally Identifiable Information (PII), which is protected under a number of laws, varying from country to country. Secondly, in general, it is a big security risk to capture this information and send it to Adobe (or anywhere else, really). Overall, capturing this sort of data is practically begging for fines, lawsuits, etc.
2) Note that (assuming all conditions met), the "submit" Event Type will track when the user clicks the submit button, which is not necessarily the same thing as the user successfully completing the form (filling out all the form fields with valid input, etc.). I don't know the full context/motive of your requirements, but in general, most people aim to only capture an event / data on successful form completion (and sometimes separately track form errors).
Related
I'm writing an edit function (plain javascript & HTML / Chrome / Windows 10).
The data is in localStorage as a series of records, just 2 records in the toy code mentioned below.
I want the user to specify the number of the record to edit, then the code should pre-fill the textarea field with the retrieved content of that record. I want to allow the user to make changes and then press a Store button to store it back in localStorage.
My problem is that when I prefill the input field, I see the record content briefly and then the input field clears. I've tried .value and .defaultValue
editField.value = localStorage.getItem('jnl' + locStoreNo).replace(/(.*?) `\d*?`/, "$1");
and
editField.defaultValue = localStorage.getItem('jnl' + locStoreNo).replace(/(.*?) `\d*?`/, "$1");
the result is the same. (The regex is to hide a sequence number)
The code is in a JSFiddle here: https://jsfiddle.net/roygrubb/zxedbfqr/2/
That performs more or less the same - it shows the value briefly - but then does something different: It goes to a 404. I don't understand this either ¯_(ツ)_/¯
What I'm trying to do seems so basic, that I think I must be missing something blindingly obvious.
What have I missed? Thanks!
Whenever you've got a <form> that you want to handle through JavaScript, you have to ensure that the default form submission action does not happen. If the <form> does not have an "action" attribute, the default is to reload the current page.
By default, a <button> element will be assumed to have "submit" as its type. To prevent form submission, therefore, the simplest thing to do is make the button have "button" as its type.
That may not be all you need to do, depending on the details of the form. It may be necessary (or simply a good defensive move) to have a handler for the "submit" event on the form to prevent the default action.
I know it is possible to embed form values into the URL as parameters if the form has an ID assigned to it. But what if it does not have an ID?
For example the "Search" field in this page:
http://au.autodesk.com/speaker-resource-center/call-for-proposals/voting
<input type="text" placeholder="Search " class="form-control ng-valid ng-dirty search-box" ng-model="search.$" ng-change="updateButtons()">
I know it is possible to embed form values into the URL as parameters if the form has an ID assigned to it.
That is not true.
Server-side (and occasionally client-side) code on a page may read the query string as a means to set default values for form controls (typically so that a form can be corrected and resubmitted if there were errors in the previous attempt).
In these cases, the name attributes will usually map onto the query string (because the form will generate the query string from the name attributes). Often an input will be given an id that is the same as its name.
It is entirely under the control of the site's authors.
There is no way to set values of inputs on another site without the other side providing a mechanism to allow you to do that.
There's a few different ways to do that. Looking at that HTML, it's the first text-type input inside the div, so the first method that comes to mind is this:
You could pull out the div (using the class "search-area") and then target the first text input box within that div. I don't know whether you're using jQuery or native JS or exactly what language/library/framework you're using.
JQuery would be something like:
var inputElement = $(".search-area")[0].first()
This SO answer may help:
jQuery: how to find first visible input/select/textarea excluding buttons?
Edited to add: Answer is targetting the input element. As the answer from someone else mentions.. You can't actually do what you're wanting to do with the URL.
Edited again. Misread the question. I'll leave this here in case someone else needs to know how to target an input field that doesn't have an ID. Alternatively, I have no problems if someone wants to delete this answer.
Problem is very simple. I am using certain API which is called when I click a button and some of the fields are being filled from a widget that I created
I use that widget at multiple places in my system
The problem is that when those fields are filled I need
#api.onchange('exmplple')
method to trigger them, but it doesn't (I would say it's a bug).
What would be the workaround or solution to trigger that method when those fields change whenever my widget works?
Update:
Sorry for the confusion that my question caused. I will try to explain what exactly I was thinking and why I only have tried server side things so far. The problem is that in any other situation python code api.onechange would work completely fine.
#api.onchange
def do_smth_when_country_changes(self):
if country_id = 133
self.lang = 'pl_PL'
elif:
.......more ifs
But I have fields which are filled from google maps (JavaScript code that I wrote).
<field name='autocomplete' widget='gmap_autocomplete' country_id='country_id'>
<field name='country_id'>
Here when i search for address with autocomplete field, and i click on one, country_id field will be filled with country. And Also there are some other field has to change value whenever country_id changes (for example res.partner field lang).
<field name='lang'/>
Since Python onchange method doesn't trigger country_id field I though that JavaScript would probably only thing that would solve my problem. So What I want to do is to access field coutry_id in specific form view (let's say only in view_partner_form) and when it changes access value of lag field and change it as well.
Angularjs 1.3-beta.8
This is a table of inputs, which are embedded in a form that contains other form elements.
This question is in regards to this table only. Here are a few things to keep in mind.
There are no other nested forms, just one master form, which we will call masterForm and contains ALL form elements, not just this table.
Rows are added dynamically to the form using a button you cannot see. Rows can also be deleted by the red circle on the left of the table.
There may be hundreds of rows, or only one; but there must be at least one row.
The only rows that are relevant are the ones that have a payment amount entered.
Each input may have no validation or some validation (dynamically assigned from the server per input).
This means that each individual input will differ and could be this
$scope.masterForm.thisInput.$error = {required: true, format: true, somethingnew: true, etc...}
or it could be nothing as seen in the table picture; only the 'Account Number' and 'Total Due' fields have validation errors.
Question: How can I disregard the input validations in each row input, THAT HAS VALIDATION SET, and only when the 'Payment Amount' is filled in?
The question is a little misleading, as I know how to trigger a state change in Angularjs, however everything I have tried does not change the form validation.
Here is what I have tried -
I did search SO, but did not find an answer that worked in this case.
When the form is submitted, it flags all inputs that do not pass validation. I have hijacked the submit function to first run through the form object and $setValidity state of each "named" input, like so
loop through $scope.masterForm and look for input name fields
When you find the relevant fields of table inputs that have no payment amounts
then run through each input.$error and then input.$setValidity of each
$error (like required: true), set these to false (like required: false) - thanks
This does set each input to valid -
input.$valid (is true)
input.$invalid (is false)
input.$error (are all set to false)
However, all the inputs still show invalid as shown in the table.
There is also the masterForm object which does contain each input name object. In the form object there are also masterForm.$error objects which are the same as the input.$error objects, but just that ALL the form $error objects are gathered together. I have also tried to change these values, which does happen to the inputs I wanted to change, but the form is still invalid.
I have also tried to ng-if each row, meaning I removed them on submit if they didn't meet requirements, but still the form see's them and states the form is still invalid.
Even though I can setValidity for each input, the form does not care. Is this because I have to change the $error state in the form AND the input object? Shouldn't they change state together?
Is this just because I'm using 1.3-beta.8?
Is there an easier way to to this?
Could I have more control using the $validators pipeline available in 1.3-beta.12+?
There is no need for code as I have none that works. If you know how to do this please provide YOUR example.
The jQuery validation engine plugin has the ability to do ajax validation; which works gret except for one small catch...
It sends off the field ID instead of the field name to be validated.
Why is this an issue?
I have a simple item that to create it only requires one textbox to be filled out; so we have this as a modal on every page for managing said item.
We use the jQuery validation engine plugin to validate that the entered value is unique.
Now this also means that the modal shows up on the edit page. Which obviously has the title in a field as well for you to edit.
And we want this field to be validated as well but because the validation engine sends across the field ID instead of the field name we must give the two fields different ID's
e.g. createtitle and edittitle and then on the backend have
if($fieldId == 'createtitle' || $fieldId == 'edittitle'){$fieldId = $fieldId}
Which really is an ugly approach; is there any way to get it to use the name; or another attribute instead?
Maybe this plugin could help you. It uses class names of your element to validate.