Page 1 of 1
Show/Hide a dropdown based on value from another dropdown
Posted: 2019-10-13 15:08
by uchhavi
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();
}
})
})
Re: Show/Hide a dropdown based on value from another dropdown
Posted: 2019-10-13 20:24
by pbottcher
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();
}
})
})
Re: Show/Hide a dropdown based on value from another dropdown
Posted: 2019-10-14 11:43
by uchhavi
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.
Re: Show/Hide a dropdown based on value from another dropdown
Posted: 2019-10-14 12:47
by pbottcher
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.
Re: Show/Hide a dropdown based on value from another dropdown
Posted: 2019-10-14 13:58
by uchhavi
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".
Re: Show/Hide a dropdown based on value from another dropdown
Posted: 2019-10-14 14:27
by pbottcher
sorry,
can you change
if($j('e.added.id).val() == "7"){
to
if( e.added.id == "7"){
Re: Show/Hide a dropdown based on value from another dropdown
Posted: 2019-10-14 14:34
by uchhavi
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>
Re: Show/Hide a dropdown based on value from another dropdown
Posted: 2019-10-14 15:08
by pbottcher
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();
Re: Show/Hide a dropdown based on value from another dropdown
Posted: 2019-10-15 06:33
by uchhavi
thank uuu so much.. it is working perfect now ...
Re: Show/Hide a dropdown based on value from another dropdown
Posted: 2019-10-15 14:44
by uchhavi
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
Re: Show/Hide a dropdown based on value from another dropdown
Posted: 2019-10-15 15:02
by pbottcher
Hi,
use || instead of or in your if statements
Re: Show/Hide a dropdown based on value from another dropdown
Posted: 2019-10-16 14:19
by uchhavi
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
Re: Show/Hide a dropdown based on value from another dropdown
Posted: 2019-10-16 18:31
by pbottcher
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();
}
})
Re: Show/Hide a dropdown based on value from another dropdown
Posted: 2019-10-18 12:59
by uchhavi
HI
It is not working..
please can u look at the whole file..
Look forward to your help
Re: Show/Hide a dropdown based on value from another dropdown
Posted: 2019-10-18 13:28
by pbottcher
Hi,
can you add a screenshot of the DOM.
Also add an
alert($j('#category').val());
to see what you get as value
Re: Show/Hide a dropdown based on value from another dropdown
Posted: 2019-10-27 19:58
by uchhavi
Hello,
Sorry for the delayed response. I had gone on leave.
I ran the program again, and it worked.
Thank you so much.