show modal after form submission until next page loads… does not work on safari?

Question

I have a button like this

    
        name
          


        

Answer 1

might be overkill, but tested in chrome and safari with no issues, and you can control the amount of time before the actual form is submitted.

Update I feel you just want a notification system, not a modal .. check out toastr

Update 2 opening the post in new window doesn't always work. remove the prop('target', 'blank') line and try again.

Code Example

// Code goes here
var CustomTimeout = 200; // 200 miliseconds

$(document).ready(function() {
  $(".render").click(function(evt) {
    // Stop Form from sending
    evt.preventDefault();
    // Open Modal
    showModal().then(function() {
      // Send Form
      sendForm(evt, CustomTimeout).then(whateverYouWantToDoNextFunction)
        // fake function
        function whateverYouWantToDoNextFunction() {};
    })
  });
});

function showModal() {
  return new Promise(function(resolve, reject) {
    resolve($('#render_page').modal('show'));
  })
}

function sendForm(e, timeout) {
  return new Promise(function(resolve, reject) {
    console.log("Sending Form", e);
    // Set Your Action and Method manuall
    $("form").prop('action', "/category");
    $("form").prop('method', "GET");

    // Opens a new window for the submission
    $('form').prop("target", "_blank");

    // Set Timeout
    function submit() {
      setTimeout(function() {
        $('form').submit();
        // Resolve Submission for chaining
        resolve(console.log("Form Sent Successfully"));
      }, timeout);
    }

    // Submit it
    submit();
  });
}

  
  
  
  
  





  
    
      name
    
  

  

    

      

        


          

            ×
            
            
Rendering Page...