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

Question

I am trying a code where there is a form to accept email address for newsletter subscription;

When the alert message is displayed on empty field or invalid email submit, the alert message div is created within the form tag; I want the message div out of the form tag. Below are codes in use;

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>

SNAPSHOT FROM CODE INSPECT IN CHROME

Answer 1

Use div outside of form and edit your js code like

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

Use this where u want Hope this working fine.

Answer 2

You can use jQuery after() instead of append . Like this:

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

Your alert message div is now appended inside the form with the following line:

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

You can simply create the alert div outside the form by setting the following:

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

Now the alert message div is outside the form and the rest of the stuff will work as it is and the message will be shown outside the form.

Answer 4

尝试这个

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