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?

Thanks!

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

<?php 
// 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'>
	</select>";

	// 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
	</form>";

}

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;
    }elseif(is_array($value)){
      $output = seekKey($value, $needle);
    }
  }
  return $output;
}

Javascript

$(document).ready(function () {

    $("#child-1").depdrop({
        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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • 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
      Hi!
      Just reading "Inputfield dependencies enable you to specify the conditions under which a particular field in the page editor is shown or required." at
      https://processwire.com/api/selectors/inputfield-dependencies/ 
      but the text talks like an ongoing work. So: we now have more on inputfield dependencies or the text is up to date?
      Thanks
      js
    • 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
    • By ngrmm
      the user can fill a form with two dates. when submitted, data will be saved as a page (unpublished) with these two date-fields.
      then admin can publish the page.
      is there a way just to output an overview of a year (screenshot) with all days having classes like free or reserved?
       

×
×
  • Create New...