Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines
Dear Team, Please help me and as per your previous instructions I have resolved my issues and generated the report successfully but now again I am getting stuck.
So please help me to get out and for that, I have attached 2 image documents of the same concept. Please refer to those images and give me a solution. And one more thing the select month and year should come under one single radio button, not an individual radio button.
Thanking you in advance.
Regard
The general solution is you use the "change" client event of RadioList, here is the documentation.
Inside the handle function of change, you can write any javascript to enable or disable text box and other selectbox.
Hope that helps.
Hi, Thanks for the information but I did not get the solution to my issue that is how to provide the radio button to the textbox and how to combine the month and year select under a single radio button and when I enter and submit the form the respected data need to display. How do I implement it? please help me
<?php
RadioList::create(array(
"name"=>"radioList",
"data"=>array(
"John Doe"=>"1",
"Jane Doe"=>"2",
"Whatever Doe"=>"3",
),
"clientEvents"=>array(
"change"=>"function(s)
{
console.log(s.text);
console.log(s.value);
}",
)
));
?>
Select Month:
<?php
DateTimePicker::create(array(
"name"=>"myDateTime",
"dataStore"=>$this->dataStore('resultview'),
"format"=>"MM"
));
?>
</div>
<div class="col-md-6">
Select Year:
<?php
DateTimePicker::create(array(
"name"=>"myDateTime1",
"format"=>"YYYY"
));
?>
<strong>Registration ID</strong>
<?php TextBox::create(array(
"name"=>"textBox",
"dataStore"=>$this->dataStore('result'),
"attributes"=>array(
"class"=>"form-control",
"placeholder"=>"Enter any RegistrationID"
)
));?>
You can do:
<?php
\koolreport\inputs\RadioList::create({
"name"=>"radioList",
"data"=>array(
"John Doe"=>"1",
"Jane Doe"=>"2",
"Whatever Doe"=>"3",
),
"clientEvents"=>array(
"change"=>"function(s){
if(s.value=1)
{
$(textBox).attr('disabled','disabled');
}
}",
)
});
?>
Basically when user choose "John Doe" then the textbox of registration id is disabled.
Dear Team, I would like to provide the radio buttons to the registration id filed and another radio button for the month/year selection option. And I have followed and tried the above-said method to disable the textbox but unable to apply for the month/year selection. And again I am specifying my requirement that is 2 radio buttons one is a textbox and another one is year and month selection and the year and month selection should come under a single radio button. And thanks in advance. Please help me I need to submit the report to my client.
Hi, to enabled or disabled DateTimePicker you do:
startDatePicker.find("input:first").prop("disabled",true); //Disable
startDatePicker.find("input:first").prop("disabled",false); //Enable
So inside the "change" handle method, you make condition base on the value selected, if he select the registrationid, then you enable the textbox for registration id and disabled the datepicker using above method.
Dear Team, first of all I am sorry i think my way of convening was wrong so please assist me and as you can see in the below figure there are radio buttons for the registration Id and for month/year select option(I mean single radio button for the month and year). And please say me the logic of enable and disable of the fields based on the image below. And on submit the respective query need to be execute and the data need to be displayed.
Dear Team, first of all I am sorry i think my way of convening was wrong so please assist me and as you can see in the below figure there are radio buttons for the registration Id and for month/year select option(I mean single radio button for the month and year). And please say me the logic of enable and disable of the fields based on the image below. And on submit the respective query need to be execute and the data need to be displayed.
Dear Team, first of all I am sorry i think my way of convening was wrong so please assist me and as you can see in the below figure there are radio buttons for the registration Id and for month/year select option(I mean single radio button for the month and year). And please say me the logic of enable and disable of the fields based on the image below. And on submit the respective query need to be execute and the data need to be displayed.
Dear Team, I have only 2 questions one is how to use the radio button for the textbox and for the month and year option and next how to combine the month and year under a single radio button. 2q) I have followed the above instructions which you have said but I am able to get the disable condition for text box but unable to implement the same for month and year option.
The idea is very simple, you have radiolist with 2 options (Registration and Month/Year", it will look like this:
<?php
RadioList::create(array(
"name"=>"radioList",
"data"=>array(
"Registration"=>"1",
"Month/Year"=>"2",
),
"clientEvents"=>array(
"change"=>"function(s)
{
//Dothing here
}",
)
));
?>
Now we know that the Registration has value = 1 and Month/Year has value =2
Now when use select Registration(value=1), we need to enable registration textbox and disable month/year. And when Month/Year is selected (value =2), we disabled registration textbox and enable month/year. I have show you how to make condition and also how to make enable/disable both textbox and datetimepicker
so the "change" method will be something like this:
"change"=>"function(s){
if(s.value==1) {
//Enable textbox, disable datetimepicker
$(textBox).attr('disabled','disabled');
yourDatePicker.find('input:first').prop('disabled',true);
}
if(s.value==2) {
//Disabled textbox, enabe datetimepicker
$(textBox).attr('disabled',false);
yourDatePicker.find('input:first').prop('disabled',false);
}
}"
I showed you the logic but you need to apply to your case, change the name of textbox or datetimepicker to your own.
Sorry, The above code is not working when when I am selecting the radio button both the textbox and date select are getting disabled that to if I am provide else near second if condition if not nothing is getting disabled.
And one more thing how do I provide the the radio buttons to the registration and month and year select.
how can I get the exact output as below image
RadioList::create(array(
"name"=>"radioList",
"data"=>array(
"RegistrationID"=>"1",
"Select Month/Year"=>"2",
),
"clientEvents"=>array(
"change"=>"function(s)
{
if(s.value=1)
{
$(textBox).attr('disabled','disabled');
myDateTime.find('input:first').prop('disabled',true);
}
else
if(s.value=2)
{
$(textBox).attr('disabled',false);
myDateTime.find('input:first').prop('disabled',false);
}
}",
<?php
use \koolreport\inputs\DateTimePicker;
use \koolreport\inputs\RadioList;
use \koolreport\inputs\TextBox;
use \koolreport\widgets\koolphp\Table;
use \koolreport\datagrid\DataTables;
?>
<div class="report-content">
<div class="text-center">
<h2>FollowUp Calling</h2>
</div>
<form method="post">
<div class="row" style="margin:auto 25%;text-align:center;">
<div class="col-md-6 form-group">
<strong>RadioList</strong>
<?php
RadioList::create(array(
"name"=>"radioList",
"data"=>array(
"RegistrationID"=>"1",
"Select Month/Year"=>"2",
),
"clientEvents"=>array(
"change"=>"function(s)
{
if(s.value=1)
{
$(textBox).attr('disabled','disabled');
myDateTime.find('input:first').prop('disabled',true);
}
else
if(s.value=2)
{
$(textBox).attr('disabled',false);
myDateTime.find('input:first').prop('disabled',false);
}
}",
)
));
?>
</div>
<div class="col-md-6 form-group" style="margin:auto 25%">
<strong>Select Month/Year</strong>
<div class="row">
<div class="col-md-6">
Select Month:
<?php
DateTimePicker::create(array(
"name"=>"myDateTime",
"format"=>"MM"
));
?>
</div>
<div class="col-md-6">
Select Year:
<?php
DateTimePicker::create(array(
"name"=>"myDateTime1",
"format"=>"YYYY"
));
?>
</div>
</div>
</div><br><br><br><br><br>
<div class="col-sm-6 form-group" style="margin:auto 25%">
<strong>RegistrationID</strong>
<?php TextBox::create(array(
"name"=>"textBox",
"dataStore"=>$this->dataStore('result'),
"attributes"=>array(
"class"=>"form-control",
"placeholder"=>"Enter any RegistrationID"
)
));?>
</div><br><br><br><br>
<div class="col-sm-6 form-group" style="margin:auto 25%;text-align:center;">
<button class="btn btn-lg btn-primary" onchange="function(s)">Submit</button>
</div>
</div>
</form>
</div>
Dear Team, As you said I have provided the whole code of the form above. Please help me to get the exact output which am I expecting below. Please help me it is an humble request from my side.
The registration ID and and month and year as the radio button. And month and year should come under single radio button.
Dear Team, As you said I have provided the whole code of the form above. Please help me to get the exact output that am I expecting below. Please help me it is a humble request from my side.
The registration ID and month and year as the radio button. And month and year should come under a single radio button.
Dear Team, As you said I have provided the whole code of the form above. Please help me to get the exact output which am I expecting below. Please help me it is an humble request from my side.
The registration ID and and month and year as the radio button. And month and year should come under single radio button.
<?php
use \koolreport\inputs\DateTimePicker;
use \koolreport\inputs\RadioList;
use \koolreport\inputs\TextBox;
use \koolreport\widgets\koolphp\Table;
use \koolreport\datagrid\DataTables;
?>
<div class="report-content">
<div class="text-center">
<h2>FollowUp Calling</h2>
</div>
<form method="post">
<div class="row" style="margin:auto 25%;text-align:center;">
<div class="col-md-6 form-group">
<strong>RadioList</strong>
<?php
RadioList::create(array(
"name"=>"radioList",
"data"=>array(
"RegistrationID"=>"1",
"Select Month/Year"=>"2",
),
"clientEvents"=>array(
"change"=>"function(s)
{
if(s.value=1)
{
$(textBox).attr('disabled','disabled');
myDateTime.find('input:first').prop('disabled',true);
}
else
if(s.value=2)
{
$(textBox).attr('disabled',false);
myDateTime.find('input:first').prop('disabled',false);
}
}",
)
));
?>
</div>
<div class="col-md-6 form-group" style="margin:auto 25%">
<strong>Select Month/Year</strong>
<div class="row">
<div class="col-md-6">
Select Month:
<?php
DateTimePicker::create(array(
"name"=>"myDateTime",
"format"=>"MM"
));
?>
</div>
<div class="col-md-6">
Select Year:
<?php
DateTimePicker::create(array(
"name"=>"myDateTime1",
"format"=>"YYYY"
));
?>
</div>
</div>
</div><br><br><br><br><br>
<div class="col-sm-6 form-group" style="margin:auto 25%">
<strong>RegistrationID</strong>
<?php TextBox::create(array(
"name"=>"textBox",
"dataStore"=>$this->dataStore('result'),
"attributes"=>array(
"class"=>"form-control",
"placeholder"=>"Enter any RegistrationID"
)
));?>
</div><br><br><br><br>
<div class="col-sm-6 form-group" style="margin:auto 25%;text-align:center;">
<button class="btn btn-lg btn-primary" onchange="function(s)">Submit</button>
</div>
</div>
</form>
</div>
Since you want above design (two radio buttons in separated area), I think you should not use RadioList. RadioList does not support this items in two different areas like this. So you need to build radio buttons by yourself. So I think it will be like this:
<div class="row">
<div class="col-md-6">
<div class="radio">
<label>
<input type="radio" name="myRadio" value="1"/>
<span>Registration ID</span>
</label>
</div>
<div>
<-- Your textbox of registration here -->
</div>
</div>
<div class="col-md-6">
<div class="radio">
<label>
<input type="radio" name="myRadio" value="2"/>
<span>Select Month/Date</span>
</label>
</div>
<div>
<-- Your month/date input box here-->
</div>
</div>
</div>
But you need to write your own javasript to catch the event of radiolist:
<script>
$("input[name=myRadio]").on("change",function(){
var value = $('input[name=myRadio]:checked').val();
//Now you implement the conditions
if(value==1)
{
$(textBox).attr('disabled','disabled');
myDateTime.find('input:first').prop('disabled',true);
}
else if(value==2)
{
$(textBox).attr('disabled',false);
myDateTime.find('input:first').prop('disabled',false);
}
});
</script>
Hope that help.
Let KoolReport help you to make great reports. It's free & open-source released under MIT license.
Download KoolReport View demo