发表新帖
发表新帖

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

后端 未结
关注
4 1312
既然无缘
既然无缘 2021-01-04 21:13

I have a button like this
相关标签:
4条回答
  • 小蘑菇
    2021-01-04 21:45

    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();
  });
}
    <!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link data-require="bootstrap@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  <script data-require="bootstrap@3.3.1" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>


  <form>
    <button type="submit" class="btn btn-default render">
      name
    </button>
  </form>

  <div class="modal fade" id="render_page" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="form-horizontal">

          <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
            </button>
            <div id="user_msg" align="left">Rendering Page...</div>
          </div>

        </div>
      </div>
    </div>
  </div>
</body>

</html>

    0 讨论(0)
  • 一个人的身影
    2021-01-04 21:48

    try this 

    <script type='text/javascript'>
    $(document).ready(function(){
        $(".render").click(function(evt){
            evt.preventDefault();
            $('#render_page').modal('show');
        });
    });
</script>

    https://jsfiddle.net/y64qyjzo/

    Update: added a timer to allow the user to notice the modal:

    $(document).ready(function() {
  $(".render").click(function(evt) {
    evt.preventDefault();
    $('#render_page').modal('show');
    setTimeout(function() {
      $('#testForm').submit();
    }, 1000)
  });
});

    (add the id 'testForm' to the form)

    https://jsfiddle.net/y64qyjzo/3

    0 讨论(0)
  • 别跟我提以往
    2021-01-04 21:55

    Try :

    $(document).ready(function(e) {
	 $(".render").click(function(evt){
			evt.preventDefault();
            $('#render_page').modal('show');
			setInterval(function(){ $("#formID").submit(); }, 3000);			
        });
});
    <form action="/category" method='GET' id="formID">
    <button class="btn btn-default render">
        name
    </button>
</form>

    change timer value according to you choice.

    0 讨论(0)
  • 萌比男神i
    2021-01-04 22:09

    There some other ways as given below

    1: you can call a function on form submission. Just Add onsubmit="myFunction()" with function name (e.g myFunction) in form tag. As given below 

    <form action="/category" method='GET' onsubmit="myFunction()">
    <button type="submit" class="btn btn-default render">
        name
    </button>
</form>





<script>
function myFunction() {
    $('#render_page').modal('show');
}
</script>

    2: you can also call this function by adding onclick="myFunction()" in submit button.

    <form action="/category" method='GET'>
    <button type="submit" class="btn btn-default render" onclick="myFunction()">
        name
    </button>
</form>




<script>
function myFunction() {
    $('#render_page').modal('show');
}
</script>

    I am sure one of these will solve your issue.

    0 讨论(0)
 看不清?
提交回复
热议问题