javascript - Message disappear after some time - Stack Overflow

admin管理员组

文章数量:1355570

For one of the projects, I have prepared one HTML form and code is working fine. What I need is the error or success message shall be disappeared after few seconds. Can any body help me in getting the code corrected. The code is given below.

HTML FORM

<div class="form">
<form id="form" name="form" method="post" action="  ">
<div id="fc">
<div id="error"></div>
<label>Name: </label>
<input type="text" name="name" id="name" />
<label>Place: </label>
<input type="text" name="name" id="place" />
</div>
<div id="btn">
<input type="submit" id="submit" value="SUBMIT" onClick="Submit(event)" />
</div>
</form>
</div>

CSS CODE

.form{ margin:0 auto;width:280px;
         padding:10px;border:solid 2px #b7ddf2;
         background:#f5fffa;
         }
   #fc{
         font-family:"Lucida Grande", "Lucida Sans Unicode", 
         Verdana, Arial, Helvetica, sans-serif; font-size:12px;
         }

   #fc label{display:block;font-weight:bold;
         text-align:right; width:120px;float:left;
         font-size:14px;
         }

   #fc input{float:left;font-size:12px;
         padding:3px 3px; border:solid 1px #aacfe4;
         width:130px; margin:2px 0 10px 10px;
         }

   #btn{clear:both;font-size:13px;font-weight:bold;
         text-align:center; margin-bottom: 2px;
         }
#error{  font-weight:bold;
         text-align:left; 
         height: 20px;
         color: red;font-size:15px;
         }

JS CODE

<script src=".10.2/jquery.min.js"></script>

<script>
function Submit(e){
    e.preventDefault();

    var name       = $("#name").val();
    var place      = $("#place").val();

       if($("#name").val() == "" ){
            $("#name").focus();
                $("#error").html("Enter the Name.");
                return false;
        }
        else if($("#place").val() == "" ){
                $("#place").focus();
                $("#error").html("Enter the Place.");
                return false;
        }

                else if($(name != '' && place != '' )){
                $("#error").html("Form submitted successfully.")
                $("#form")[0].reset();

              // Returns successful data to php.
               $.post(" ", {name: name, place: place}, 
             function(data) 
                {
                        $("#form").append(data); 
                    });
              }
     }
</script>

For one of the projects, I have prepared one HTML form and code is working fine. What I need is the error or success message shall be disappeared after few seconds. Can any body help me in getting the code corrected. The code is given below.

HTML FORM

<div class="form">
<form id="form" name="form" method="post" action="  ">
<div id="fc">
<div id="error"></div>
<label>Name: </label>
<input type="text" name="name" id="name" />
<label>Place: </label>
<input type="text" name="name" id="place" />
</div>
<div id="btn">
<input type="submit" id="submit" value="SUBMIT" onClick="Submit(event)" />
</div>
</form>
</div>

CSS CODE

.form{ margin:0 auto;width:280px;
         padding:10px;border:solid 2px #b7ddf2;
         background:#f5fffa;
         }
   #fc{
         font-family:"Lucida Grande", "Lucida Sans Unicode", 
         Verdana, Arial, Helvetica, sans-serif; font-size:12px;
         }

   #fc label{display:block;font-weight:bold;
         text-align:right; width:120px;float:left;
         font-size:14px;
         }

   #fc input{float:left;font-size:12px;
         padding:3px 3px; border:solid 1px #aacfe4;
         width:130px; margin:2px 0 10px 10px;
         }

   #btn{clear:both;font-size:13px;font-weight:bold;
         text-align:center; margin-bottom: 2px;
         }
#error{  font-weight:bold;
         text-align:left; 
         height: 20px;
         color: red;font-size:15px;
         }

JS CODE

<script src="http://ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
function Submit(e){
    e.preventDefault();

    var name       = $("#name").val();
    var place      = $("#place").val();

       if($("#name").val() == "" ){
            $("#name").focus();
                $("#error").html("Enter the Name.");
                return false;
        }
        else if($("#place").val() == "" ){
                $("#place").focus();
                $("#error").html("Enter the Place.");
                return false;
        }

                else if($(name != '' && place != '' )){
                $("#error").html("Form submitted successfully.")
                $("#form")[0].reset();

              // Returns successful data to php.
               $.post(" ", {name: name, place: place}, 
             function(data) 
                {
                        $("#form").append(data); 
                    });
              }
     }
</script>

• javascript
• html
• forms

Share Improve this question Follow asked Oct 27, 2016 at 6:41 ourguru devourguru dev 2311 silver badge55 bronze badges 1

• You can use toastr library for showing this kind of messages. codeseven.github.io/toastr/demo.html – Thangadurai Commented Oct 27, 2016 at 6:47

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

add:

setTimeout(function(){
    $('#error').hide()
}, 3000) // time in millisecond for as long as you like

ref: http://www.w3schools./jsref/met_win_settimeout.asp

This is not possible with alert but you can create your own alert using div For Example :

function tempAlert(msg,duration)
{
 var el = document.createElement("div");
 el.setAttribute("style","position:absolute;top:40%;left:20%;background-color:white;");
 el.innerHTML = msg;
 setTimeout(function(){
  el.parentNode.removeChild(el);
 },duration);
 document.body.appendChild(el);
}

Now use this custom alert like this

tempAlert("Your message",1000);

the number in the above method describes the total time for which the alert will be shown

I hope this will solve your peoblem

Cheers

You can use setTimeout function for condition . Change your JS Code to this

  <script src="http://ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js"></script>

  <script>
   function Submit(e){
      e.preventDefault();

      var name       = $("#name").val();
      var place      = $("#place").val();

        if($("#name").val() == "" ){
            $("#name").focus();
            $("#error").html("Enter the Name.");
            return false;
         }
         else if($("#place").val() == "" ){
            $("#place").focus();
            $("#error").html("Enter the Place.");
            return false;
           }

            else if($(name != '' && place != '' )){
            $("#error").html("Form submitted successfully.")
            $("#form")[0].reset();

            //this will hide message after 3 seconds
            setTimeout(function(){
            $("#error").hide();
            },3000)

          // Returns successful data to php.
           $.post(" ", {name: name, place: place}, 
           function(data) 
            {
                    $("#form").append(data); 
                });
            }
         }
       </script>

本文标签： javascriptMessage disappear after some timeStack Overflow