Help with SweetAlert and submit button

JavaScript
#1

This SweetAlert works successfully upon the Form submitting:

                $('#upload-form').on('submit',function(e){
                    e.preventDefault();
                    var form = $('form');
                    swal.fire({
                        title: "Are you sure?",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "Yes, submit it!",
                        closeOnConfirm: false
                    }, function(isConfirm){
                    		console.log("sdfsf");
                        if (isConfirm) form.submit();
                    });
                });

however, it doesn’t display for longer than two seconds, before the Form automatically submits.

The SweetAlert is supposed to stay displayed and allow the confirm button to be selected to proceed.

(this is different than my other posting, in that this code is not in the BeforeSend function - thanks for the replies).

Any assistance is welcomed…

(It was suggested to make the Submit button a button that opens the alert, and make the Form’s submit-btn button the swal confirmButton…but I’m not sure how to do that (but I’ve tried))

#2

So… on form submit, you create a confirm dialog… that… submits the form…

…

I feel like this is going to go around in circles…

#3

Thanks for your message.
upon Form submit, a confirm dialog box appears, I wouldn’t say that the dialog code submits the Form, because it’s not displayed long enough for someone to click the displayed dialog box choices, either 'Yes, submit it" or “Cancel”.

it was suggested trying having the submit button not submit the form, have it be a regular button, not a form submit button, so then, when that regular button is clicked, make it SweetAlert Swal.fire, and then make the “yes, submit it” be the submit button. But I haven’t been able to get that correct, in my attempts at switching those buttons.

I look forward to any guidance

#4

… i would say it does? Cause you wrote those exact words into it?

That’s not whats making it submit now, but it’s going to be a problem in the immediate future.

From what your previous thread said, i’m guessing you’ve still got code lingering around listening to the original form submit and its firing on this one. Impossible to tell without seeing the full page.

1 Like
#5

Thanks again for your reply.
Here’s the full code, if you could take a glance over it, that would be great.

The JS we’re discussing is around line 285
and the submit button for the form is around line 378.

I look forward to your comments.

#7

so… #upload-form is a div.
a div will never fire an onsubmit event… at least, it shouldnt be.

Your form is submitting itself, before the alert can intervene. Trigger off of (and prevent default from) the actual form.

Or dont even make the button in the form an actual submit button, and have the button execute the alert and submit. Which is probably the better route.

<button type="submit" id="submit-btn"
Remove type.

$('#upload-form').on('btn-submit',function(e){
“btn-submit” isnt an event type, so this code will never fire.
change to
$('#submit-btn').on('click',function(e){

var form = $('form');
Too vague - you’ve got multiple forms on the page, so this is going to find-and-fire all of them.
var form = $('.pt_upld_page_frm');

1 Like
#8

Many thanks for your kind assistance.
I have made the suggested changes:

                $('#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
                    }, function(isConfirm){
                    		console.log("sdfsf");
                        if (isConfirm) form.submit();
                    });
                });

and:

<button id="submit-btn" class="btn btn-main setting-panel-mdbtn" disabled>< etc....

and upon proceeding with an upload, the dialog box displays when the Submit button is clicked, and it successfully stays open until the dialog box button choice “Cancel” is selected, and the dialog box closes/disappears. That’s a big improvement. Much thanks.
However, when the other dialog box button choice “Yes, submit it!” is selected the dialog box closes/disappears, and the Form isn’t submitted. Upon clicking the Submit button again, the dialog box opens again.
I look forward to your comments and any help with getting the “Yes, submit it!” button to submit the Form.

#9

so I cant find an option on the SweetAlert page that matches “closeOnConfirm”, so something’s wrong in the demo you’re using as an example.

swal.fire should return a Promise. And based on their example “A confirm dialog, with a function attached to the “Confirm”-button” on their website, what you should do here:

is instead end the fire and tack onto the Promise…so…

}).then((result) => {
  if (result.isConfirmed) { $('.pt_upld_page_frm').submit(); }
});

To be clear, you’re using sweetalert2, right?

#10

Thanks, sweetalert2 I believe so.

Per your suggestion:

                $('#submit-btn').on('click',function(e){
                    e.preventDefault();
                    var form = $('.pt_upld_page_frm');
                    //var form = $('form');
                    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(); }
});
});

“yes, Submit it!” now closes the dialog box and directs back to the select a file to upload page,
but the file is not uploaded.

As you may recall, towards the bottom of the file you’ll see:

   $('#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;
window.location.href = '{{LINK home}}';
         }

where it shows when the file is actually uploaded the redirect is to the home page.
So, somehow the sweetAlert isn’t uploading and redirecting properly.

Any ideas are welcomed.

#11

well since you’re taking control of the submit flow anyway, i’d just use ajaxSubmit in the then instead of setting up the form with ajaxForm and then relying on the secondary flow of submitting.

#12

I greatly appreciate your reply and suggestion, I just don’t know how to do that from a code standpoint. Not sure how to ‘use ajaxSubmit in the then’. I’d be grateful for any additional guidance with that coding

#13

So the same place you learned to use ajaxForm, you would look at ajaxSubmit.

#14

Much appreciated for the clue, but that is unclear to me on how to accomplish what you’re saying

                        closeOnConfirm: false
                        }).then((result) => {
						 //if (result.isConfirmed) { $('.pt_upld_page_frm').submit(); }
						  if (result.isConfirmed) { $('.upload-form').submit(); }

I tried this without success (no submission)
any additional guidance is appreciated

#15

take the options in your ajaxForm code, put it into an ajaxSubmit function instead, put that inside your button handler.