Reload/refresh web page after specific interval of time using jQuery

 Hi guys, in this post we will see how to reload web page after specific interval of time using jQuery.

Let's see it practically.  In our web application, we may have requirement of reloading web page after some interval of time.

Please follow below steps:-

1)Open your editor or any editor.

2)Add <html>,<head>,<script> and <body> tag.

3) Add jQuery CDN link in head section for jQuery reference file.

4) Add following jquery code in script section:-

    <script type="text/javascript">

    $(document).ready(function(){

setInterval(function()

      { 

     location.reload(); 

      }, 3000);

});

</script>

In above code, we have added document ready function. In document ready function we have used setInterval() method which calls function after some specific interval of time. In our case 3000 millisecond means 3 second. Using this code ,function code will be executed after each 3 seconds and page will be refreshed. We are using  location.reload(); to refresh web page.

Full Code:-

<html>

<head>

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

<script type="text/javascript">

$(document).ready(function(){

setInterval(function()

  { 

     location.reload(); 

  }, 3000);

});

</script>

</head>

<body></body>

</html>

Check textbox is empty in jQuery | jQuery empty textbox validation

In this tutorial, we will see how we can do jQuery empty textbox validation or how to check textbox is empty in jQuery. 

In this example, we are going to add one textbox control and one button control. When textbox is empty and validate button is clicked,then application will show validation message.

 Please follow below steps:-

1)Open notepad or any editor of your choice.

2)Add html, head, script and body tag.

            <html>

            <head>

                <script></script>

            </head>

        <body>

        </body>

        </html>

3)Add jQuery CDN link in head section.

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

4) Add textbox control and button control in body tag as below:

   Name:<input type="text" Id="txtName"/> <input type="button" value="Validate" Id="btnValidate">

5)Add jQuery code in script tag in head section.

<script type="text/javascript">

$(document).ready(function(){ $('#btnValidate').click(function(){ if($('#txtName').val().trim().length==0) alert('Please enter your name.'); }); }); </script>

Full Code :-

<html>

<head>

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

<script type="text/javascript">

$(document).ready(function(){

$('#btnValidate').click(function(){ 

if($('#txtName').val().trim().length==0) 

  alert('Please enter your name.');

});

});

</script>

</head>

<body>

    Name:<input type="text" Id="txtName"/>

<input type="button" value="Validate" Id="btnValidate">

</body>

</html>

Screenshots:-

Output:-

Enable and disable button control using jquery

 In this tutorial, we will see how to enable and disable button control using jquery.

Please follow below steps:-

1)Open notepad or any editor

2) Add three buttons. 

1)btnSave:-Button to enable or disable

2)btnEnable:-Button to enable btnSave

3)btnDisable:-Button to disable btnSave

 So, add html code as below and save code with name Demo.html.

3)Add CDN link in head section.

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

4)Add script tag in head section to write jquery code.

5) Add following jquery code to enable and disable button.

       

            Output in browser will look like :-

  Full Code for this demo:-

<html><head>

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

<script type="text/javascript"> 

$(document).ready(function(){

$('#btnEnable').click(function(){

$('#btnSave').removeAttr("disabled");

});

$('#btnDisable').click(function(){

$('#btnSave').attr("disabled","disabled");

});

});

</script></head>

<body>

    <input type="button" value="Save" id="btnSave">

    <input type="button" value="Enable Button" id="btnEnable">

    <input type="button" value="Disable Button" id="btnDisable">

</body>

</html>