通知(jquery)不弹出用户消息

时间:2014-10-13 14:18:12

标签: jquery html css

如何获取标题并发布到通知?..通知的标题取自表单并弹出通知。因此,当用户单击提交按钮时,将提取持续时间和标题,并且通知幻灯片存在直到指定的持续时间。我已经发布了代码...如果可能请纠正它。如果你有一个b8r替代plzz发布它。



$(document).ready(function() {
    $("#form").validate({
                rules: {
                    time: {
                          required: true,
                           number: true
                          },
                    title: "required"
                },
                messages: {
                    time: "Please enter time(digit) in Seconds",
                    title: "Please enter the title"                
                }
            });
    
    

    $("#notify").hide();
    
    $("#form").submit(function(e) {
        if($('#form').valid()) {
            $("#notify").slideDown();

            var timeOut = parseInt($("#time").val())*1000 ; 
            var str = parseInt($("#title").val());

            setTimeout(function() {
                $("#notify").slideUp();
            }, timeOut, str);
        }

            return false;
        });

    
    });
    

#notify
{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
    background: #00FF00;
    opacity: 0.8;
    display: none;
}


#message
{
    width: 100%;
    text-align: center;
    padding-top: 15px;
}
#form .formelement
{
    display: inline-block;
    padding: 10px 10px;
    width: 900px;
}

#form .formelement label{
    float: left;
    text-align: left;
    width: 110px;
}

#form .submit {
    padding: 10px;
    width: 220px;
    height: 40px;
}

#form .formelement label.error {
    color: red;
    display: inline-block;
    margin: 4px 0 10px 100px;
    padding: 0;
    text-align: left;
    width: 900px;
}

<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script src="valid.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />



<div id="notify">
    <div id="message"></div>
</div>

<fieldset>


<form action="" id="form" >

            <div class="formelement">
                <label for="time">Time(in Sec) : </label>
                <input type="text" name="time" id="time"/>
            </div>

            <div class="formelement">
                <label for="title">Title : </label>
                <input type="text" name="title" id="title"/>
            </div>
 
                    
            <div class="formelement">
                <input type="submit" value="Show Success" class="submit" id="s"/>
            </div>


</form> 
</fieldset>




</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

你有几个问题。首先,你在最后一行javascript中缺少一个右括号。

其次,你要两次包括jquery.min.js。由于validate.js附加到第一个,第二个将无法访问该插件。删除最后一次加载jquery。

$(document).ready(function() {
        $("#form").validate({
            rules: {
                time: "required",           
            },
            messages: {
                time: "Please enter Time in Miliseconds",                  
            }
        });

        $("#notify").hide();

        $("#form").submit(function(e) {
            $("#notify").slideDown();

            var timeOut = parseInt($("#time").val()); 

            setTimeout(function() {
                $("#notify").slideUp();
            }, timeOut);

            return false;
        });
    });
#notify
{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
    background: #FF0000;
    opacity: 0.8;
    display: none;
}


#message
{
    width: 100%;
    text-align: center;
    padding-top: 15px;
}
#form .formelement
{
    display: inline-block;
    padding: 10px 10px;
    width: 900px;
}

#form .formelement label{
    float: left;
    text-align: left;
    width: 110px;
}

#form .submit {
    padding: 10px;
    width: 220px;
    height: 40px;
}

#form .formelement label.error {
    color: red;
    display: inline-block;
    margin: 4px 0 10px 100px;
    padding: 0;
    text-align: left;
    width: 900px;
}
<body>


<div id="notify">
    <div id="message">SUCCESSFULL</div>
</div>

<fieldset>



<form action="" id="form" method="post" >

            <div class="formelement">
                <label for="time">Time (in Ms): </label>
                <input type="text" name="time" id="time"/>
            </div>
			
			<div class="formelement">
                <input type="submit" value="Show Success" class="submit" />
            </div>



</form> 
</fieldset>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
</body>