I have a webform with some normal fields, but also some hidden fields which are set to Secure value (allows use of all tokens), so I am able to use tokens.
How do I pass values from JavaScript into those hidden fields so they are submitted with the form?
I tried using the %post[f1], %post[f2], and %post[f3] tokens, but I still don't know how to add those values with JavaScript.
You can use some basic jQuery for this.
$('input[name=INPUT_NAME]').val('NEW_VALUE');
To fully comply with Drupal theming, you probably want to wrap this up in a Drupal behavior:
(function ($) {
Drupal.behaviors.CUSTOMNAME = {
attach: function(context) {
$('input[name=INPUT_NAME]').val('NEW_VALUE');
}
}
})(jQuery);
...and of course change INPUT_NAME with the name attribute of the hidden input field and CUSTOMNAME with a descriptive camelcase name (e.g ChangeHiddenValuesForm).
As a final note: be sure to include this javascript file on the page of your form.
EDIT:
Sorry, I overlooked the Secure value reference.
Anyway, if you want the value to be secure then you shouldn't be altering it by Javascript as anyone can change it to whatever he or she likes through the DOM... That's why Webform implements the Secure value feature: the value does get submitted along with the form but simply won't be sent to the end user's browser and hereby disabling possible abuse. (For the record: Secure value uses the 'value' type from Drupal's Form API)
If you do want to change such a hidden value, you should opt for Hidden element (less secure, changeable via JavaScript) which already mentions its ability to be changed through Javascript and then use the Drupal behavior described above. Only if you do it like this it gets printed as a hidden input.
If you just want to add some JavaScript then use drupal_add_js(), for example in hook_preprocess_page() in a theme.
function mytheme_preprocess_page(&$vars, $hook) {
drupal_add_js(drupal_get_path('theme', 'mytheme') . '/mytheme.js');
$vars['scripts'] = drupal_get_js();
}
Related
I have a lightning-card in lightning web component (LWC) and want to set the label attribute with two different variables. Although this can be done through the controller but I want to do this in html file itself.
As in the code snippet, I am assigning {cardTitle} as a title, but I have another variable {totalCount} and want to concatenate the totalCount along with the cardTitle here. So lightning-card should have title like "{cardTitle}{totalCount}".
<lightning-card title={cardTitle}></lightning-card>
//In Controler js
#track cardTitle = 'Student details';
#track totalCount = 0; //This will be set by the apex controller later and will have dynamic number
When I try below code
<lightning-card title={cardTitle}{totalCount}></lightning-card>
It shows error as
multiple expressions found
.
No. You can only do it in controller JavaScript file.
I love part of the answer on SF stackexchange so I'm going to quote it here:
Your concerns about separating UI from controller logic do not apply
here as this is not a "controller". That MVC pattern is an Aura-ism.
This is the code which drives your component's functionality so it
makes sense that your JS would know about class names.
It's different but think about it that way - it'll let you write a proper unit test for the JavaScript. How you'd test logic that exists only in HTML layer? Or only in Visualforce page markup?
You can have only one expression. If you read documentation like https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_directives
you'll see
The expression can be a JavaScript identifier (for example, person) or dot notation that accesses a property from an object (person.firstName). The engine doesn’t allow computed expressions (person2.name['John']). To compute the value of expression, use a getter in the JavaScript class.
We have a simple control (textarea), where we would like to detect user input of 'proper' urls and:
1. Visually convert these 'proper' urls to links and
2. Trigger an event we can hook on to detect a 'proper' link has been entered.
Of course the contents of textareas cannot be styled. As far as we see, though, TinyMCE (via AngularUI) might be the solution along with its 'autolink' plugin. However, other than whitelisting, it is not clear how 1. we can control/manage what a 'proper' link is (for example bit.ly or deliciou.us, etc are common domains now) or 2. how we can detect an event that a proper url has been entered other than using TinyMCE's 'onChange' and using our own custom regular expressions.
Although we can imagine solutions, this is a common requirement nowadays and we're having difficulty finding pre-built solutions to achieve this. BTW, we are using AngularJS.
Any help or pointers greatly appreciated!
Thanks,
Mo
We have a very similar situation where we have a textArea where the user can enter anything and any urls are supposed to be converted and displayed as clickable links. We solved it as follows.
Display the textarea value in a div. Prior to display we translate the value with a small function like this:
$scope.transformHrefsInAnswer = function(value) {
var retval = value;
if(retval != null) {
var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
retval = value.replace(urlRegex, function (url) {
return '' + url + '';
});
}
return retval;
};
When the user clicks on the div we switch it to be a editable textarea with the actual value bound to the proper ng-model. They can then put in anything they want. When the area loses focus it switches back to a DIV and we call the transform function again so it displays as a valid, clickable link.
If all you want to do is validate you can use the transform function with minor mods to check for matches.
Hope this helps.
I am new to AngularJs and I know that I can use $dirty , $pristine, $ error in form validation. However is it necessary to explicitly create a form in
<form>..</form>
to use these properties ?
Hi since you are new to Angualar js nothing is better to start from the maker itself. As Sathish said AngularJsDocumentation is very good.
To answer your question is Yes you have to create a form explicitly because these are the properties of the form.
To understand the form better you can go to this link http://mrbool.com/the-concepts-of-angularjs-forms/29117
is it necessary to explicitly create a form
The answer to that is no.
While using a form tag is very helpful for creating sets of input tags to process as a whole (usually by sending to a server) it is not necessary for angular's purposes.
You can easily use the ng-form directive as an attribute on other tag types (not just form).
From the source code you can see that if you are using the form tag or ng-form as Element, Attribute or Class you will get the same behavior
restrict: isNgForm ? 'EAC' : 'E'
link
When my field becomes invalid, is there a way to fire a method in my js?
So for example, the user fails to fill out the name field, clicks submit, I want to:
console.log('they forgot');
Thanks
There is a $error object made available by AngularJS. This object contains all of the validations on a particular form and tells if they are valid or invalid.
To get access to this property, we can use the following syntax:
formName.inputfieldName.$error
Here is a jsfiddle sample
This document is a good reference for understanding form-validations using AngularJS.
Also, for dealing with custom validations, you can add your own directives. A sample of making such directives is given in the link above.
I'm creating a web client that works with a settings web API with angular.
There are a lot of settings and they are all optional. If I send a setting, it should be saved. Settings that are not sent should not change.
The requirement is to have one Save Changes button for all the settings.
I wonder if there is some way in Angular to implement this.
I thought about not using HTML form and collecting the data and creating an ajax request by myself but then I will lose the validation mechanism (that is working well with Angular-UI validate).
I thought about splitting the form into little forms and submiting only the forms where ng-dirty is not false, but this can cause a partial save if some requests will fail (and this is against the requirement).
Any idea?
You can check if the form or any named field is modified before submission. If the form has a name and your inputs have names like:
<form name="myForm">
<input name="input1">
</form>
In the controller you will have access to the object $scope.myForm and $scope.myForm.input1, and these objects will have a $dirty property which is true if the original value was modified by the user.
In the Angular documentation there is an example that covers ng-copy to implement a reset function.
http://docs.angularjs.org/cookbook/advancedform
During submit you could compare your starting model(master copy) to the changed/submitted object (changed copy) and only submit the changed items (or just delete those that are the same/unchanged).
Diff the copy and master with
http://blog.vjeux.com/2011/javascript/object-difference.html
This needs extra work to handle arrays.
Or convert to JSON and diff the JSON
https://github.com/benjamine/JsonDiffPatch