Page 1 of 1

Hide/Show field on select (v2022)

Posted: Thu Sep 29, 2022 10:13 pm
by philmills

I'm using Client side events on a Select field to show/hide fieldname "Trainer".
I modified the example given here

The default value for my field is "1" (as that's the most commonly required option).

When I select value "2", the field "Trainer" becomes invisible as expected.
However, if i then change the selection to either 1 or 3 the fields do not become visible again, and in fact the select drop-down still shows value 2 as highlighted.
What am I doing wrong?

{ // keys = event types, values = handler functions
	"change": function(e) {
		// Your code
if (this.value = "2") {
        	$(this).fields("Trainer").visible(false); // true to show, false to hide
        } else {
        	$(this).fields("Trainer").visible(true);
        }		
	}
}

v2022.12.4


Re: Hide/Show field on select (v2022)

Posted: Fri Sep 30, 2022 9:15 am
by arbei

philmills wrote:

if (this.value = "2") {

Comparison operatior in JavaScript is "==", not "=".


Re: Hide/Show field on select (v2022)

Posted: Fri Sep 30, 2022 1:55 pm
by philmills

Great - thank-you!


Re: Hide/Show field on select (v2022)

Posted: Fri Sep 30, 2022 5:41 pm
by philmills

I'm having further problems with this.
When adding a new record, it works fine, but when editing an existing record, the stored value doesn't affect the visible fields...
Basically all fields are shown by default when in fact some should be hidden.
I can only get the right fields to show by selecting a different value from the lookup, then reselecting the stored value.
How can I insert the stored value into the function on edit?


Re: Hide/Show field on select (v2022)

Posted: Sat Oct 01, 2022 9:54 am
by arbei

Your event handler is for the "change" event which only fires when the value is changed by user. If you want to hide fields on page load, you should trigger the change event in Startup Script.


Re: Hide/Show field on select (v2022)

Posted: Tue Oct 04, 2022 6:13 am
by philmills

arbei wrote:

Your event handler is for the "change" event which only fires
when the value is changed by user. If you want to hide fields on page load,
you should trigger the change event in Startup Script.

How exactly?
I tried adding the same code to Startup script > Edit page, but it does nothing. I don't know how to convert that code to work in the startup


Re: Hide/Show field on select (v2022)

Posted: Tue Oct 04, 2022 9:14 am
by arbei

Your code is only the handler of the "change" event, it does not run by itself. You need to trigger the handler, you may use .trigger() or .triggerHandler().


Re: Hide/Show field on select (v2022)

Posted: Tue Oct 04, 2022 1:55 pm
by philmills

I'm a total jquery newbie, I have searched for examples on this forum and the closest I have found is this:
viewtopic.php?p=161242&hilit=trigger#p161242

This is my code currently, but it does nothing:

$("#x_fk_ApplicationType").change(function() {
    if (this.value == "1"){ 
                            $(this).fields("Trainer").visible(true); // true to show, false to hide
                            $(this).fields("Files").visible(true); // true to show, false to hide
                            $(this).fields("URL").visible(true); // true to show, false to hide
                            $(this).fields("Location").visible(true); // true to show, false to hide
                            $(this).fields("Cost").visible(true); // true to show, false to hide
                            $(this).fields("DuringWork").visible(true); // true to show, false to hide
                            $(this).fields("LevelTraining").visible(true); // true to show, false to hide
			    $(this).fields("Agreement").visible(true); // true to show, false to hide
                            $(this).fields("Participants").readonly(true);
                        }        
                if (this.value == "2"){ 
                            $(this).fields("Trainer").visible(false); // true to show, false to hide
                            $(this).fields("Files").visible(false); // true to show, false to hide
                            $(this).fields("URL").visible(false); // true to show, false to hide
                            $(this).fields("Location").visible(false); // true to show, false to hide
                            $(this).fields("Cost").visible(false); // true to show, false to hide
                            $(this).fields("DuringWork").visible(false); // true to show, false to hide
                            $(this).fields("LevelTraining").visible(false); // true to show, false to hide
    			    $(this).fields("Agreement").visible(false); // true to show, false to hide
                            $(this).fields("Participants").readonly(true);
                        }
                if (this.value == "3"){
                            $(this).fields("Trainer").visible(true); // true to show, false to hide
                            $(this).fields("Files").visible(true); // true to show, false to hide
                            $(this).fields("URL").visible(true); // true to show, false to hide
                            $(this).fields("Location").visible(true); // true to show, false to hide
                            $(this).fields("Cost").visible(true); // true to show, false to hide
                            $(this).fields("LevelTraining").visible(true); // true to show, false to hide
    			    $(this).fields("Agreement").visible(true); // true to show, false to hide
                            $(this).fields("DuringWork").visible(false);
                            $(this).fields("Participants").disabled(false);
            }
});
$("#x_fk_ApplicationType").trigger("change");
};

Re: Hide/Show field on select (v2022)

Posted: Tue Oct 04, 2022 5:27 pm
by arbei

arbei wrote:

Your code is only the handler of the "change" event, it does not run by itself. You need to trigger the handler, you may use .trigger() or .triggerHandler().

e.g.

$("#x_fk_ApplicationType").triggerHandler("change");

Re: Hide/Show field on select (v2022)

Posted: Tue Oct 04, 2022 6:09 pm
by philmills

Awesome! Thanks so much, its working now


Re: Hide/Show field on select (v2022)

Posted: Thu Oct 13, 2022 9:44 pm
by philmills

For one of my select option I'd like to prepopulate my EventTitle field with text.
i can do it with hard text like this:

$(this).fields("EventTitle").value("My Awesome Event Title"); 

but the displayed text really should be dynamic. I have four options which i would be happy to use (in order of preference):
a) insert the viewvalue of the selected dropdown option
b) insert a php variable
c) insert a php function
d) insert a language variable from LanguageLoad

What would be the syntax for any/all of those choices


Re: Hide/Show field on select (v2022)

Posted: Fri Oct 14, 2022 8:36 am
by arbei

You may use any one, I personally would prefer option "d".


Re: Hide/Show field on select (v2022)

Posted: Fri Oct 14, 2022 8:50 am
by mobhar

philmills wrote:

d) insert a language variable from LanguageLoad

What would be the syntax for any/all of those choices

viewtopic.php?t=54324