Forums

ChronoForms v8 is now WordPress ready, ChronoMails is out

The JED needs volunteers!

Dynamically update dropdown menu options based on inputs of two other fields (dropdown and datepicker)

Go
Goyens 03 Dec, 2014
Hello folks! 😉

Could you guide me on how to refresh the options of a drop down menu based on the selections of two other fields?

I’m building a form where a user can book a resource. The user is required to (step1) select a resource (dropdown menu) and (step2) select a date (date picker). I would like a third dropdown menu (step3) to display automatically available hours based on the resource and the date selected.

Using the online documentation, I have currently built and populated a sql table(resource, date, hour, status) where status column indicates if the room is available and built a double drop-down using dynamic options (db read + ajax event).The available hours dropdown menu (step3) is currently automatically refreshed when the user select/change a resource (step1) but doesn't take into account the date picker field (step2) to filter the available hours from the sql table and load them as options in the available hours dropdown menu.

Any suggestion to make this happen?

Thank you in advance ! 😀

Max_admin
Max_admin 04 Dec, 2014
Hi Goyens,

How do you load the list of the hours now ? using AJAX ?

Regards,
Max
Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
Go
Goyens 04 Dec, 2014
Hi Max.

Yes using Ajax. I applied the double dropdown tutorial between the room field and the hour field.

BD Read condition :
<?php
return array( 'room' => $form->data['room'] );
?>

Custom code :
<?php
$options = array();
if ( !$form->data['Data'] || count($form->data['Data']) < 1 ) {
$options[] = 'Select a room first';
} else {
foreach ( $form->data['Data'] as $d ) {
$options[$d['hour']] = $d['hour'];
}
}
echo json_encode($options);
?>
Go
Goyens 04 Dec, 2014
My willingness is to better filter the db that I am loading

instead of :

<?php
return array( 'room' => $form->data['room'] );
?>



i would like to code something like :


condition1 : 'room' => $form->data['room']
condition2 : 'date' => $form->data['date']
condition3 : 'status' => 'Available'
...
?>

Max_admin
Max_admin 04 Dec, 2014
Good, just add any extra conditions to conditions array: 

<?php
return array( 'room' => $form->data['room'], "date" => $form->data['date_field']);


But the $form->data['date_field'] format must match the format you have in the database.

Regards,
Max
Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
Go
Goyens 04 Dec, 2014
Thank you Max. The filter works perfectly now. 😀 😀 😀

2 questions remains to finalize drop down based on the room dropdown and the datepicker.

- How can I run the ajax event when the date-picker is changed ?

There is no event tab in the date picker item. Is there a way to call it from a js ?

- How can I modify the tutorial custom code to request the user to select a room and a date first

something like...
$options[] = 'Room and date not selected' when $form->data['room'] and $form->data['date'] are empty
$options[] = 'Room not selected' when $form->data['room'] is empty
$options[] = 'Datenot selected' when $form->data['date'] is empty

I tried to insert something like if ($form->data['room']='') { } else {... but it didn't worked... 

<?php
$options = array();
if ( !$form->data['Data'] || count($form->data['Data']) < 1 ) {
      $options[] = 'No room available';
} else {
  $options[] = 'Please select';
  foreach ( $form->data['Data'] as $d ) {
  $options[$d['hour']] =  $d['hour'];
  }
}
echo json_encode($options);
?>


Thank you in advance if you can help ! 😶 😶 😉
Max_admin
Max_admin 17 Dec, 2014
Hi Goyens,

Sorry for being very late!!

#1- you can simply assign an event to the field using js: 

jQuery(document).ready(function($){
$("#field_id").on("change", function(){
//ajax code goes here
});
});


#2- just set this in the "$options" variable which you send back: 

if(x){
echo json_encode(array("" => "Please do this..."));
return;
}


Regards,
Max
Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
Go
Goyens 17 Dec, 2014
Hi Max.

Thank you for your answer.😉
I'm quite confused, certainly because I am a beginner. 😟
Would you have a template of the ajax code i need to use to read the db and update the dropdown?

Go
Go
Goyens 20 Dec, 2014
Answer
1 Likes
Problem solved !!!!! 😀 😀 😀 😀 😀 😀

In case someone newbie like me want to do the same.

FIRST DOUBLE DROPDOWN
1) Follow this FAQ to create a double dynamic dropdown.
http://www.chronoengine.com/faqs/70-cfv5/5232-how-do-i-build-a-dynamic-drop-down-in-cfv5.html
In my case, I called the ajax event "availability"
2) In the db read conditions, make sure that the target dropdown is updated based on both dropdown and datepicker values 
  <?php
  return array( 'room' => $form->data['room'],'date' => $form->data['date']);
  ?>

DATEPICKER
2) In the datepicker element advanced tab, add a "On Date Selected" Function (ex : Update_dropdown)
3) After "html (render form)", load a javascript in the setup tab of your form, your code should look like the following. The code might differ... An easy way to get the right code is to copy paste the ajax code of your first double dropdown within the datepicker function. You can easily find your first double drop code by viewing your page source code in the browser . 

function update_dropdown() {
jQuery(document).ready(function($){
$("#hour").find("option").remove();
$.ajax({
					"type" : "GET",
					"url" : "/index.php/en/component/chronoforms5/?chronoform=Booking&event=availability&tvout=ajax",
					//"data" : {"room":$("#room").val()},
					"data" : $("#chronoform-Booking").serialize(),
					"success" : function(res){
						$.each($.parseJSON(res), function(id, val){
							$("#hour").append('<option value="'+id+'">'+val+'</option>');
						});
					},
				});
});
};


Hope it helps !

Cheeeers !
This topic is locked and no more replies can be posted.