admin管理员组

文章数量:1201992

I'm having following code.

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      function sleep( lf_ms ) {
        return new Promise( resolve => setTimeout( resolve, lf_ms ) );
      }

      async function check_form() {
        alert( 'Test 1' );
        await sleep( 1000 );
        alert( 'Test 2' );

        return false;
      }
    </script>
  </head>
  <body>
    <form name="myform" method="post" action="test.htm" onsubmit="return check_form();">
      <input type="text" name="city"><br>
      <br>
      <a href="javascript:check_form();">check the method call via link</a><br>
      <br>
      <button type="submit">check the method call via submit button</button><br>
      <br>
    </form>
  </body>
</html>

I want to sleep the function check_form() for 1 second.

If I click on the link, "Test 1" and "Test 2" will be displayed. If I click the submit button only "Test 1" is displayed. What am I doing wrong here?

My question is different from Submitting a form with submit() using Promise. Because the javascript event handler onsubmit is not used.

I'm having following code.

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      function sleep( lf_ms ) {
        return new Promise( resolve => setTimeout( resolve, lf_ms ) );
      }

      async function check_form() {
        alert( 'Test 1' );
        await sleep( 1000 );
        alert( 'Test 2' );

        return false;
      }
    </script>
  </head>
  <body>
    <form name="myform" method="post" action="test.htm" onsubmit="return check_form();">
      <input type="text" name="city"><br>
      <br>
      <a href="javascript:check_form();">check the method call via link</a><br>
      <br>
      <button type="submit">check the method call via submit button</button><br>
      <br>
    </form>
  </body>
</html>

I want to sleep the function check_form() for 1 second.

If I click on the link, "Test 1" and "Test 2" will be displayed. If I click the submit button only "Test 1" is displayed. What am I doing wrong here?

My question is different from Submitting a form with submit() using Promise. Because the javascript event handler onsubmit is not used.

  • javascript
  • promise
  • async-await
  • onsubmit
Share Improve this question edited Sep 5, 2019 at 12:46 Rüdiger Schmidt asked Sep 4, 2019 at 14:49 Rüdiger SchmidtRüdiger Schmidt 1231 gold badge1 silver badge7 bronze badges 8
  • Possible duplicate of Submitting a form with submit() using Promise – Baboo Commented Sep 4, 2019 at 14:54
  • Why do you need to use promise here? – Daniyal Lukmanov Commented Sep 4, 2019 at 14:55
  • possible duplicate of stackoverflow.com/questions/33289726/… – Travis James Commented Sep 4, 2019 at 14:57
  • Hi Daniyal, I've been looking for a feature that will allow me to stop javascript and come across promise. – Rüdiger Schmidt Commented Sep 4, 2019 at 15:40
  • @RüdigerSchmidt Given your most recent edit, have you noticed my answer below? – Ivar Commented Sep 4, 2019 at 16:21
 |  Show 3 more comments

1 Answer 1

Reset to default 19

The return check_form() does not return false as you might think. Async functions always return an implicit Promise and therefore, your form is still submitted. The first alert shows up because up to that moment it is still synchronous. Everything after the sleep will be scheduled for a later time and the form submission will not wait for that.

To resolve it you can call the function and then return false.

function sleep(lf_ms) {
  return new Promise(resolve => setTimeout(resolve, lf_ms));
}

async function check_form() {
  console.log('Test 1');
  await sleep(1000);
  console.log('Test 2');
}
<form name="myform" method="post" onsubmit="check_form(); return false;">
  <input type="text" name="city"><br>
  <br>
  <a href="javascript:check_form();">check the method call via link</a><br>
  <br>
  <button type="submit">check the method call via submit button</button><br>
  <br>
</form>

Edit to address your comment

User input is checked in the function check_form. If the inputs are error-free, the function returns true. If there are errors, the function returns false. In the event of an error, the page that is stored in the attribute action of the tag form should not be called.

You can't pause JavaScript like that, but you can use return false to stop the submission and then after your validation, submit the form via JavaScript.

function sleep(lf_ms) {
  return new Promise(resolve => setTimeout(resolve, lf_ms));
}

async function check_form(form) {
  console.log('Test 1');
  await sleep(1000);
  console.log('Test 2');

  let city = document.getElementById('city').value;
  // Validation
  if (form !== undefined && city.trim() !== "") {
    // Validation succeeded, submit the form
    form.submit();
  }
}
<form name="myform" method="post" onsubmit="check_form(this); return false;">
  <input type="text" id="city" name="city"><br>
  <br>
  <a href="javascript:check_form();">check the method call via link</a><br>
  <br>
  <button type="submit">check the method call via submit button</button><br>
  <br>
</form>

本文标签： javascript async await Submitting a form with onsubmit using PromiseStack Overflow

版权声明：本文标题：javascript async await Submitting a form with onsubmit using Promise - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738621221a2103203.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。