jquery slide down notification on form submit-nt w

2019-09-03 13:08发布

问题:

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>

回答1:

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