Question

我有一个带有ajax的订阅表单。问题是success和error消息始终在页面上。为什么他们在页面上以及如何在提交表单之前隐藏它们？

这是我的js函数

$(document).ready(function(){

(function($) {
    "use strict";

// validate subscribeForm form
$(function() {
    $('#subscribeForm').validate({
        rules: {
            name: {
                required: true,
                minlength: 4
            },
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            name: {
                required: "Please enter your name?",
                minlength: "Your name must consist of at least 4 characters"
            },
            email: {
                required: "Please enter your email address"
            }
        },
        submitHandler: function(form) {
            $(form).ajaxSubmit({
                type:"POST",
                data: $(form).serialize(),
                url:"subscribe.php",
                success: function() {
                    $('#subscribeForm :input').attr('disabled', 'disabled');
                    $('#subscribeForm').fadeTo( "slow", 0.15, function() {
                        $(this).find(':input').attr('disabled', 'disabled');
                        $(this).find('label').css('cursor','default');
                        $('#sub_success').fadeIn();
                    });
                },
                error: function() {
                    $('#subscribeForm').fadeTo( "slow", 0.15, function() {
                        $('#sub_error').fadeIn();
                    });
                }
            })
        }
    })
})      
})(jQuery)
})

这是表格

<div class="footer-newsletter row footer-widget right-box">
    <h3 class="footer-title">newsletter sign up</h3>
        <form class="form-inline newsletter-form" id="subscribeForm" method="post" action="">
            <input type="text" id="name" name="name" class="form-control" placeholder="Name">
            <input type="email" id="email" name="email" class="form-control" placeholder="Email">
            <button type="submit" class="btn btn-primary" name="sub_submit">Submit</button>
        </form>
        <div id="sub_success">You subscribe succesfully!</div>
        <div id="sub_error">Opps! There is something wrong. Please try again</div>                      
</div>

因此sub_success和sub_error始终在页面上。

Answer 1

使用此类警报，它将在3秒内消失

$('#success_message').fadeIn(1000).html("<div class='alert alert-danger' role='alert' style='font-size: 15px;'>Soory some there is some error,please enter again data...</div>").fadeOut(3000);

Answer 2

在代码中更改以下内容： -

<div id="sub_success" style="display:none">You subscribe succesfully!</div>
<div id="sub_error" style="display:none">Opps! There is something wrong. Please try again</div>

Answer 3

只需在.hide上为这两个元素添加document.ready，如下所示：

$(document).ready(function(){
   $('.sub_success,.sub_error').hide();
});

Answer 4

你可以写一个CSS

#sub_success, #sub_error {display:none}

然后使用jquery，您可以使用

显示和隐藏

$("#sub_success").show();
$("#sub_error").hide();

隐藏表单上的成功和错误消息

4 个答案: