Jump to content

Help with beforeSend function


Chrisj

Recommended Posts

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

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.