如何将警报消息 div 移出<form>标签

Question

我正在尝试一个代码，其中有一个表格可以接受订阅时事通讯的电子邮件地址;

当警报消息

显示在空字段或无效的电子邮件提交上时，将在表单标记中创建警报消息div;我希望消息div 脱离表单标记。以下是正在使用的代码;

JAVASCRIPT

// newsletter
    (function(){
        var subscribe = $('#subscribe');
        subscribe.append('<div class="message_container_subscribe"></div>');
        var message = $('.message_container_subscribe'),text;
        subscribe.on('submit',function(e){
            var self = $(this);
            if(self.find('input[type="email"]').val() == ''){
                text = "Please enter your e-mail!";
                message.html('<div class="alert_box color_red r_corners error"><i class="fa fa-exclamation-triangle"></i> '+text+'</div>')
                    .slideDown()
                    .delay(4000)
                    .slideUp(function(){
                        $(this).html("");
                    });
            }else{
                self.find('span.error').hide();
                $.ajax({
                    type: "POST",
                    url: "newsletter.php",
                    data: self.serialize(), 
                    success: function(data){
                        if(data == 1){
                            text = "Your email has been sent successfully!";
                            message.html('<div class="alert_box r_corners color_green success"><i class="fa fa-check-square"></i> '+text+'</div>')
                                .slideDown()
                                .delay(4000)
                                .slideUp(function(){
                                    $(this).html("");
                                })
                                .prevAll('input[type="email"]').val("");
                        }else{
                            text = "Invalid email address!";
                            message.html('<div class="alert_box color_red r_corners error"><i class="fa fa-exclamation-triangle"></i><p>'+text+'</p></div>')
                                .slideDown()
                                .delay(4000)
                                .slideUp(function(){
                                    $(this).html("");
                                });
                        }
                    }
                });
            }
            e.preventDefault();
        });
    })();

.HTML

<form action="newsletter.php" method="post" name="subscribe-form" id="subscribe" class="subscribe-form">
                    <input type="email" placeholder="Your email address" id="emailnews" class="email" name="emailnews">
                    <button type="submit" value="Submit" class="submit">Subscribe</button>
                </form>

在 CHROME 中从代码检查中获取快照

Answer 1

你可以使用 jQuery after（） 代替 append 。喜欢这个：

$("form").after('<div class="message_container_subscribe"></div>');

// newsletter
    (function(){
        var subscribe = $('#subscribe');
        $("form").after('<div class="message_container_subscribe"></div>');
        var message = $('.message_container_subscribe'),text;
        subscribe.on('submit',function(e){
            var self = $(this);
            if(self.find('input[type="email"]').val() == ''){
                text = "Please enter your e-mail!";
                message.html('<div class="alert_box color_red r_corners error"><i class="fa fa-exclamation-triangle"></i> '+text+'</div>')
                    .slideDown()
                    .delay(140000)
                    .slideUp(function(){
                        $(this).html("");
                    });
            }else{
                self.find('span.error').hide();
                $.ajax({
                    type: "POST",
                    url: "newsletter.php",
                    data: self.serialize(), 
                    success: function(data){
                        if(data == 1){
                            text = "Your email has been sent successfully!";
                            message.html('<div class="alert_box r_corners color_green success"><i class="fa fa-check-square"></i> '+text+'</div>')
                                .slideDown()
                                .delay(4000)
                                .slideUp(function(){
                                    $(this).html("");
                                })
                                .prevAll('input[type="email"]').val("");
                        }else{
                            text = "Invalid email address!";
                            message.html('<div class="alert_box color_red r_corners error"><i class="fa fa-exclamation-triangle"></i><p>'+text+'</p></div>')
                                .slideDown()
                                .delay(4000)
                                .slideUp(function(){
                                    $(this).html("");
                                });
                        }
                    }
                });
            }
            e.preventDefault();
        });
    })();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="newsletter.php" method="post" name="subscribe-form" id="subscribe" class="subscribe-form">
                    <input type="email" placeholder="Your email address" id="emailnews" class="email" name="emailnews">
                    <button type="submit" value="Submit" class="submit">Subscribe</button>
                </form>

Answer 2

在表单之外使用div 并像这样编辑你的 js 代码

(".message_container_subscribe").html("Your Message Here")

在您想要的地方使用它希望这工作正常。

Answer 3

您的警报消息div 现在附加在表单中，并带有以下行：

subscribe.append('<div class="message_container_subscribe"></div>');

您可以通过设置以下内容在表单外部创建警报div：

 subscribe.after('<div class="message_container_subscribe"></div>');

现在，警报消息div位于表单外部，其余内容将按原样工作，消息将显示在表单外部。

Answer 4

试试这个

$('<div class="alert_box color_red r_corners error"><i class="fa fa-exclamation-triangle"></i><p>'+text+'</p></div>').insertAfter($('#subscribe'));