CODEWITHSUNDEEP
javascriptjqueryejs
Digvijay
Digvijay

Reputation: 3279

Unable to hide message after sometime in JQuery

I am using ajax to post data on nodejs server I am getting response from nodejs and I am able to show them on front end but problem is they are still be there even if form submitted. I want to hide those messages after sometime.I have tried but unable to achieve desired result.

Below is my code:

register.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/register.js"></script>

<title><%= title %></title>

<style>
  
    h1 {
     text-align: center;
     margin-top:50px; 
     }
     
     .form{
       margin-top:50px;
       margin-left:30%;
       margin-right:30%;
     }

     input{
       margin-top:10px;
     }
     
     button{
        margin-top:20px;
     }

      #result{  
         text-align: center;
      }
     .alert{
        margin-top:15px;
        text-align: center;
        display:none;
     }

</style>

</head>
<body class="container">

<h1><%= title %></h1>

<div class="form">

    <form>

    <input id="name" name="nam" class="form-control" type="text" placeholder="Name" aria-label="default input example">
    <input id="mail" name="mail" class="form-control" type="text" placeholder="Email" aria-label="default input example">
    <button type="submit" class="btn btn-primary">SUBMIT</button> 

    <div class="alert alert-danger" role="alert">
    </div>
    
    </form>

 </div>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> 

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

 
</body>

register.js

    $(document).ready(function(){

        $('.btn').click(function(e){
            e.preventDefault();
            ajaxPost();    //Function to post data
        });
     });

     function ajaxPost(){

        var formData = {

            name: $("#name").val(),
            email: $("#mail").val()
        } 

        $.ajax({

            type : "POST",
            contentType : "application/json",
            url : "http://localhost:3000/register",
            data : JSON.stringify(formData),
            dataType : 'json',
            success:function(data){
                 $(".alert").html(data.msg).show();
              }
       });
   }

Someone let me know what I am doing wrong.

Upvotes: 0

Views: 653

Answers (2)

Pavan J
Pavan J

Reputation: 353

I couldn't understand what message to hide you are talking about. Assuming you want to hide the alert div, You may use setTimeOut with a delay.

Your code would be:

$.ajax({

            type : "POST",
            contentType : "application/json",
            url : "http://localhost:3000/register",
            data : JSON.stringify(formData),
            dataType : 'json',
            success:function(data){
                 $(".alert").html(data.msg).show();
                 
                 // Hide after 1 second
                 setTimeout(function(){ $(".alert").hide(); }, 1000);
              }
       });

Upvotes: 0

julien.giband
julien.giband

Reputation: 2619

Call $(".alert").hide() in a setTimeout, but don't forget to clear the timeout when a new message is shown in .alert

let messageTo;
function showMessage(mess) {
  if (messageTo) {
    clearTimeout(messageTo);
    messageTo = undefined;
  }
  $(".alert").html(mess).show();
  messageTo = setTimeout(() => $(".alert").hide(), 5000);
}

Upvotes: 2

Related Questions