How to load alert plugin when form is submited

Question

I am using an alert plugin and I want it to load the alert-success when the form is submitted under the .done function in my script. Plugin page here.

The plugin works with a button like this:

<button id="alert-success" class="bordered"  >Try out!</button>

then when the user clicks the button it calls the jquery $(document).ready and executes the plugin. All I want to accomplish is to be loaded without the button when the form is submitted.

My form script:

var form = $('#contact');
form.submit(function (event) {
 event.preventDefault();
  var form_status = $('<div class="form_status"></div>');
    var $form = $(this);

var name= $('#fname').val();
var email= $('#email').val();
var Message = $('#msg').val();
var selectedOption = document.getElementById("country").value;



 $.ajax({
            type: 'POST',
            url: '../sendemail.php',
            data: {
               Name: name,
               Email: email,
               message: Message,
               Country : selectedOption,

            },

            beforeSend: function () {


form.append(form_status.html(sending. . .
<i class="material-icons w3-spin w3-text-indigo" style="font-size:30px">mail_outline</i>').fadeIn());                                                            }


        }).done(function (data) {


             form_status.html('<i id="alert-success" class="bordered material-icons w3-text-green" style="font-size:30px">done</i> message sent!').hide(10000);                  

        });
                document.getElementById("fname").value = "";
                document.getElementById("email").value = "";

           document.getElementById("country").value = "";
document.getElementById("msg").value = "";

});//end contact form

Script that executes when the button is clicked:

  $(document).ready(function() {
    var variants = {


    'alert-success': {
    args: [
        {
   content: 'Success! Message sent!',
        icon: $.sweetModal.ICON_SUCCESS
                }
            ]
            },                                  

        };

    for (var key in variants) {
    if (variants.hasOwnProperty(key)) {
    var variant = variants[key];

   $('#' + key).on('click', { variant: variant }, function(e) {
    var variant = e.data.variant;

        variant.fn = variant.fn || $.sweetModal;
    variant.fn.apply(this, variant.args);
    });
            }     }
            });

Answer 1

try adding this inside done method

$.ajax({
            type: 'POST',
            url: '../sendemail.php',
            data: {
               Name: name,
               Email: email,
               message: Message,
               Country : selectedOption,

            },
             success:function()
             { 
                     // after success show modal
                     $.sweetModal({
                     title: "Title here",
                     message: "",
                     content: "Alert Success",
                     classes: ["success"],
                     showCloseButton: !0,
                     blocking: !0,
                     timeout: null,
                     theme: $.sweetModal.THEME_LIGHT,
                     type: $.sweetModal.TYPE_MODAL,
                  });
             }
      });

Customize as per your need. Customization options are on the plugin page