Delay the Bootstrap modal hide after the HTML form is submitted-CodePudding

In my WordPress v5.8.2, I have a custom HTML form in Bootstrap modal v4.

<!-- Modal -->
<div  id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div >
    <div >
      <div >
        <h5  id="exampleModalLabel">Modal title</h5>
        <button type="button"  data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div >
        <form id="form" method="POST" >
          <input id="name" name="name"  type="text" placeholder="Full Name" value="">
          <button type="submit" name="form_submit" id="form_submit" >Submit</button>
        </form>
      </div>
      <div >
        <div id="confirm" >
          <div >
            <div id="alert" role="alert"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

For user experience, wanted to show a confirmation message for 2 seconds after the form submission in a div #confirm with below jQuery:

  $(document).on("submit", "#form", function(e) {
    $name = $(this).find('input[name=name]').val(); // Name
    $("#alert").text('Thank you '   $name   '.');
    $("#confirm").removeClass("d-none");
    setTimeout(function() {
      $("#modal").modal('hide');
    }, 2000);
  });

I would like to hold the modal for 2 seconds before it hides, so I can show the message in the #confirm div. However the modal is closing immediately.

Here is the https://jsfiddle.net/kingBethal/08v2qfa5/10/.

CodePudding user response：

I suggest you use a button type of button (not a submit type of button) and then handle the form submission programmatically

Please look at the following sample code

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Test</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        window.addEventListener('load', () => {
            document.getElementById('submitButton').addEventListener('click', () => {
                let name = document.getElementById('name').value;
                if (name !== '') {
                    let alertPlaceholder = document.getElementById('alertPlaceholder');
                    alertPlaceholder.outerHTML = '<div >Thank you, '   name   '!</div>';
                    setTimeout(() => { document.getElementById('form').submit(); }, 2000);
                }
            });
        });
    </script>
</head>
<body>
    <div >
        <button type="button"  data-bs-toggle="modal" data-bs-target="#exampleModal">Test</button>
        <div  id="exampleModal">
            <div >
                <div >
                    <div >
                        <h5 >This is a test</h5>
                    </div>
                    <div >
                        <div id="alertPlaceholder"></div>
                        <form id="form">
                            <div >
                                <label for="name" >Name</label>
                                <input  id="name" name="name" value="Fabio" />
                            </div>
                        </form>
                    </div>
                    <div >
                        <button type="button"  id="submitButton">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CodePudding user response：

the problem with your code is when you click on submit it directly submits your form without executing your JS script so to execute JS Script you must need to prevent submitting the form. for that put this code in submitting Js

e.preventDefault()

for submitting form code after script execute

document.getElementById("form").submit()

here is the working code hope it will help you.

 
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">

    </script>
          <script>
          $(document).on("submit", "#form", function(e) {
            e.preventDefault()
            $name = $(this).find('input[name=name]').val(); // Name
            $("#alert").text('Thank you '   $name   '.');
            $("#confirm").removeClass("d-none");
            setTimeout(function() {
              $("#modal").modal('hide');
             document.getElementById("form").submit();
            }, 2000);
           
          });
          </script>
    </head>
    <body>
    <!-- Button trigger modal -->
    <button type="button"  data-toggle="modal" data-target="#modal">
      Launch modal
    </button>

     <!-- Modal -->
    <div  id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div >
        <div >
          <div >
            <h5  id="exampleModalLabel">Modal title</h5>
            <button type="button"  data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div >
            <form id="form" method="POST" >
              <input id="name" name="name"  type="text" placeholder="Full Name" value="">
              <button type="submit" name="form_submit" id="form_submit" >Submit</button>
            </form>
          </div>
          <div >
            <div id="confirm" >
              <div >
                <div id="alert" role="alert"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    </body>
    </html>