Hide Field w/Condition

This sub-forum is for discussing all topics related to AppGini Helper JavaScript Library, provided by bizzworxx as a third-party AppGini plugin.
Post Reply
dharbitindy
Veteran Member
Posts: 101
Joined: 2019-05-26 18:38

Hide Field w/Condition

Post by dharbitindy » 2020-03-14 19:39

I'm looking for a way to use the Hide Field with a condition from a Radio Button(s) For example;
I have a field called use_purch with 2 options being Used and Purchased via Radio Button. Tiny Text is the data type.
Next, I have 2 fields below that and one is (no_of_used) and the other is (no_of_purch). Both of these are decimal type.

If Condition (Radio Button Selected = "Used")

new AppGiniField("no_of_purch").hide();

else Condition (Radio Button Selected = "Purchased")

new AppGiniField("no_of_used").hide();

Thank you,
David

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: Hide Field w/Condition

Post by onoehring » 2020-03-15 08:45

Hi Jan,

I would be interested in this as well, as it would be very useful for hiding dependent lookup fields if nothing has been selected in the first field.

Olaf

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Hide Field w/Condition

Post by jsetzer » 2020-03-15 09:19

Hi,

for lookups this is not a problem using AGH JS library:
https://appgini.bizzworxx.de/appgini-he ... p-changes/

There is also an article about checkboxes:
https://appgini.bizzworxx.de/appgini-he ... box-click/

But David has asked for radio buttons. Radio buttons are different from HTML/JS point of view.

I have answered his PM to me and requested some more details about the specific field configuration before I can setup a testing project and write another article about radio buttons. Please see next post. I have written an article explaining how to react to radio button changes.

Best,
Jan
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Hide Field w/Condition

Post by jsetzer » 2020-03-15 10:15

Hi,

after some research I can confirm that our onChange-handler should work for radio buttons, too.

I have written a short article about hiding/showing other fields depending on the selection of radio buttons (options lists):
https://appgini.bizzworxx.de/appgini-he ... selection/


yFS49aMFW6.gif
yFS49aMFW6.gif (36.86 KiB) Viewed 9342 times

Best,
Jan
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools


dharbitindy
Veteran Member
Posts: 101
Joined: 2019-05-26 18:38

Re: Hide Field w/Condition

Post by dharbitindy » 2020-03-15 17:04

Hi Jan,

Thank you. The only issue now is that when I click Save Changes, both fields re-appear. This is code for my situation below;

new AppGiniDetailView().ready(onReady);

function onReady() {
new AppGiniField("use_purch").onChange(onUsePurchChanged);
}

function onUsePurchChanged(value) {
console.log("use_purch changed: " + value);
new AppGiniField("no_of_used").show(value=='Used');
new AppGiniField("no_of_purchased").show(value=='Purchased');
}

dharbitindy
Veteran Member
Posts: 101
Joined: 2019-05-26 18:38

Re: Hide Field w/Condition

Post by dharbitindy » 2020-03-15 19:11

dharbitindy wrote:
2020-03-15 17:04
Hi Jan,

Thank you. The only issue now is that when I click Save Changes, both fields re-appear. This is code for my situation below;

new AppGiniDetailView().ready(onReady);

function onReady() {
new AppGiniField("use_purch").onChange(onUsePurchChanged);
}

function onUsePurchChanged(value) {
console.log("use_purch changed: " + value);
new AppGiniField("no_of_used").show(value=='Used');
new AppGiniField("no_of_purch").show(value=='Purchased');
}
Nonetheless, this part works great! Thanks again Jan.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Hide Field w/Condition

Post by jsetzer » 2020-03-15 20:38

You will have to initially get the value and hide your fields on dv.ready.

Please study the three articles I have written and mentioned above. The necessary code has been explained there. Have a look at step 4 of the checkbox example.

Best,
Jan
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

dharbitindy
Veteran Member
Posts: 101
Joined: 2019-05-26 18:38

Re: Hide Field w/Condition

Post by dharbitindy » 2020-03-15 20:48

Will do. Thank you Jan.

David

jangle
Veteran Member
Posts: 89
Joined: 2020-01-18 17:41

Re: Hide Field w/Condition

Post by jangle » 2020-03-24 17:22

Hello all,

So I have my four radio buttons - "None", "Airline", 'Rental Car", Personal Car"

I have several fields the hide or show based on the button selection based on the following in my JS file.

Code: Select all

new AppGiniDetailView().ready(onReady);

function onReady() {
    new AppGiniField("Travel_Means").onChange(onTravel_MeansChanged);   
}

function onTravel_MeansChanged(value) {
    console.log("Travel Means changed: "  + value);
    new AppGiniField("Airline").show(value=='Airline'); 
    new AppGiniField("Airport").show(value=='Airline');
    new AppGiniField("Flight_No").show(value=='Airline'); 
    new AppGiniField("Flight_Arrival_Time").show(value=='Airline');
    new AppGiniField("Rental_Car_Company").show(value=='Rental Car');
So as some of you have mentioned I would like it to work on the page load.

I have reviewed Jan's articles as suggested, but need a little kick start, as I did not understand some of what was in the articles.

Thanks!!

Jim

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Hide Field w/Condition

Post by jsetzer » 2020-03-24 18:49

You are very close. Call onTravel_MeansChanged(value) in your onReady function.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

henryejune
Posts: 6
Joined: 2022-05-26 07:37

Re: Hide Field w/Condition

Post by henryejune » 2022-12-15 18:44

jangle wrote:
2020-03-24 17:22
Hello all,

So I have my four radio buttons - "None", "Airline", 'Rental Car", Personal Car"

I have several fields the hide or show based on the button selection based on the following in my JS file.

Code: Select all

new AppGiniDetailView().ready(onReady);

function onReady() {
    new AppGiniField("Travel_Means").onChange(onTravel_MeansChanged);   
}

function onTravel_MeansChanged(value) {
    console.log("Travel Means changed: "  + value);
    new AppGiniField("Airline").show(value=='Airline'); 
    new AppGiniField("Airport").show(value=='Airline');
    new AppGiniField("Flight_No").show(value=='Airline'); 
    new AppGiniField("Flight_Arrival_Time").show(value=='Airline');
    new AppGiniField("Rental_Car_Company").show(value=='Rental Car');
So as some of you have mentioned I would like it to work on the page load.

I have reviewed Jan's articles as suggested, but need a little kick start, as I did not understand some of what was in the articles.

Thanks!!

Jim
Did you solve the problem when page load?

henryejune
Posts: 6
Joined: 2022-05-26 07:37

Re: Hide Field w/Condition

Post by henryejune » 2023-01-27 20:20

I solved it with outside help!
var1: "work" (radio buttons: "yes" or "not")
var 2: "type"
Condition:
If "yes" in the button selection of "work" var then show "type" var else hide "type" var.

code:

new AppGiniFields(["type"]).hide();

function onReady() {
new AppGiniField("onworkChanged").onChange(onworkChanged(field));
new AppGiniField("work").onChange(onworkChanged);
new AppGiniField("onworkChanged").getValue("work");
var field = new AppGiniField('work').getValue();
onworkChanged(field)
};

function onworkChanged(value) {
if(value=='yes'){
new AppGiniField("type").show();
}
else{
new AppGiniField("type").hide();
}
};

Post Reply