Help with closing message box and submiting

[ChrisJ]

I'm trying to add something to this JS, for a successfully working submit Form:

  $('#upload-form form').ajaxForm({
url: '{{LINK aj/ffmpeg-submit}}?hash=' + $('.main_session').val(),
beforeSend: function() {
$('#submit-btn').attr('disabled', true);
$('#submit-btn').val("{{LANG please_wait}}");
}, success: function(data) {
if (data.status == 200) {
window.location.href = data.link;
}

to get a message to display before the Form submits, I added:

$(".loading_msg").show();

into the beforeSend: function, like so:

beforeSend: function() {
 $('#submit-btn').attr('disabled', true);
 $('#submit-btn').val("{{LANG please_wait}}");
$(".loading_msg").show();
return false;

Had to add return:false because after 'show' it was submitting too fast to read the message.
My code stops the submission, so the message can be read. How can the submission then be un-stopped upon the reader closing the message?

I have this:

<div class="loading_msg" style="display:none"> MESSAGE!! <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> </div>

and this:

$('#submit-btn').attr('disabled', true);
 $('#submit-btn').val("{{LANG please_wait}}");
$(".loading_msg").show();
return false;

Tried these without success:

 $('#upload-form form').ajaxForm({
      url: '......,
      beforeSend: function() {
         $('#submit-btn').attr('disabled', true);
         $('#submit-btn').val("{{LANG please_wait}}");
    $('.loading_msg').show()
   $('.loading_msg').click(function () {
    return true
});

and this:

 $('#upload-form form').ajaxForm({
      url: '........,
      beforeSend: function() {
         $('#submit-btn').attr('disabled', true);
         $('#submit-btn').val("{{LANG please_wait}}");
$('#submit-btn').click(function (event) {
  event.preventDefault()
  $('.loading_msg').show()
})

$('.loading_msg').click(function () {
  $('#upload-form form').submit()
})

any help is appreciated to show the message and allow the reader of the message to close it which will cause the form to submit.

[Dani]

Had to add return:false because after 'show' it was submitting too fast to read the message.

Isn't it a better user experience for the form to be submitted immediately? A user would rather see the results of the form submit immediately than unnecessarily wait for a "please wait" message when there's no need to wait?

It sounds to me like you don't want pressing the submit button on the form to actually submit the form. Instead, you want pressing the submit button on the form to simply load a modal or an alert or something that shows a message you want the reader to read. And then you want the user action of dismissing that modal to be what actually submits the form.

Something more like ...

// When user tries to submit form (either by pressing Enter on their keyboard or clicking the submit button) ...
$('form').submit(function (event) {
  event.preventDefault(); // Don't actually submit the form
  $('.loading_msg').show(); // Show your loading message
})

// When user clicks the dismiss button in the modal ...
$('.loading_msg').click('.btn-dismiss', function (event) {
    // Submit the form for real
    $('form').submit();
})

Good luck!

[Vijay_34]

There are two ways to resolve this conflict.

1. Use confirm() in the beforeSend.

You can use confirm in the beforeSend and it will do the same as what you want to do with a customised prompt. confirm() will return false if you click cancel and it will return true if you press Ok.
Confirm will also halt the program execution until you get a response from the user. An example is given below.

$('#upload-form form').ajaxForm({
url: '{{LINK aj/ffmpeg-submit}}?hash=' + $('.main_session').val(),
beforeSend: function() {
              return confirm("Are you sure?");
            },
 success: function(data) {
             if (data.status == 200) {
                  window.location.href = data.link;
             }

1. Use a custom popup on form submit and click

As beforeSend documentation doesn’t mention async support, we will try to change the functionality slightly. We will not submit the form on submit button. On the other hand, we will call a method which will do the validation you wanted to do in beforeSend. If that validation is successful, then we will submit the ajax. An example is given below.

Add a submit button below the form. If it's already there, then add a click event on that.

 $('#submit').click(function() {
                   //
 });

Validate beforeSend functionality on submit button. If validation is successful then submit the form.

$('#submit').click(function() {
         var returnVal = someValidation();

         if(returnVal) {
         //Post the ajax request
         }
  });

someValidation function () {
         $('#submit-btn').attr('disabled', true);
         $('#submit-btn').val("{{LANG please_wait}}");
         $('.loading_msg').show()
         $('.loading_msg').click(function () {
             return true
         });

}