Javascript wait asynchronous response in synchronous function

Question

I guess my question is easy but I can not figure it out even searching for days.

There is my practical situation:

I have a form and would like to wait for the return of a stripe asynchronous function before submitting it to my backend as I need the response of the stripe API. I am then using the onsubmit="return validate_form();"> tag in order to manage that by myself in a javascript function.

<form action="/" method="get" id="test" onsubmit="return validate_test_form();">
  <button type="submit" id="iban-test" data-secret="">
    TEST
  </button>
</form>

function validate_test_form() {
  var stripe_result = stripe.confirmCardSetup(clientSecret)

  if (stripe_result.error) {
    // do things
  } else {
    // do other things
  }
  return true;
}

As a normal behavior, the form is submitted without waiting for the stripe response as the stripe function is asynchronous and the default validate_test_form function return is true. I am aware of async/await/promise concepts but don't see how I can use them to wait (block UI, with a spinner or other) for the response of stripe as a synchronous behavior.

I imagine this situation must be current and it must be lots way to perform what I am looking for. In either way, could you tell me what are the best practices in this situation.

Thanks a lot for your time.

You can intercept the submit event by doing event.preventDefault(), and then manually submitting the form yourself, once the asynchronous operation is completed. — Terry
– Terry, Commented May 31, 2020 at 15:28
Used event.preventDefault() like this: <form action="/" method="get" id="test" onsubmit="event.preventDefault(); validate_test_form();">, it works. Thanks — yoarch
– yoarch, Commented May 31, 2020 at 18:17

Daniels Šatcs · Accepted Answer · 2020-05-31 15:31:22Z

1

You need to return false from validate_test_form() immediately (which will cancel submit action) and submit the form once response from Stripe is available.

Since confirmCardSetup returns a Promise, it won't block execution of your function. Instead, you can execute code once Promise returns a result by using .then(func).


function validate_test_form() {
  var stripe_result = stripe.confirmCardSetup(clientSecret)
  stripe_result.then(function(stripe_result) {

    // Hide the progress bar here

    if (stripe_result.error) {
      // do things
    } else {
      // do other things
      // Resubmit the form or use `stripe_result.setupIntent` if needed.
    }
  }); // this will return immediately, so we can continue.

  // Show a progress bar here or whatever

  return false;
}

answered May 31, 2020 at 15:31

Daniels Šatcs

5546 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

yoarch Over a year ago

Seems to solve my issue, I was wondering what should be the best practice, thanks everyone for your time. Does someone has a practical example of a progress bar?

Collectives™ on Stack Overflow

Javascript wait asynchronous response in synchronous function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related