KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

Input Elements #1949

Open Abhishek opened this topic on on Mar 7, 2021 - 32 comments

Abhishek commented on Mar 7, 2021

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

KoolReport commented on Mar 7, 2021

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.

Abhishek commented on Mar 8, 2021

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"
                    )
                ));?>

Abhishek commented on Mar 8, 2021

Dear Koolreport Team, Please help me out I need this report and it is very important for me, please.

Abhishek commented on Mar 8, 2021

Dear Koolreport Team, Please help me out I need this report and it is very important for me, please.

KoolReport commented on Mar 8, 2021

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.

Abhishek commented on Mar 10, 2021

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.

Abhishek commented on Mar 10, 2021

Dear Koolreport Team, Please help me out I need this report and it is very important for me, please.

KoolReport commented on Mar 10, 2021

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.

Abhishek commented on Mar 10, 2021

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.

Abhishek commented on Mar 10, 2021

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.

Abhishek commented on Mar 11, 2021

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.

Abhishek commented on Mar 11, 2021

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.

KoolReport commented on Mar 11, 2021

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.

Abhishek commented on Mar 11, 2021

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

Abhishek commented on Mar 11, 2021
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);						  
						  
					  }
		
				   }",
KoolReport commented on Mar 11, 2021

Can you put your full code in this part (the whole form)

Abhishek commented on Mar 11, 2021
<?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>
Abhishek commented on Mar 12, 2021

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.

Abhishek commented on Mar 12, 2021

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.

Abhishek commented on Mar 12, 2021

Dear Team, Please help me

Abhishek commented on Mar 12, 2021

Dear Team, Please help me

Abhishek commented on Mar 12, 2021

Dear Team, Please help me

Abhishek commented on Mar 12, 2021

Dear Team, Please help me

Abhishek commented on Mar 13, 2021

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.

Abhishek commented on Mar 13, 2021

<?php

use \koolreport\inputs\DateTimePicker;
use \koolreport\inputs\RadioList;
use \koolreport\inputs\TextBox;
use \koolreport\widgets\koolphp\Table;
use \koolreport\datagrid\DataTables;	

?>

FollowUp Calling

RadioList "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); } }", ) )); ?>
Select Month/Year
Select Month: "myDateTime", "format"=>"MM" )); ?>
Select Year: "myDateTime1", "format"=>"YYYY" )); ?>





RegistrationID "textBox", "dataStore"=>$this->dataStore('result'), "attributes"=>array( "class"=>"form-control", "placeholder"=>"Enter any RegistrationID" ) ));?>




Abhishek commented on Mar 13, 2021

Dear Team, Please help me for this one report because I need this report and its important. Please help me please

Abhishek commented on Mar 13, 2021
<?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>
Abhishek commented on Mar 13, 2021

Dear Team, Please help me for this one report because I need this report and its important. Please help me please

Abhishek commented on Mar 13, 2021

Dear Team, Please help me for this one report because I need this report and its important. Please help me please

KoolReport commented on Mar 13, 2021

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.

KoolReport commented on Mar 13, 2021

BTW, there are some mistake in your javascript for example single equal is to assign the value and double equal is to compare. Inside the if condition, you need to use double equal

if(a==b) {

}

it will be wrong if you use a=b.

Hope that helps.

Abhishek commented on Mar 13, 2021

Dear Team, Really thanks for the information and solution because for the last 2 weeks I am breaking my head on the solution and you have provided it really thanks.

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
help needed

Inputs