Dependent field on add form based on dropdown selection

QuestionsDependent field on add form based on dropdown selection
Boján Mihajlov asked 7 years ago

Hi, I have a dropdown where it is possible to select 2 values: sell/rent
I also have 2 other fields: rent_start, rent_end
What I would like to achive is that based on my selection in the first field, make the other to fields not editable. So If I choose 'sell' I don't want to be able to add anything into the rent_start and rent_end fields. Is it possible to do so?

4 Answers
Abu Ghufran answered 7 years ago

Yes, you can connect onchange event with sell/rent dropdown and show these fields only when it is rent. e.g.

// for change event
$col["editoptions"]["onchange"] = "function(){ show_hide_fields(); }";
// for load event
$col["editoptions"]["dataInit"] = "function(){ setTimeout( function(){show_hide_fields();},200 ) }";


<script>
function show_hide_fields(o)
{
if ($("#dropdown_sell_rent").val() == "sell")
{
$('input[name="rent_start"]').attr("disabled","disabled");
$('input[name="rent_end"]').attr("disabled","disabled");
}
else
{
$('input[name="rent_start"]').attr("disabled",false);
$('input[name="rent_end"]').attr("disabled",false);
}
}
</script>

Boján Mihajlov answered 7 years ago

I cannot make it work, maybe I do a mistake somewhere. This is my code:

$cod = array();
$cod["title"] = "Type of order";
$cod["name"] = "type";
$cod["editable"] = true;
$cod["edittype"] = "select";
$cod["editoptions"] = array("value"=>"sell:sell;rent:rent");
$cod["editoptions"]["onchange"] = "function(){ show_hide_fields(); }";
$cods[] = $cod;

$cod = array();
$cod["title"] = "Rent start date";
$cod["name"] = "rent_start";
$cod["editable"] = true;
$cod["editoptions"]["dataInit"] = "function(){ setTimeout( function(){show_hide_fields();},200 ) }";
$cods[] = $cod;

$cod = array();
$cod["title"] = "Rent end date";
$cod["name"] = "rent_end";
$cod["editable"] = true;
$cod["editoptions"]["dataInit"] = "function(){ setTimeout( function(){show_hide_fields();},200 ) }";
$cods[] = $cod;

and then the script:
function show_hide_fields(o)
{
if ($("#type").val() == "sell")
{
$('input[name="rent_start"]').attr("disabled","disabled");
$('input[name="rent_end"]').attr("disabled","disabled");
}
else
{
$('input[name="rent_start"]').attr("disabled",false);
$('input[name="rent_end"]').attr("disabled",false);
}
}

Abu Ghufran answered 7 years ago

Your code looks fine, you can debug if selector are correct using f12 debugger.
Also try following:

function show_hide_fields(o)
{
var selector1 = 'input[name="type"].editable';
var selector2 = 'input[name="type"].FormElement';

if ($(selector1).val() == "sell" || $(selector2).val() == "sell")
{
$('input[name="rent_start"]').attr("disabled","disabled");
$('input[name="rent_end"]').attr("disabled","disabled");
}
else
{
$('input[name="rent_start"]').attr("disabled",false);
$('input[name="rent_end"]').attr("disabled",false);
}
}

Boján Mihajlov answered 7 years ago

I found out now that the problem is it doesn't see the things in the edit form. So if I take out the if part, and just simply put in for example $('input[name="rent_end"]').attr("disabled","disabled");
then this will not remove the rent end field from the edit form, but it will rather disbale it in the list grid.

Your Answer

2 + 7 =

Login with your Social Id:

OR, enter

Attach code here and paste link in question.
Attach screenshot here and paste link in question.



How useful was this discussion?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate it.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?