Delay the Bootstrap modal hide after the HTML form is submitted

Question

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



  
    
      
        Modal title

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

user_17572646 · Answer

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




    
    Test
    
    
    


    
        
        
            
                
                    
                        This is a test
                    
                    
                        
                        
                            
                                Name

user_8384983 · Answer

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.

 
    
    
    
      Bootstrap Example
      
      
      
      
      
      
          
    
    
    
    

     
    
      
        
          
            Modal title

user_3725816 · Answer

Talking queue from @lam-tran-duc advise on using ajax, this is how I solved:

The form:

    

  
    
      
        Modal title

Declared below ajax variables in WordPress functions.php file:

/*
 * ajax variables in functions.php
 */

function ajax_variables() {?>


With below JS script I am able to prevent the form from submitting, so I can show a confirmation message and then process the form submission through ajax:
/*
 * .js file
 */

$(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');
  }, 20000);

  // ajax
  var form_data = $(this).serializeArray();

  // Here we add our nonce. The one created in functions.php ajax_variables function.
  form_data.push({
    "name": "form",
    "value": ajax_nonce
  });

  // ajax petition.
  $.ajax({
    url: ajax_url, // AJAX endpoint from ajax_variables function
    type: 'post',
    security: '',
    data: form_data
  });

  // prevents the submit event to refresh the page.
  return false;

});

Delay the Bootstrap modal hide after the HTML form is submitted

3 Answers