javascript - 如何在提交表单时加载警报插件

Question

我正在使用警报插件，我希望它在我的脚本中的 .done 函数下提交表单时加载 alert-success。插件页面 here .

该插件使用这样的按钮:

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

然后，当用户单击按钮时，它会调用 jquery $(document).ready 并执行插件。我想要完成的只是在提交表单时在没有按钮的情况下加载。

我的表单脚本:

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

点击按钮时执行的脚本:

  $(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

尝试在 done 方法中添加这个

$.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,
                  });
             }
      });

根据您的需要进行定制。自定义选项在插件页面上