I have order form which contains combobox field. When user select specific value, system enables new set of fields in form.
This part of code looks like:
if (action.result.data.field == "1") {
Order.query('fieldset[itemId="set1"]')[0].enable();
Order.query('fieldset[itemId="set2"]')[0].show();
}
But if user open editing form with already selected specific value, system doesn't show this set of fields. I need system to check specific value on opening the edit form. What class I should use?
Have a look at this ExtJS example. May be this can guide you. In your case, may be you have to listen to form.Panel render event and set the form fields based on the values in the record you got from server/present locally. Something like below.
onSelectionChange: function(model, records) {
var rec = records[0];
if (rec) {
this.getForm().loadRecord(rec);
}
}
load form based on record click
Related
Today I came across a weird behaviour. I have made an html form using Bootstrap for users to subscribe. You can subscribe multiple users at once, but to see the second and the third user's input fields, you have to toggle a select button first (https://prnt.sc/t96lxt). The issue is that I can not send the form for only 1 or 2 users, because some fields of the hidden parts are set to be required.
So, my question is, how can a send a form with hidden parts that contain required fields?
My form is to be found at http://debosvrienden.alfapre.be/nl/inschrijving
Maybe you can try something like this using javascript
const checkBox = document.querySelector("YOUR_CHECKBOX");
checkBox.addEventListener("change", (e) => {
if (e.target.checked) {
document.querySelector(".hidden-input-field-1").setAttribute("required", true);
document.querySelector(".hidden-input-field-2").setAttribute("required", true);
} else {
document.querySelector(".hidden-input-field-1").setAttribute("required", false);
document.querySelector(".hidden-input-field-2").setAttribute("required", false);
}
});
Obviously, you would have to use your own selectors.
Here, you are just getting a reference to your checkbox, and once it changes, you are changing the required attribute of the inputs.
I'm stuck on this issue: I'm trying to limit the number of selections a user can make from an available dropdown selection list. The list is drawn from a database, so its not a hard-coded option list. I'm currently using angularMultipleSelect, its works fine expect for this requirement.
If the user exceeds the maximum selections, I want to set the field to invalid, so that the user cannot save the form. The user should then remove one or more of the selections, until the valid selections are made, then the field should reset to valid. I've tried using:
after-select-item (a directive available with angularMultipleSelect)
ng-change
custom validation directive
None of these work. I can get ng-change & custom validation directive to work on other input fields in the same form, but not on the 'multiple-autocomplete' tag. Nothing is triggered when the user makes selections from the dropdown list.
Here is a simple sample of the code used with after-select-item method. I'm trying to limit the user to 3 or less selections from the available options in the 'cats' array.
HTML:
<multiple-autocomplete
ng-model="selectedCats"
name="selectedCats"
object-property="name"
after-select-item="afterSelectItem"
required
suggestions-arr="cats">
</multiple-autocomplete>
Controller.js:
$scope.afterSelectItem = function(selectedCats) {
var catLength = $scope.selectedCats.length;
var valid = (catLength <= 3);
$scope.myStoryForm.selectedCats.$setValidity("maxLength", valid);
};
Again, nothing gets triggered in this controller when selections are been made (checked at console).
Is there something I'm not doing right, or is there another approach I could use to meet this requirement?
Thanks.
You could try using $watch to watch for changes in your model.
E.g.
$scope.$watch("selectedCats", function (newValue, oldValue) {
var catLength = newValue.length;
var valid = (catLength <= 3);
$scope.myStoryForm.selectedCats.$setValidity("maxLength", valid);
});
This gets triggered every time that your "selectedCats" value changes as well as the first time that you initialise the value.
I am using Sitecore 7.2 with Web Forms for Marketers 2.4.
Using wffm form designer I created a form that has a droplist in it.
I want to be able to hide or unhide another field in the same form based on the selected value of the droplist. Through my research I came up with exporting the form (via form designer export) and pointing the sublayout to that exported form.
I then added and onChange event to the droplist.
<cc3:droplist runat="server" title="Country" emptychoice="True" id="field_xyz" cssclass="scfDropListBorder fieldid.%7bxyz%7d name.Country" controlname="Country" fieldid="{xyz}" enableviewstate="False" onchange="checkField()">
I then added a javascript to the bottom of the page.
function checkField() {
alert("Hello! I am an alert box!!");
var a = document.getElementById("field_xyz");
alert(a.options[a.selectedIndex].value);
var cityTextBox = document.getElementById("field_abc").parentNode.parentNode;
if (a == "United States") {
cityTextBox.style.display = "block";
} else {
cityTextBox.style.display = "none";
}
alert("Ending Script");
}
I can get the 'Hello!' alert to show every time but not the 'ending' alert and the value of 'a' is always null from what I can tell.
Is what I'm trying to do even possible in Sitecore?
I read something else that said they had a problem because of encapsulation and protection levels.
I can also confirm that when I submit the form it does show up in the WFFM reports so I know it is submitting properly.
Any help/advice/direction would be appreciated.
I've never used the export functionality so can't comment to it's effectiveness or ease of use. My suggestion would be to simply use from custom css classes and jquery on the front-end to hide/show depending on the selected value.
Create 2 new css classes under /sitecore/system/Modules/Web Forms for Marketers/Settings/Meta data/Css Classes. Call them "hide-dependent" and "dependent-field"
Add your fields and then on the country field select "hide-dependent" as the CSS class, and for the City select "dependent-field"
Add the following Javascript to your own sites js file.
The code will bind a handler to fire onchange, checked the selected value and then hide/show all field with the dependent-field class. Specifying the chained field-border ensures that we are hiding the whole row and not just the select box.
(function ($) {
var HideDependentFied = function (value) {
var condition = (value == "USA");
$(".dependent-field.field-border").toggle(condition);
};
$(document).ready(function() {
var $field = $(".hide-dependent.field-border select");
$field.on("change", function() {
HideDependentFied(this.value)
});
HideDependentFied($field.val());
});
})($scw);
The above code is using an Immediately Invoked Function Expression and passing is $scw, which is the jQuery variable used by WFFM.
You may also want to fire the function on document ready, to ensure the field is hidden on load and only shown when the appropriate value is selected.
I gt a php form script that allow user to input data into database but then there is another script that allow the user to edit the data in database using the same form script. My problem is when i want to edit the data, i want to disable certain input field from the form script that don't allow user to make changes. Can anyone teach me how?
There are many solutions.
You can set a flag by start the EDIT and check of this flag by START-EDIT. Quick'n dirty.
But you can lock the TUPLES for everyone - when not remove the flag
In your database (setting table) make new column named "editmode".
And in your editor page you can define "editmode" value.
For users check "editmode" value from database:
while($row = mysqli_fetch_assoc($editmode_check))
{
$editmode= $row['editmode'];
}
if ($editmode==1) {
echo "Admin on Edit or ...";
} else {
... the page ...
}
I am currently using bootstrap editable for the front end of my application.
See plugin: http://vitalets.github.io/x-editable/index.html
What I am doing is loading data onto a page via Ajax and allowing each item on the page to be editable. For example; I load a user onto a page and allows for his first name, last name and date of birth to be editable.
Because I am loading via Ajax, when a second user is loaded for example or third and i try to edit the first name etc, I keep getting the values of the first user loaded initially.
I am presuming it may be cache. I have tried setting display on the function and even auto-text.
Is there anyway I can reset or clear the editable form?
see sample code below:
function editable(obj) {
$('#title, #lastName, #firstName).editable('option', {
pk: obj.lId,
placement: 'bottom',
emptytext: 'Empty',
display: function(value) {
$(this).text(value);
},
validate: function(value) {
if ($.trim(value) === '') {
return 'This field is required';
}
}
});
}
Assuming that obj is your new user, and it contains the title, last name, and first name of the new user, all you have to do is set the values of the x-editable objects:
$('#title').editable('setValue', obj.title);
$('#lastName').editable('setValue', obj.lastName);
$('#firstName').editable('setValue', obj.firstName);
The reason why your example is not working is because x-editable separates the display from the actual value. Your display function is called whenever the user changes an x-editable value. By default, x-editable displays whatever the value is set to. But perhaps the internal value is different from a displayed value, that is what the display function is used for - it has no impact on the actual value, just the display of the value.
X-Editable has a lot of different methods you can take advantage of, you can find them on the 'Methods' tab here: http://vitalets.github.io/x-editable/docs.html#editable