Jump to content

Recommended Posts

Hi there processwire people,

this may sound obvious to most of you but not for me : )

I'm dealing with a booking form for a trip site.

I want the user to choose destination first (a select: let's say Venice, Rome and Hamburg);

Based on her choice, there will be days available (23 of august, 27 of september)

Based on the day, another select will show available times (e.g. 9.30, 15.30 and so on)

What should I do? Custom php or Form Builder? (I would prefer the latter...), and most of all: how to build a system like that?


Share this post

Link to post
Share on other sites

FormBuilder does not offer this out of the box as every field is self contained without any connection between them (besides inputfield dependencies). But you could still use FormBuilder to build the skeleton form. 

To build such a thing you've two options. Either load all available options and filter them on the client side by javascript or load only the options for the first select and use ajax to dynamically fetch and fill the other inputs based on previous selections. 

  • Like 3

Share this post

Link to post
Share on other sites

In my experience booking systems can get pretty complicated quickly. Even the smaller ones can potentially have a lot of interaction with the user which you have to account for. I would first map out the user interaction before deciding which way to approach the functionality. ProcessWire is built to handle this stuff, but there are several ways to build it depending on your exact needs. FormBuilder can be one if you just need a form which needs to be sent by email. If there is backend processing like checking if the trip is available in another system or if you want to prevent duplicate entries you would definately need do some custom PHP (even if you use FormBuilder).

  • Like 3

Share this post

Link to post
Share on other sites

Thanks LostKobrakai for your suggestions, I'll try that.

@arjen: yes you're right, booking system may be a mess, but in this case it  is really a very simple form that can be sent via email.

Share this post

Link to post
Share on other sites

I am currently looking into dependent select fields or cascading select fields (as they are sometimes called), too. So I have a quite similar scenario as yours. I already have setup some working code that I want to share here.

For a better understanding about my scenario:

1. parent countries with list of all countries
2. parent destinations, each destination gets assigned one country through "countries" pages asm select field.
3. parent tours, each tour gets assigned 1 or more countries through "countries" field and 1 or more destinations from "destinations" pages asm select field

In tours form, when countries are selected I want to filter the destinations field to only show destinations of the previously chosen countries.

For my solution I am using this jQuery plugin. So you need to call this in your template.

My code is still a work in progress and written around my requirements but should be fairly easy to transfer to other contexts.

Template code

// do not load _main.php for ajax requests
if($config->ajax) $useMain = false; 

// provide dropdown data for the ajax request
if ($input->post->depdrop_parents) {
	$ids = $input->post->depdrop_parents;
	$params = $input->post->depdrop_params;
	$options = [];
	$option = [];

	if (count($ids) == 1) { // only 1 id
		$pages = $pages->find("template=$params[0], countries=$ids[0]");
	} // todo else { handle multiple ids}

	foreach ($pages as $page) {
		$option["id"] = $page->id;
		$option["name"] = $page->title;
		$options[] = $option;

	echo json_encode(['output'=>$options, 'selected'=>'']);

// render the form
if (!$config->ajax) {
	$content = "";

	$destinations = $pages->find("template=destination,sort=countries.title");
	$options = [];
	$option = [];

	// build options array for first select field: this is very specific to my scenario
	foreach ($destinations as $destination) {
		if (seekKey($options, $destination->countries->first()->id) == $destination->countries->first()->id) continue;
		$option["value"] = $destination->countries->first()->id;
		$option["name"] = $destination->countries->first()->title;
		$options[] = $option;

	$content = "<form>
	<select id='parent' name='countries'>";
	foreach ($options as $option) {
		$value = $option["value"];
		$name = $option["name"];
		$content .= "<option value='$value'>$name</option>";
	$content .= "</select>";

	$content .= "<select id='child-1' name='destination'>

	// need hidden input with value "destination" to populate params for the JS plugin 
	// with the value that will be used as template value above in line 14
	$content .= "<input type='hidden' id='dest' value='destination'>

        //todo submit button and logic


In my functions.inc

// Find the value in a multidimensional array
function seekKey($haystack, $needle){
  $output = "";
  foreach($haystack as $key => $value){
    if($value == $needle){
      $output = $value;
      $output = seekKey($value, $needle);
  return $output;


$(document).ready(function () {

        url: './',
        depends: ['parent'],
        params: ['dest'],    
        initialize: true


Hope this helps.

  • Like 5

Share this post

Link to post
Share on other sites

hey gebeer,

thanks for sharing your code.

Drop me a line when you have your site up and running.

Share this post

Link to post
Share on other sites

Your welcome.

This is just on a playground site at the moment and will not be online until much later this year.

But the code I posted is working for me.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By SwimToWin
      I want to add a dependent SELECT field on my template page that lists pages from a parent "sub-page" in the current parent node.
      On /product1/page I have the field "photo" which is a SELECT field.
      I want the SELECT to list pages from /ROOTPARENT/photos.
      The idea is that I can reuse the same photo in many places - but only need to keep it update it once under /product1/photos.
      My page structure looks like so:
      /product1/page /product1/photos/photo3 (template=photos) /product2/photos/photo9 I have tried adding these Selector Strings on the Field (Setup -> Fields -> PHOTO -> Input tab -> Selectable Pages field group -> Selector String):
      parent=/product1/page, template=photos, sort=name WORKS (but only on children of current product). parent=page.rootParent ... parent=$page.rootParent ... parent=$page.rootParent parent=$parent ... parent=$parent1 When using a SELECT Input Field Type, the editing pages gives the fatal error "Unrecognized operator: $". parent=parent ... parent=. Returns an empty list How might I find child pages from the current "/product1/photos/ page"?
      Your inputs are appreciated. Thanks.
    • By rareyush
      Has anyone any experience making a dynamic hours booking calendar: person visits site and can see a calendar with available hours marked as taken and others as free person clicks number of hour and is allowed to fill a form to book the timing like: 6:17pm - 10:67-pm Any comments most appreciated, 
    • By zota
      Just reading "Inputfield dependencies enable you to specify the conditions under which a particular field in the page editor is shown or required." at
      but the text talks like an ongoing work. So: we now have more on inputfield dependencies or the text is up to date?
    • By DxJR
      So is there anyway to get Inputfield Dependencies to work with front-end editing? the field is there, but it isn't showing the results I need based on the field selection it's dependent on. 
    • By DxJR
      So, I've tried looking through here and Can't seem to find it. I'm trying to create a situation in the admin where:
      I have a page reference InputField. When the user chooses one of those pages, from the dropdown, a new Page reference drop down pops up with that pages children in it. I know how to do the "show only if..." thing, but How did I make it dynamically pull in a pages children? Thanks
  • Create New...