Cascading Autocomplete Limit Answers

[richs]

I built a web form to collect responses from political candidates where they must select one of our site names.

I've set the field as a cascade autocomplete, with the cascade being filtered by a state selection dropdown element. The autocomplete is being filtered by a list of site names.

Is there a way to set the cascade autocomplete field so that it only accepts answers that are within the autocomplete filter? In other words, it would function as a dropdown where only specific selections are allowed.

[CoopperBackpack]

Hello @richs,

It seems that it is not possible to restrict the submission of values using standard features. 

I have a similar workflow in my account and I am using JavaScript to validate the value before submitting it.

1) Let`s say there is a Lookup table like this one:

2) On the Submission form I have the State field that is set to the Dropdown, and the Site field that is set to Cascading AutoComplete:

 

3) As a first step, we can add the Virtual field that should be set to the Calculated Value. You may hide it using the 'Hide Field' checkbox on the Advanced tab.

The statement can be as this one:

CASE 
WHEN [@field:Site] IN (SELECT Site FROM States_Sites WHERE State = target.[@field:State])
THEN 1
ELSE 0
END

So, when the user selects Alabama and Site_1 or Site_2, we receive 1, if enters a value other than these two, we receive 0.

3) Then we can add JavaScript code to the Footer section (please disable the HTML editor on the Advanced tab before pasting the code):
 

<script>
  document.addEventListener('BeforeFormSubmit', function(event) {

    let virtualField= document.querySelector("input[id*='cbParamVirtual1']").value;
    
    if (virtualField === '0') {
     event.preventDefault();
     alert( 'The site is incorrect');
    }
    
  })
</script>

Instead of a standard alert, you may use the so-called SweetAlert for the pop-up. You may learn more via this link https://sweetalert2.github.io/

In this case, the code can be like this:

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
  document.addEventListener('BeforeFormSubmit', function(event) {

    let virtualField= document.querySelector("input[id*='cbParamVirtual1']").value;
    
    if (virtualField === '0') {
     event.preventDefault();
     Swal.fire( 'The Site name is incorrect', 'Select the Site name from the list', 'error' );
    }
  })
</script>

Please replace all field/table names accordingly to your local field/table names.

Hope this helps.

[BenjaminS]

Hi. CoopperBackpack, thanks for the solution! I am looking for a solution for a normal (not Cascade) Autocomplete, because the solution provided in the Caspio's How To (https://howto.caspio.com/tech-tips-and-articles/enforcing-options-from-autocomplete-fields/) does not work for me. Any advice?

Best Regards

Benjamin

[IamBlossom]

Hi @BenjaminS,

Are you getting an error in the console? I implemented this solution on my app, and it is working.

In the JavaScript provided, make sure that you were able to change the required values. 

Change the  'Virtual1' and  'Text_input'  values from the const virtualField and const autoComplete variables to match the corresponding names of virtual and autocomplete fields.

 

 

[BenjaminS]

Hi IamBlossom,

I thought I have posted my follow up, but apparently not. It turns out that if I build a page from scratch, it works. But I have a problematic DataPage with some custom code that is apparently in conflict with this one. In short, the solution posted above works, but my DataPage does not. Thanks for the help in any case.

 

Best

Benjamin

[Jodie]

Hi Benjamin - can you add the code or provide more details on the part of your datapage that's conflicting with this solution?

[BenjaminS]

Dear Jodie,

I know it's been a long time. After laborious testing I found the issue. The solution provided in the Caspio's How To (https://howto.caspio.com/tech-tips-and-articles/enforcing-options-from-autocomplete-fields/)

 

WORKS only IF the 'Hint' field is empty.

 

If I put text in the 'Hint' field (and the (?) shows on the deployed DataPage) then the solution stopes working. It "only" took me about 2 full days of computer time to figure this one out.

I hope it saves someone some time

Best

Benjamin

[CoopperBackpack]

Hello @BenjaminS,

Thank you for your investigation. This will help other users.

I checked the DataPage with the Hint and found the cause of the issue.
In my example, the AutoComplete field is 'Name'.  When the Hint is added, it is the <span> element with the ID that starts with 'InsertRecordName'.
The input field itself is the <input>  element with the ID that also starts with 'InsertRecordName'.
 

In the code the input field is selected as:

document.querySelector(`[id^="InsertRecord${autoComplete}"]`), which means select an element where ID starts with 'InsertRecordName' in my example.

However, this selects the <span> because it is the 1st element with the ID that starts with 'InsertRecordName'.

You can use the solution from this article https://howto.caspio.com/tech-tips-and-articles/enforcing-options-from-autocomplete-fields/ and add a Hint if needed.

Just add the input tag in this line of the code:

let HTMLAutoComplete = document.querySelector(`input[id^="InsertRecord${autoComplete}"]`)

I reported this to Caspio Support team, they will update the article.