How-To

Require user to choose a service

Posted in How-To

This How-to is to do 2 things:

  1. Add a 'Please Select Service' item to the top of the services drop down list
  2. Change validation to block a submit until the user selects a service.

 

Add the list item

Edit File:

\components\com_rsappt_pro3\getSlots.php

Around line 294 look for:

    $k = 0;
   //$ret_val .= '<option value="-1">Select a Service</option>';
   for($i=0; $i < count( $service_rows ); $i++) {

The echo line will only be there is you are running a fairly current version of ABPro.

Un-comment (remove the //) the echo line and set the text as desired.

    $k = 0;
    $ret_val .= '<option value="-1">Select a Service</option>';
    for($i=0; $i < count( $service_rows ); $i++) {

This will insert a top row into the Service drop down list.

If you are using service duration, the default has no duration so a user clicking on a timeslot will see the start and end time the same.
When they choose a service the true booking duration will be shown.

 

Validation

The ABPro server call to validate user input does not pass service as there was no service requirement to be validated.

Part 1 - add service to the validation call.

Edit file:

\components\com_rsappt_pro3\script.js

 

Around line 1143 look for:

var data = "name=" + encodeURIComponent(document.getElementById("name").value);
data = data + "&phone=" + encodeURIComponent(document.getElementById("phone").value);
data = data + "&email=" + encodeURIComponent(document.getElementById("email").value);
data = data + "&scrn=" + document.getElementById("screen_type").value;
// To add service validation in fe_val you will need to un-comment the lines below so service is sent
// if(document.getElementById("service_name") != null){
//     if(document.getElementById("service_name").options.length > 0){
//         var selected_id = document.getElementById("service_name").options[document.getElementById("service_name").selectedIndex].value;
//         data = data + "&srv=" + selected_id;
//     }
// }

Un-comment to become:

var data = "name=" + encodeURIComponent(document.getElementById("name").value);
data = data + "&phone=" + encodeURIComponent(document.getElementById("phone").value);
data = data + "&email=" + encodeURIComponent(document.getElementById("email").value);
data = data + "&scrn=" + document.getElementById("screen_type").value;
To add service validation in fe_val you will need to un-comment the lines below so service is sent
if(document.getElementById("service_name") != null){
    if(document.getElementById("service_name").options.length > 0){
        var selected_id = document.getElementById("service_name").options[document.getElementById("service_name").selectedIndex].value;
        data = data + "&srv=" + selected_id;
    }
}

 

 

Part 2 - Validate that the user has selected a service (the srv value is not "-1").

Edit file:

components\com_rsappt_pro3\fe_val.php 

 

Around line 99 look for:

// If you wish to validate service uncomment the code below.
// For more info see How-to page
// http://appointmentbookingpro.com/how-to/165-force-user-to-choose-a-service.html
// if(JRequest::getVar('srv', '') == "-1"){
//     $err = $err."Select a Service<BR/>";
// }

 

Un-comment to become:

// If you wish to validate service uncomment the code below. 
// For more info see How-to page
// http://appointmentbookingpro.com/how-to/165-force-user-to-choose-a-service.html
if(JRequest::getVar('srv', '') == "-1"){
    $err = $err."Select a Service<BR/>"; 
}

 

 

That's it.