I use Angular JS for all form management now. Data for inputs are stored to their associated ngModel, which can be dealt with in the $scope of the controller.
So I have form setups like this:
<form name="addJob" novalidate data-ng-submit="addJob.$valid && addJob(job)">
<input type="text" placeholder="Job Title" data-ng-model="job.title" required />
<textarea placeholder="Brief" data-ng-model="job.brief"></textarea>
<button type="submit" data-ng-disabled="addJob.$invalid">Add Job</button>
</form>
This works absolutely fine in all major browsers (except I haven't tested IE). You'll notice I haven't included name attributes on the input or textarea. Do I need them for any reason? I've read the following before:
Note: Only form elements with a name attribute will have their values passed when submitting a form.
But my data is passed absolutely fine because it's bound to the ngModel. Was is the correct method - include or not include name attributes?
You would need name attribute on the element along with the ng-model in order for the instance to be added to the formController and any validations to happen on the control or on the form. Also if you are submitting a form (action on the form) then only the form elements with name attribute will be submitted to the server. See the native form validation and submission process.
In the ngModelController instance there is a property called $name which is nothing but the name of the element.
ngModelController source
this.$name = $attr.name;
And ng-model directive calls $addControl method on its parent formcontroller instance (if exists), which adds the instance as the value for a key with the name on the formController instance, if you do not have name then it wont be associated and no angular validations can happen.
FormController Source
form.$addControl = function(control) {
// Breaking change - before, inputs whose name was "hasOwnProperty" were quietly ignored
// and not added to the scope. Now we throw an error.
assertNotHasOwnProperty(control.$name, 'input');
controls.push(control);
if (control.$name) {
form[control.$name] = control;
}
So in your case you do not need to have a name if you do not rely on angular form controller validations or not submitting the form with an action.
Name attributes are not required for the functionality which you described because as you have stated, ng-model already binds the data to the controller. However, if you'd like to include validation for your form, the name attribute is necessary to link elements in relation to each other in the ui. Here's a link to the angularjs api documentation for inputs: https://docs.angularjs.org/api/ng/directive/input. at the bottom, you'll see the validation that I'm referring to.
To answer your question simply: No, the name attribute is not required. The only attribute required for an input in Angular is ng-Model in order to link up data to the controller.
Related
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).
I have a QuickView form on Case form .
I want to fetch a attribute value from Quckview form through Javascript .
I want email value should popup . But It is not working
Related entity name is : Acount
QuickView form name is :customerpane_qfc
attribute name is :emailaddress1
I'm using this code
alert(Xrm.Page.getControl("MyQuickView_MyQuickView_systemuser_mobilephone").getAttribute().getValue());
but this code is not working.
For getting a control in a Quick View Form with JavaScript, you use a syntax of "quickViewFormName_quickViewFormName_relatedEntityName_fieldName".
quickViewFormName is the name of the Quick View Control on your form (and yes, it should be repeated twice).
relatedEntityName is the name of the related entity.
fieldName is the name of the field in the related entity.
In your case you would thus do as follows (assuming the naming of your quick view form is as you write):
Xrm.Page.getControl("customerpane_qfc_customerpane_qfc_account_emailaddress1")
.getAttribute()
.getValue();
I prepared the form through angular.But when I need to submit the form so how can I send only all changed field or selected option values.
Need Some thing which works in all Scenario of input form fields.
DEMO: demo for ref.
on click of save how can i get it something like below one
{"list":[{"selectedOption":{"id":[]}}],"active":true,"chk_list":[{"selectedOption":{"id":["2","3"]}}],"name":"ssss"}
If you want the object to be returned to have only specific fields, then the result object should be different from the "myData" object, that you are using to actually display all the possible options to the user, etc.
Try this : http://jsfiddle.net/tc7dhep3/
I have created another variable
$scope.result
that contains the info to be sent on save button click.
The $dirty property for input elements tell if the user interacted with this, you can use this property to say which field was modified.
frm.name.$dirty
Angular doc: input - directive in module ng
You can combine this with ng-change or ng-submit to build the post object
Exemple: DEMO Forked from yours
I am facing a very strange issue.
I have a simple form with a text box. I have two buttons of type submit. If I set name = submit on one of those buttons then buttons are becoming disabled when clicked and not getting posted.
Is this the standard behavior in a boot strap or this can be changed?
You should not name any form element "submit" since that will mask/eclipse the JavaScript form.submit() function and it will not be available!
You can address any form field by its name using document["nameOfForm"]["nameOfField"] or document.nameOfForm.nameOfField. There are already form properties like document.myForm.name or methods like document.myForm.submit().
Using names of form properties or methods that are already defined by the browser will interfere with any functionality that depends on them.
Other common field names to avoid:
action
enctype
method
name
target
It appears your JS library of choice is using form.submit() to submit the form.
Do not use the properties of a form, such as submit, reset, length, method to set the name or id attribute of form, field elements. Name conflicts can cause the problem.
For example, you cannot submit the form after validating if use submit to name the Submit button:
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
DOMLint has a complete list of rules to check the markup for these kind of problems.
Reference : the name conflict warning in the official documentation.
I need to pass some hidden field from a view to a controller.
In index.chtml
<div id="root">
................
#Html.Hidden("HProjectTypeId", "somevalue")
</div>
The above is not placed in any form like Html.BeginForm or ajax form. I need to get this value in action when loading itself.
If it is placed in a form it means we can get it easily from the FormCollection or Request.Form["key"], but it is not placed in a form.
public ActionResult Index()
{
// here I need to get the hidden field "HProjectTypeId"
}
I am expecting some code in JQuery or JavaScript to do this.
thanks,
siva
The situation you're in isn't entirely clear (e.g. why isn't the hidden field within an Html.BeginForm?), but here's some suggestions:
Assuming the value you're writing into the hidden field comes from the server in the first place, how about not writing it into a hidden field at all, and using the TempData collection instead? The originating action sets the value, and it'll be persisted in session until the next request, making it available to the next action which is called
...or:
Assuming a form submission causes the Index action to be executed (as you are "making a full post"), you could use JavaScript to copy the hidden field's value into another hidden field which is included in an Html.BeginForm
...or:
Similarly, you could use JavaScript to write the hidden field's value into a cookie, and use a custom ValueProvider for cookies to access it in your action.