Help with beforeSend function

[Chrisj]

Thanks for all the previous help.

I’m trying to add some JS to this 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 tested:

 

etc.....

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


Swal.fire({
title: '<strong>HTML <u>example</u></strong>',
  icon: 'info',
html:
'You can use <b>bold text</b>, ' +
'<a href="//sweetalert2.github.io">links</a> ' +
'and other HTML tags',
 showCloseButton: true,
 showCancelButton: true,
focusConfirm: false,
 confirmButtonText:
 '<i class="fa fa-thumbs-up"></i> Great!',
 confirmButtonAriaLabel: 'Thumbs up, great!',
 cancelButtonText:
 '<i class="fa fa-thumbs-down"></i>',
  cancelButtonAriaLabel: 'Thumbs down'
})
 },
  

(from SweetAlert).

The alert displays successfully, but only for about 1 second.

How can I delay or pause the beforeSend to give the Form submitter time to read the displayed message?

I look forward to any assistance...

 

[requinix]

Do you want to wait a few seconds, literally to give the user time to read? Or do you want to wait for the user to read the popup and click a button?

[Chrisj]

Thanks for your reply.

I'd like to wait for the user to read the popup and click a button - which would then Submit.

Any additional help is welcomed.

[requinix]

Then in that case, don't submit the form when they click the first button. Make that trigger the popup, then have the popup's button submit the form.

[Chrisj]

Thanks again for your kind reply.

Not sure what is meant by 'first button', but this code was tried without success (which means I was unable to select a file to upload); so I commented out the lines that were added and I can now proceed again with uploading a file, but still no message displaying beyond a 1 second appearance.

 

   $('#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}}");
//const result = await swal.fire({
Swal.fire({ title: '<strong>HTML <u>example</u></strong>', icon: 'info', html:
 'You can use <b>bold text</b>, ' +
 'and other HTML tags',
  showCloseButton: true,
  showCancelButton: true,
  focusConfirm: false,
      confirmButtonText: '<i class="fa fa-thumbs-up"></i> Great!',
  confirmButtonAriaLabel: 'Thumbs up, great!',
  cancelButtonText: '<i class="fa fa-thumbs-down"></i> Cancel',
  cancelButtonAriaLabel: 'Thumbs down'
 })
//  if (result.isConfirmed)
 //});
 },

any additional guidance is appreciated

[requinix]

The "first button" would be the one that started submitting the form (and at which point you have it now showing the popup). By the look of it, I'm talking about #submit-btn.

Another approach is, if possible, to block submitting the form based on whether the popup is visible: if not then cancel the submit and instead show the popup, and if so then let it run normally. Then make the popup's button also submit the form. That way the first time the form tries to get submitted (via #submit-btn) it will cancel and show the popup, then the second time the popup will be visible and it will continue.

[Chrisj]

Thanks again.

 

Regarding "don't submit the form when they click the first button. Make that trigger the popup, then have the popup's button submit the form";

so, are you saying I need to  integrate this:

         Swal.fire({
	        title: '<strong>HTML <u>example</u></strong>',
	        icon: 'info',
	        html:
	          'You can use <b>bold text</b>, ' +
	          '<a href="//sweetalert2.github.io">links</a> ' +
	          'and other HTML tags',
	        showCloseButton: true,
	        showCancelButton: true,
	        focusConfirm: false,
	        confirmButtonText: '<i class="fa fa-thumbs-up"></i> Great!',
	        confirmButtonAriaLabel: 'Thumbs up, great!',
	        cancelButtonText: '<i class="fa fa-thumbs-down"></i> Cancel',
	        cancelButtonAriaLabel: 'Thumbs down'
	      })

into this?:

 

  $('#submit-btn').attr('disabled', true);

 

And regarding this "block submitting the form based on whether the popup is visible: if not then cancel the submit and instead show the popup", do you mean something like this?:

 

 beforeSend: function() {

         Swal.fire({
	        title: '<strong>HTML <u>example</u></strong>',
	        icon: 'info',
	        html:
	          'You can use <b>bold text</b>, ' +
	          '<a href="//sweetalert2.github.io">links</a> ' +
	          'and other HTML tags',
	        showCloseButton: true,
	        showCancelButton: true,
	        focusConfirm: false,
	        confirmButtonText: '<i class="fa fa-thumbs-up"></i> Great!',
	        confirmButtonAriaLabel: 'Thumbs up, great!',
	        cancelButtonText: '<i class="fa fa-thumbs-down"></i> Cancel',
	        cancelButtonAriaLabel: 'Thumbs down'
	      })

          if ($Swal.fire.is(':visible')) {
	        return true
	      }

	      $Swal.fire.show()
	      return false
	    }
	  })

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

which, as you know, didn't work...

I look forward to any additional assistance

 

 

 

[requinix]

For that approach,

I mean have the submit button not submit the form. Period. Make it be a regular button, not a form submit button. Then, when that button is clicked, you make it Swal.fire. Nothing about the form happens yet.
Second step is using the confirm button of the alert to submit the form. Like it was a submit button.

[Chrisj]

Thanks again for your reply/clarification.

Can you provide some guidance with "using the confirm button of the alert to submit the form", can't figure out how to configure/code that.

[requinix]

Ideally you would be able to create a "submit" button on the form that is an actual submit button, then give it a form= attribute to point back to the regular form (which would allow the button to behave like a submit button even though it's not actually contained within the <form>).

If you can't then add some code when the swal closes (not cancels) that uses Javascript to get and .submit() the form.

[Chrisj]

Thanks for your suggestions, this is where I'm at now, upon selecting the Submit button it successfully displays the pop-up alert. But "yes submit" doesn't upload the file:

              $('#submit-btn').on('click',function(e){
                    e.preventDefault();
                   var form = $('.pt_upld_page_frm');
                    swal.fire({
                        title: "Are you sure?",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "Yes, submit it!",
                        closeOnConfirm: false
                        }).then((result) => {
                       if (result.isConfirmed) { $('.pt_upld_page_frm').submit(); }
});
});

The code, farther down in the file, that successfully Submits I've copied and tried to add to the Alert, like so:

 $('#submit-btn').on('click',function(e){
e.preventDefault();
   var form = $('.pt_upld_page_frm');
 swal.fire({
title: "Are you sure?",
 type: "warning",
  showCancelButton: true,
confirmButtonColor: "#DD6B55",
 confirmButtonText: "Yes, submit it!",
closeOnConfirm: false
 }).then((result) => {
 if (result.isConfirmed) { 
   $('.upload-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 = '{{LINK home}}';
}
})
});

This successfully Submits the uploaded file, but doesn't display the Alert.
My goal is to display the Alert anf have the "Yes, submit it" to actually Submit the chosen uploaded file.
Any additional guidance is appreciated.