Boján Mihajlov asked 8 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?
Abu Ghufran answered 8 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 8 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 8 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 8 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.
