jquery slide down notification on form submit-nt w

Can someone please throw light on how to produce notification or alerts on form submit? The notification should stay on users page for time given by user in form. Submit button will take duration from the form and produce a jquery notification/alert for that duration. My code is not producing intended results

$(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()) || 100; // default timeout

            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" >

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



</form> 
</fieldset>
</body>

标签： jquery html css forms

1条回答

Summer. ? 凉城

2楼-- · 2019-09-03 13:45

<div id="notification">
    Notification content
</div>    

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

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

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

            var timeOut = $("#time").val() || 100; // default timeout

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

            return false;
        }
    });
</script>

0人赞添加讨论(0) 举报

jquery slide down notification on form submit-nt w

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间