Show/Hide a dropdown based on value from another dropdown

If you're a new user of AppGini, feel free to ask general usage questions, or look for answers here.
Post Reply
uchhavi
Veteran Member
Posts: 80
Joined: 2018-05-15 14:07

Show/Hide a dropdown based on value from another dropdown

Post by uchhavi » 2019-10-13 15:08

hi

Have a form with 2 dropdown fields.
1) project_stage_id
2) loss_reason

Here is wht i want to achieve:
On load of the page, when loss_reason value is null, the loss_reason field (lable & name) should not show.
When I select a value in project_stage_id and if the value is 7 (id from another table) then the loss_reason field should appear, with focus on the loss_reason field.

I have written the code below in enquiries-dv.js file (make file being enquiries.php); but the code is not working. Please can you help me to find out what is the reason please.

Code: Select all

$j(function(){
	
	
	$j('#project_stage_id-container').on('change', function(){
		if($j('#project_stage_id').val() == "7"){
			$j('#loss_reason').parents('.form-group').show();
			$j('#loss_reason').focus().select();
		}else{
			$j('#loss_reason').parents('.form-group').hide();
			
		}
	})

})
Best regards,

Chhavi Jain

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: Show/Hide a dropdown based on value from another dropdown

Post by pbottcher » 2019-10-13 20:24

Hi,

try

Code: Select all

$j(function(){
	
	
	$j('#project_stage_id-container').on('change', function(e){
		if($j('e.added.id).val() == "7"){
			$j('#loss_reason').parents('.form-group').show();
			$j('#loss_reason').focus().select();
		}else{
			$j('#loss_reason').parents('.form-group').hide();
			
		}
	})

})
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

uchhavi
Veteran Member
Posts: 80
Joined: 2018-05-15 14:07

Re: Show/Hide a dropdown based on value from another dropdown

Post by uchhavi » 2019-10-14 11:43

no its not working :(

Here is wht is happening.

When I load the page the loss_reason tab is visible.

When i click on any option in the dropdown (any value...), the loss_reason field disappears...

And when i save the form, the loss_reason field appears again.
Best regards,

Chhavi Jain

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: Show/Hide a dropdown based on value from another dropdown

Post by pbottcher » 2019-10-14 12:47

Hi,

that is actually what you tell in the script. Only difference should be, that if you select from the dropdown a field, which has the PK of the lookup = 7, then the loss_reason should show.

If you want the loss_reason to be hidden at startup, you need to add this code as well.

Add
$j('#loss_reason').parents('.form-group').hide();

before the "on-change".

Does your dropdown show integer values that you acutally want to check, or text that is retrieved from another table. Maybe you can post an image.
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

uchhavi
Veteran Member
Posts: 80
Joined: 2018-05-15 14:07

Re: Show/Hide a dropdown based on value from another dropdown

Post by uchhavi » 2019-10-14 13:58

Hi

I added the line you suggested... so now the onload error is solved... but even after i make my selection of "7", the loss_reason field doesnot show.

Your Question:
Does your dropdown show integer values that you acutally want to check, or text that is retrieved from another table. Maybe you can post an image.

My Answer: No My dropdown doesnot show integer values, it shows the text that is retrieved from another table whch has PK "7".
Best regards,

Chhavi Jain

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: Show/Hide a dropdown based on value from another dropdown

Post by pbottcher » 2019-10-14 14:27

sorry,

can you change

if($j('e.added.id).val() == "7"){

to

if( e.added.id == "7"){
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

uchhavi
Veteran Member
Posts: 80
Joined: 2018-05-15 14:07

Re: Show/Hide a dropdown based on value from another dropdown

Post by uchhavi » 2019-10-14 14:34

It worked.. as in when i am selecting "7" the loss_reason field is appearing and in others it is not..

But when i save the page, the field disappears...
how to make it stay? .. just for info the final code is looking like this now

<code>
$j(function(){

$j('#loss_reason').parents('.form-group').hide();
$j('#project_stage_id-container').on('change', function(e){
if( e.added.id == "7"){
$j('#loss_reason').parents('.form-group').show();
$j('#loss_reason').focus().select();

}else{
$j('#loss_reason').parents('.form-group').hide();

}
})

})
</code>
Best regards,

Chhavi Jain

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: Show/Hide a dropdown based on value from another dropdown

Post by pbottcher » 2019-10-14 15:08

Hi ,

you need to check at the beginning the actual value and only hide if the value does not match .

if ($j('#project_stage_id').val() != "7") $j('#loss_reason').parents('.form-group').hide();
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

uchhavi
Veteran Member
Posts: 80
Joined: 2018-05-15 14:07

Re: Show/Hide a dropdown based on value from another dropdown

Post by uchhavi » 2019-10-15 06:33

thank uuu so much.. it is working perfect now ... :D
Best regards,

Chhavi Jain

uchhavi
Veteran Member
Posts: 80
Joined: 2018-05-15 14:07

Re: Show/Hide a dropdown based on value from another dropdown

Post by uchhavi » 2019-10-15 14:44

Hi

This is strange... I am trying the same thing in another table... but it is not working...

So basically, I have another table stock_items and what i want to do is, if the value the dropdown (id from another table) = 3 then hide a field.

Code: Select all

if ($j('#category').val() == "3" or ('#category').val() == "3") $j('#mat_const').parents('.form-group').hide();
	$j('#category-container').on('change', function(e){
		if(e.added.id == "3" or e.added.id == "4"){
			$j('#mat_const').parents('.form-group').hide();
			
		}else{
			$j('#mat_const').parents('.form-group').show();
			
		}
	})
There is just two changes,
a) this file already has other codes written as well
b) the value i need either of the two ( 3 or 4).

Kindly download the whole file from the dropbox link below:
https://www.dropbox.com/s/q7wjv43359xy7 ... dv.js?dl=0

Please help
Best regards,

Chhavi Jain

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: Show/Hide a dropdown based on value from another dropdown

Post by pbottcher » 2019-10-15 15:02

Hi,

use || instead of or in your if statements
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

uchhavi
Veteran Member
Posts: 80
Joined: 2018-05-15 14:07

Re: Show/Hide a dropdown based on value from another dropdown

Post by uchhavi » 2019-10-16 14:19

Hi

Can you please relook at the code again... it is not working.. I have changed or to ||
Do you think it is because of the other code written in the file.

Please can u see the file once again (dropbox link below) and let me know what is wrong with the code.

https://www.dropbox.com/s/q7wjv43359xy7 ... dv.js?dl=0

Please
Best regards,

Chhavi Jain

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: Show/Hide a dropdown based on value from another dropdown

Post by pbottcher » 2019-10-16 18:31

Hi,

try

if ($j('#category').val() == "3" || $j('#category').val() == "4") $j('#mat_const').parents('.form-group').hide();
$j('#category-container').on('change', function(e){
if(e.added.id == "3" || e.added.id == "4"){
$j('#mat_const').parents('.form-group').hide();

}else{
$j('#mat_const').parents('.form-group').show();

}
})
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

uchhavi
Veteran Member
Posts: 80
Joined: 2018-05-15 14:07

Re: Show/Hide a dropdown based on value from another dropdown

Post by uchhavi » 2019-10-18 12:59

HI

It is not working.. :(

please can u look at the whole file..

Look forward to your help
Best regards,

Chhavi Jain

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: Show/Hide a dropdown based on value from another dropdown

Post by pbottcher » 2019-10-18 13:28

Hi,

can you add a screenshot of the DOM.

Also add an

alert($j('#category').val());

to see what you get as value
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

uchhavi
Veteran Member
Posts: 80
Joined: 2018-05-15 14:07

Re: Show/Hide a dropdown based on value from another dropdown

Post by uchhavi » 2019-10-27 19:58

Hello,

Sorry for the delayed response. I had gone on leave.

I ran the program again, and it worked.

Thank you so much.
Best regards,

Chhavi Jain

Post Reply