Jump to content
  • 0

Cascading Autocomplete Limit Answers


richs
 Share

Question

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.

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

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:

J8Fniyh.png

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:

NsPSlUi.png

 

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.

Link to comment
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.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   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.

Loading...
 Share

×
×
  • Create New...