Delay submit until lookups complete

replied on May 17, 2018 • Show version history

One option would be to make some of the Lookup values required; that way even if they click Submit it won't go through because the values are not entered.

However, if there's no way to do that because the lookup does not always return a result you can do the following:

First, add some JavaScript to hide the Submit button as soon as the form loads

$(document).ready(function(){
  $('.Submit').hide();
});

Next, figure out what condition you will use to determine whether or not to allow form submission. As of 10.2 Forms has a "lookupcomplete" event, so you could use that event and run $('.Submit').show();

If your users might change the triggering value more than once, then add a "lookupstarted" event handler for that field that will re-hide the Submit button until the lookup is finished.


// Replace Field1 with the id of your target field
// Unless it is in a collection, you can usually get this easily by going
// into the CSS/JavaScript interface and looking at the "q#" for the parent
// and replacing "q" with "Field"

// Show the Submit button when the lookup is finished
$(document).on('lookupcomplete', function (event) {
    if (event.triggerId == 'Field1') {
        $('.Submit').show();
    }
});

// Hide the Submit button when the user triggers a new lookup
$(document).on('lookupstarted', function (event) {
    if (event.triggerId == 'Field1') {
        $('.Submit').hide();
    }
});

Just be sure to check the code carefully. I have a habit of forgetting closing brackets when I post

4 0

replied on May 17, 2018

The required-fields option doesn't work in this case, because by this point there are values present; the user's change should trigger an update to the values, but the form is getting submitted with the old ones.

I'm going with your later suggestion for now (thank you!), but:

Leaving the trigger input causing the button to flash is distracting, especially if it makes other buttons move around. I'm using
```
$('.Submit').prop('disabled',true);
```
which just grays it, but still a noticeable flash.
I'm getting a lot more lookupstarted events than lookupcomplete. This resulted in the button being disabled on form load, and if the trigger value didn't need to change, it's not intuitive for the user to figure out how to proceed. I'm using this for now:
```
$('.foo input').focusout(function() {
```
Every variation of this I've tried successfully stops the form from being submitted with bad data, but it also "eats" the click (i.e. the user clicks Submit but nothing happens). I may just disable the button on focus() instead, so that the user can tell that it's intentional that the submit button can't be clicked rather than it feeling buggy.

This is a good workaround, but still looking for a seamless option.

0 0

replied on May 17, 2018

I'm sure there's a way to clean it up a bit, I just need some time to go back through some of my past projects and see what I can get together.

0 0

replied on May 18, 2018

Scott,

Try this instead

$(document).ready(function(){  
  // add event handler to disable submit when trigger field changes
  $('#Field1').change(function(){
    $('.Submit').prop('disabled',true);
  });
  
  // optional if you need to trigger the change event on form load to verify pre-populated lookups
  //$('#Field1').change();
});

$(document).on('lookupcomplete', function (event) {
  // re-enable submit button if lookup completes and trigger field is not empty 
  if (event.triggerId == 'Field1' && $('#Field1').val() != '') {
    $('.Submit').prop('disabled',false);
  }
});

Rather than disabling the button every time the lookup starts, it only disables it once when the trigger field change event fires.

Multiple lookupcomplete events shouldn't be an issue since it won't be disabled multiple times.

Like before, just replace "Field1" and "#Field1" with the info for your trigger field.

If necessary, you can uncomment that additional line of code to force the change event to fire every time the form loads so you can verify any previous lookup data.

1 0

Question

Question

Delay submit until lookups complete

Replies

Sign in to reply to this post.