Page 1 of 2
Change color of fields. Select all fields of a class
Posted: 16 Jun 2015
by Phoenix
Hi There
I have 2 questions:
I'm trying to add a CSS class to multiline plain textareas when another field changes. I tried all the following CSS selector, but it won't change:
.required textarea {
border: 2px solid #AA88FF;
background-color: #FFEEAA; }
.required input[type='text'] {
....
}
.required input {
.....
}
.required .ms-rtefield {
...
}
Code handling:
fd.field('Scope').change(function(){
if (val != 1) {
fd.field('Scope_x0020_Txt').titleRequired(true);
fd.field('Scope_x0020_Txt').addClass('required');
} });
2. My second question: Is it possible to lets say handle all the fields with a certian class? I was thinking of
$('#required').each(function () {
If field('xyz').value() == '';
}
is it possible?
Thanks a lot for the reply.,.
Re: Change color of fields. Select all fields of a class
Posted: 16 Jun 2015
by Dmitry Kozlov
Hi,
1. What type of multiline text field do you use: Plain text, Rich text, or Enhanced rich text?
2. Please, use the code below:
Code: Select all
$.each($('[fd_name]'), function() {
if (fd.field($(this).attr('fd_name')).value() == '') {
...
}
})
Re: Change color of fields. Select all fields of a class
Posted: 17 Jun 2015
by Phoenix
Hi dimitri
Thanks for the fast reply. I use a plain textarea.
Considering the "Each" function. With your code it looks like i have to check for each field (FD_NAME) ? Cant't i generally loop through all the fields of a certain class?
Re: Change color of fields. Select all fields of a class
Posted: 17 Jun 2015
by Dmitry Kozlov
Please, use the following code to assign an additional CSS class to the field's control:
Code: Select all
fd.field('Scope_x0020_Txt').control()._el().addClass('required');
Regarding the loop through the fields, do you need to loop through a particular type of fields? If so, what type?
Re: Change color of fields. Select all fields of a class
Posted: 18 Jun 2015
by Phoenix
Thanks, this actually works.
Well I sort of would like to check, when user clicks the submit button, if any field has the the class 'required' and if the send an alert to fill in this field. Dunno if this is possible.
Re: Change color of fields. Select all fields of a class
Posted: 18 Jun 2015
by Dmitry Kozlov
Please use the following code:
Code: Select all
var alertMessage;
$.each($('[fd_name]'), function() {
if ($(this).find('.required').length > 0 /**if needed add here a check for emptiness of your fields, field names are retrieved by $(this).attr('fd_name')**/) {
if (alertMessage == undefined) {
alertMessage = "Please fill in the following fields: \n";
}
alertMessage += fd.field($(this).attr('fd_name')).titleText() + "\n";
}
})
if (alertMessage != undefined) {
alert(alertMessage);
}
If you need to check if your required fields are empty, you'll need to insert respective checks in place where my comment is. Please note, that different field types' values are retrieved differently.
Re: Change color of fields. Select all fields of a class
Posted: 23 Jun 2015
by Phoenix
Thanks I will try that. Just to be clear... i do not have to replace fd_name..?
Re: Change color of fields. Select all fields of a class
Posted: 24 Jun 2015
by rostislav
No, you don't.
Re: Change color of fields. Select all fields of a class
Posted: 25 Jun 2015
by Phoenix
Thanks, I'm sorry I get i know.
Your code works fine thank you. Though I have another question related to your code:
alertMessage += fd.field($(this).attr('fd_name')).titleText() + "\n";
I always get blanc, although I have set a Title value in the form editor, do I have to add a title in code as well?
The css is working fine for the plain textarea, I tried to apply it to a choice field (dropdownbox) with
.required select
Is this wrong?
Re: Change color of fields. Select all fields of a class
Posted: 25 Jun 2015
by rostislav
No you don't have to change title using code. Are you using exactly the code we provided or have you maybe added your own stuff, e.g. conditional statements?
The css selector for a dropdown is exactly what you thought it was. E.g.
.required select {
background-color: #FFEEAA;
}
would do the trick.
If you're using the code we sent you and it doesn't work, please send us the source code of your page (e.g. in Chrome right click -> View page source) to
support@spform.com and we'll try to replicate your issue.