时间戳

首页 > 解决方案 > 如何在 JavaScript 中编辑警报成功提交

javascript - 如何在 JavaScript 中编辑警报成功提交

问题描述

嗨，我正在编辑一个网站，那里有表单提交，我使用 formspree 提交表单（姓名、电子邮件、评论）。然后点击发送按钮。

一切正常，期待成功的警报看起来很奇怪......见下图：

在此处输入图像描述

在此处输入图像描述

我正在尝试编辑它，但无法弄清楚如何。我希望它显示“谢谢，您的提交成功！” .

我找到了这部分的javascript代码：

// Form Validation !Plugin @v1.0
    NioApp.Plugins.submitform = function () {
        var $form = $('.nk-form-submit');
        
        if( !$().validate && !$().ajaxSubmit ) {
            console.log('jQuery Form and Form Validate not Defined.');
            return true;
        }
        
        if ($form.exists()) {
            $form.each(function(){
                var $self = $(this), _result = $self.find('.form-results');
                $self.validate({
                    ignore: [],
                    invalidHandler: function () { _result.slideUp(400); },
                    submitHandler: function(form) {
                    _result.slideUp(400);
                    $(form).ajaxSubmit({
                        target: _result, dataType: 'json',
                        success: function(data) {
                            var type = (data.result==='error') ? 'alert-danger' : 'alert-success';
                            _result.removeClass( 'alert-danger alert-success' ).addClass( 'alert ' + type ).html(data.message).slideDown(400);
                            if (data.result !== 'error') { $(form).clearForm().find('input').removeClass('input-focused'); }
                        }
                    });
                    }
                });
                $self.find('.select').on('change', function() { $(this).valid(); });
            });
        }
    };
    NioApp.components.docReady.push(NioApp.Plugins.submitform);

和css中的代码：

.alert-success { color: #29cf77; background: #cef5e1; }

.alert-success .close { background: #64e09e; }

.alert-success-alt { background: #39d884; }

.alert-success-alt .close { background: #25b96b; }

谁能给我一些提示如何改变它？谢谢。

标签： javascripthtmlformswebsubmission

解决方案

我将在问题中使用一部分 javascript 来集中注意力

                    $(form).ajaxSubmit({
                        target: _result, dataType: 'json',
                        success: function(data) {
                            var type = (data.result==='error') ? 'alert-danger' : 'alert-success';
                            _result.removeClass( 'alert-danger alert-success' ).addClass( 'alert ' + type ).html(data.message).slideDown(400);
                            if (data.result !== 'error') { $(form).clearForm().find('input').removeClass('input-focused'); }
                        }
                    });

这部分ajax是负责提交验证后的数据的部分，提交成功后的返回存储在data具有两个属性的对象中。data.result给出提交状态，并data.message携带要显示的消息div。thisdiv有一个类名.form-results，由对象_result( _result = $self.find('.form-results'))指向

下面一行根据data.status提交后发送的消息改变了div的类并显示

                            _result.removeClass( 'alert-danger alert-success' ).addClass( 'alert ' + type ).html(data.message).slideDown(400);

因此，无论是提交后要发送的消息还是对成功或失败的情况进行简短的修改。

如果我们要进行此修改，那么就在上面提到的行之前，我们添加：

if (data.result !== 'error') {data.message="Thanks, your submission is successful!";}
else { data.message = "Submition failed";}

所以代码变成

                    $(form).ajaxSubmit({
                        target: _result, dataType: 'json',
                        success: function(data) {
                            var type = (data.result==='error') ? 'alert-danger' : 'alert-success';
                             /////////////////////////////////////////////
                             if (data.result !== 'error') {data.message="Thanks, your submission is successful!";}
                             else { data.message = "Submition failed";}
                             //////////////////////////////////////////////
                            _result.removeClass( 'alert-danger alert-success' ).addClass( 'alert ' + type ).html(data.message).slideDown(400);
                            if (data.result !== 'error') { $(form).clearForm().find('input').removeClass('input-focused'); }
                        }
                    });

现在很清楚，获得解决方案并不重要，但理解代码也很重要。

推荐阅读