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.