メッセージがしばらくしてから消えます

Question

プロジェクトの1つでは、私は1つのHTMLフォームを準備しており、コードは正常に動作しています。私が必要とするのは、エラーメッセージまたは成功メッセージが数秒後に消えることです。コードを修正してもらうことができます。コードは以下の通りです。

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コード

.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コード

<script src="http://ajax.googleapis.com/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> 

Answer 1

あなたが条件のためにsetTimeout関数を使用することができます。この

<script src="http://ajax.googleapis.com/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> 

Answer 2

追加するには、あなたのJSコードを変更します。

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

REF：http://www.w3schools.com/jsref/met_win_settimeout.asp

Answer 3

これは警告では不可能ですが、あなたは、例えばDIV を使用して、独自のアラートを作成できます。

を

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); 
} 

このカスタムアラートは次のように使用します

tempAlert("Your message",1000); 

上記の方法では数は、私はあなたが表示するためtoastrライブラリを使用することができます

乾杯