59 Comments

How to Create Dynamic Dependent select box using ajax

You need a dynamic dependent select box. We will explain how to create a dynamic dependent select box in PHP, jquery and ajax. index.php <?php include_once 'dbconfig.php'; ?> <html> <head> <title>Dynamic Dependent Select Box using Ajax</title> <script type="text/javascript" src="jquery-1.4.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#loding1").hide(); $("#loding2").hide(); $(".country").change(function() { $("#loding1").show(); var id=$(this).val(); var dataString = 'id='+ id; […]

Read Full Article

1 Comment

How to use Hide and Show Function using jQuery

in this article, you will learn How to use Hide and Show Function using jQuery. Using hide or show function you can hide or show any content in HTML document. Example:- <html> <head> <title>Hide Show Function</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); }); </script> </head> <body> <p>If click on the "Hide" button, it […]

Read Full Article

No Comments

How to Create Callback Function in jQuery

In this article, you will learn How to Create Callback Function in jQuery. Example:- <html> <head> <title>Callback Function in jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide("slow", function(){ alert("The paragraph is now hidden"); }); }); }); </script> </head> <body> <button>Click to Hide</button> <p>Welcome to Hub of Tutorials.</p> </body> </html> Read on Facebook

Read Full Article

No Comments

How to Create Get Content and Attributes in jQuery

In this article, you will learn How to Create Get Content and Attributes in jQuery. Get Content text() html() val() Example:- <html> <head> <title>Get Content</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); }); </script> </head> <body> <p id="test">In this paragraph having some<b>bolded</b> text.</p> <button id="btn1">Show Text</button> […]

Read Full Article

No Comments

How to Add New HTML Content using jQuery

In this article, you will learn How to Add New HTML Content using jQuery. Four jQuery Methods for add new content. append() prepend() after() before() jQuery append() method <html> <head> <title>jQuery append() Method</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").append(" <b>Appended text</b>."); }); $("#btn2").click(function(){ $("ol").append("<li>Appended item</li>"); }); }); </script> </head> <body> <p>paragraph.</p> <p>another paragraph.</p> <ol> <li>item 1</li> <li>item 2</li> <li>item […]

Read Full Article

No Comments

How to Create Remove Element or Content using jQuery

In this article, You will Learn How to Create Remove Element or Content using jQuery jQuery remove() Method Example:- <html> <head> <title>jQuery remove()</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").remove(); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:red;color:#ffffff"> <p>Welcome to Hub of Tutorials</p> <p>jQuery remove Method.</p> </div> <br> <button>Remove div element</button> </body> </html> jQuery empty() […]

Read Full Article

No Comments

How to Create Filters using jQuery

In this article, you will learn How to Create Filters using jQuery. Example:- Method of Filter Tables <html> <head> <title>Filter Table<title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script> <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td,th { […]

Read Full Article

No Comments

How to Create AJAX Loading Method using JQuery

In this article, you will learn How to Create AJAX Loading Method using JQuery. Example:- <html> <head> <title>AJAX Load Method in JQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").load("test.txt", function(responseTxt, statusTxt, xhr){ if(statusTxt == "success") alert("External content loaded successfully!"); if(statusTxt == "error") alert("Error: " + xhr.status + ": " + xhr.statusText); }); }); }); </script> </head> <body> […]

Read Full Article

No Comments

How to Create AJAX get() and post() Method in jQuery

In this article, you will learn How to Create AJAX get() and post() Method. jQuery AJAX gets and post method is an important role in the HTTP server request. jQuery Get() Method <html> <head> <title>jQuery get() Method</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $.get("get.php", function(data, status){ alert("Data: " + data + "\nStatus: " + status); }); }); […]

Read Full Article

No Comments

How to Create Chaining in jQuery

In this article, you will learn How to Create Chaining in jQuery. Example:- <html> <head> <title>jQuery Chaining</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#p1").css("color", "red") .slideUp(2000) .slideDown(2000); }); }); </script> </head> <body> <p id="p1">Welcome ti Hub of Tutorials!!</p> <button>Click here</button> </body> </html> Read on Facebook

Read Full Article