How to compare two different date format in JQuery

 

<!DOCTYPE html>

<html>

  <head>

    <script src="js/jquery-3.6.0.js"></script>

    <script>

      $(document).ready(function () {

        var x =  new Date();

        var Date_y = "13-02-2024";

        split_y = Date_y.split('-');

        var y = new Date(split_y[2]+'-'+split_y[1]+'-'+split_y[0]);  

        if(new Date(x) <= new Date(y))

        {

            alert('y');

        }

        else{

            alert('x');

        }

      });

    </script>

  </head>

  <body></body>

</html>

 Github Link: https://github.com/adi501/JQuery-Examples

How to Get Selected Radio Button Value in jQuery

<!DOCTYPE html>

<html>

  <head>

    <script src="js/jquery-3.6.0.js"></script>

  </head>

  <body>

    <input type="radio" name="StuName" class="clsStu" value="adi" /> Adi

    <input type="radio" name="StuName" class="clsStu" value="pavan" /> Pavan

    <input type="radio" name="StuName" class="clsStu" value="madhan" /> Madhan

    <input type="radio" name="StuName" class="clsStu" value="nani" /> Nani

    <input type="radio" name="StuName" class="clsStu" value="balu" /> Balu

    <button>Get Value</button>

    <script type="text/javascript">

      $("button").click(function () {

        var val = $(".clsStu:checked").val();

        alert(val);

      });

    </script>

  </body>

</html>

Github Link: https://github.com/adi501/JQuery-Examples 

Iterate Array of Objects using Jquery each function

<!DOCTYPE html>

<html>

  <head>

    <script src="js/jquery-3.6.0.js"></script>

    <script>

      $(document).ready(function () {

        var obj= [

          { FName: "Adi" , LName:"JC"},

          { FName: "Pavan" , LName:"JC"},

          { FName: "Madhan" , LName:"JC"},

          { FName: "Yagnesh" , LName:"JC"}

        ]

   $.each(obj, function (index, value) {

          console.log(value.FName+" "+value.LName);

   });

      });

    </script>

  </head>

  <body></body>

</html>

 

Github Link: https://github.com/adi501/JQuery-Examples

Iterate array elements using Jquery each function

 

<!DOCTYPE html>

<html>

  <head>

    <script src="js/jquery-3.6.0.js"></script>

    <script>

      $(document).ready(function () {

        var arrNumber = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

        $.each(arrNumber, function (index, value) {

          console.log(index + " : " + value);

        });

      });

    </script>

  </head>

  <body></body>

</html>

Github Link: https://github.com/adi501/JQuery-Examples

Allow numeric values with decimal in Jquery

 

<!DOCTYPE html>

<html>

  <head>

    <script src="js/jquery-3.6.0.js"></script>

  </head>

  <body>

    <table>

      <tr>

        <td><strong>Decimal :</strong></td>

        <td>

          <input type="text" name="numeric" class="allow_decimal" />

          <div>Allow numeric values with decimal</div>

        </td>

      </tr>

    </table>

    <script>

      $(document).ready(function () {

        $(".allow_decimal").on("input", function (evt) {

          var self = $(this);

          self.val(self.val().replace(/[^0-9\.]/g, ""));

          if (

            (evt.which != 46 || self.val().indexOf(".") != -1) &&

            (evt.which < 48 || evt.which > 57)

          ) {

            evt.preventDefault();

          }

        });

      });

    </script>

  </body>

</html>

Github Link: https://github.com/adi501/JQuery-Examples

Allow only numbers in Textbox in Jquery

 

<!DOCTYPE html>

<html>

  <head>

    <script src="js/jquery-3.6.0.js"></script>

  </head>

  <body>

    <table>

      <tr>

        <td><strong>Int value:</strong></td>

        <td>

          <input type="text" name="numeric" class="allow_numeric" />

          <div>It will Allow only numeric values</div>

        </td>

      </tr>

    </table>

    <script>

      $(document).ready(function () {

        $(".allow_numeric").on("input", function (evt) {

          var self = $(this);

          self.val(self.val().replace(/\D/g, ""));

          if (evt.which < 48 || evt.which > 57) {

            evt.preventDefault();

          }

        });

      });

    </script>

  </body>

</html>

Github Link: https://github.com/adi501/JQuery-Examples

How to Remove Value from Array using Jquery

<!DOCTYPE html>

<html>

  <head>

    <script src="js/jquery-3.6.0.js"></script>

    <script>

      $(document).ready(function () {

        var arrNumber = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12];

        var removeValue = 2;

        arrNumber = $.grep(arrNumber, function (n) {

          return n != removeValue;

        });

        alert(arrNumber);

      });

    </script>

  </head>

  <body></body>

</html>

 

Github Link: https://github.com/adi501/JQuery-Examples

How to Check if Value Exists In Array or Not using Jquery

<!DOCTYPE html>

<html>

  <head>

    <script src="js/jquery-3.6.0.js"></script>

    <script>

      $(document).ready(function () {

        var arrStu = ["adi", "pavan", "madhan", "yagnesh"];

        if ($.inArray("adi", arrStu) >= 0) {

         alert("Value exists");

        } else {

            alert("Value Not exists");

        }

      });

    </script>

  </head>

  <body></body>

</html>

Github Link: https://github.com/adi501/JQuery-Examples

JSON format data responce from webmethod to jquery AJAX and display in asp.net controls

 

Step 1: Create asp.net Project

Step 2: Create "jsonFile.json" file and add below code

{

  "status": "success",

  "status_code": 200,

  "product_name": "oneplus nord",

  "product_details": {

    "amount": 20000,

    "manufacturing_year": 2020,

    "manufacturing_month": "Jun",

    "color": "Blue"

  }

}

Step 3:  create "WebForm1.aspx" page and add below code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="JSON_Responce_from_Webmethod_To_Jquery_AJAX.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="Jquery/jquery-3.6.0.js"></script>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <asp:Button ID="btnGetDetails" runat="server" Text="Get Details" />

            <table>

                <tr>

                    <td>Product Name:</td>

                    <td>

                        <asp:DropDownList ID="ddlProductName" runat="server">

                            <asp:ListItem Text="Select" Value="Select"></asp:ListItem>

                            <asp:ListItem Text="oneplus nord" Value="oneplus nord"></asp:ListItem>

                            <asp:ListItem Text="Vivo" Value="Vivo"></asp:ListItem>

                            <asp:ListItem Text="Moto" Value="Moto"></asp:ListItem>

                        </asp:DropDownList>

                    </td>

                </tr>

                <tr>

                    <td>Amount:</td>

                    <td>

                        <input id="txtAmount" runat="server" type="text" />

                    </td>

                </tr>

                <tr>

                    <td>Manufacturing Year:</td>

                    <td>

                        <asp:TextBox ID="txtManufacturing_year" runat="server"></asp:TextBox>

                    </td>

                </tr>

                <tr>

                    <td>Manufacturing Month:</td>

                    <td>

                        <asp:TextBox ID="txtManufacturing_month" runat="server"></asp:TextBox>

                    </td>

                </tr>

                <tr>

                    <td>Color:</td>

                    <td>

                        <asp:TextBox ID="txtColor" runat="server"></asp:TextBox>

                    </td>

                </tr>

            </table>

            <script type="text/javascript">

                $('#btnGetDetails').click(function (e) {

                    e.preventDefault();

                    //alert($("#DropDownList1 option:selected").text());

                    //var postData = {

                    //    'selectedData': $("#DropDownList1 option:selected").text()

                    //};

                    $.ajax({

                        type: "POST",

                        url: "/WebForm1.aspx/getProductDetails",

                        // data: JSON.stringify(postData),

                        contentType: "application/json; charset=utf-8",

                        dataType: "json",

                        success: function (r) {

                            $("#ddlProductName").val(r.d.product_name);

                            $('#txtAmount').val(r.d.product_details.amount);

                            $('#txtManufacturing_year').val(r.d.product_details.manufacturing_year);

                            $('#txtManufacturing_month').val(r.d.product_details.manufacturing_month);

                            $('#txtColor').val(r.d.product_details.color);

                            console.log(r.d.product_details);

                        }

                    });

                });

            </script>

        </div>

    </form>

</body>

</html>

Step 4: go to "WebForm1.aspx.cs" and update code.

using Newtonsoft.Json;

using System;

using System.IO;

using System.Web.Hosting;

using System.Web.Services;

namespace JSON_Responce_from_Webmethod_To_Jquery_AJAX

{

    public partial class WebForm1 : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            // JsonResponce();

        }

        [WebMethod]

        public static ProductRoot getProductDetails()

        {

            string jsonString = File.ReadAllText(HostingEnvironment.MapPath("~/jsonFile.json"));

            var content = jsonString;

            var jsonResult = JsonConvert.DeserializeObject(content).ToString();

            var result = JsonConvert.DeserializeObject<ProductRoot>(jsonResult);

            return result;

        }

    }

    public class ProductDetails

    {

        public int amount;

        public int manufacturing_year;

        public string manufacturing_month;

        public string color;

    }

    public class ProductRoot

    {

        public string status;

        public int  status_code;

        public string product_name;

        public ProductDetails product_details;

    }

}

Step 5: Now go and run the application it will display like below.

Step 6: Then click on "Get Details" button. it will hi the web method then it will read .json file and it will send response to jQuery. there we are assigning data to page controls.  as below image.

Github Link: https://github.com/adi501/JSON-Response-from-Webmethod-To-Jquery-AJAX

How to call web method in asp.net using jquery

 ASP.Net Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="How_to_call_web_method_in_asp_net_using_jquery.aspx.cs" Inherits="WebApplication1.How_to_call_web_method_in_asp_net_using_jquery" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="Jquery/jquery-3.6.0.js"></script>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <asp:DropDownList ID="DropDownList1" CssClass="DropDownList1" runat="server">

                <asp:ListItem Text="Select" Value="0"></asp:ListItem>

                <asp:ListItem Text="asp.net" Value="1"></asp:ListItem>

                <asp:ListItem Text="c#" Value="2"></asp:ListItem>

                <asp:ListItem Text="ado.net" Value="3"></asp:ListItem>

                <asp:ListItem Text="SQL Server" Value="4"></asp:ListItem>

            </asp:DropDownList>

            <script type="text/javascript">

                $('#DropDownList1').change(function () {

                    alert($("#DropDownList1 option:selected").text());

                    var postData = {

                        'selectedData': $("#DropDownList1 option:selected").text()

                    };

                    $.ajax({

                        type: "POST",

                        url: "/How_to_call_web_method_in_asp_net_using_jquery.aspx/GetDropDownSelectedData",

                        data: JSON.stringify(postData),

                        contentType: "application/json; charset=utf-8",

                        dataType: "json",

                        success: function (r) {

                            alert(r.d);

                        }

                    });

                });

            </script>

        </div>

    </form>

</body>

</html>

C# Code:

using System;

using System.Web.Services;

namespace WebApplication1

{

    public partial class How_to_call_web_method_in_asp_net_using_jquery : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

        }

        [WebMethod]

        public static string GetDropDownSelectedData(string selectedData)

        {

            //you can write you code here

            return selectedData;

        }

    }

}

Github Line: https://github.com/adi501/Asp-net-Examples

DropDownList change event using jQuery class selector in ASP.net

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DropDownList_change_event_using_jQuery_class_selector_in_ASP_net.aspx.cs" Inherits="WebApplication1.DropDownList_change_event_using_jQuery_class_selector_in_ASP_net" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="Jquery/jquery-3.6.0.js"></script>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <div>

            <asp:DropDownList ID="DropDownList1" CssClass="DropDownListcss" runat="server">

                <asp:ListItem Text="Select" Value="0"></asp:ListItem>

                <asp:ListItem Text="asp.net" Value="1"></asp:ListItem>

                <asp:ListItem Text="c#" Value="2"></asp:ListItem>

                <asp:ListItem Text="ado.net" Value="3"></asp:ListItem>

                <asp:ListItem Text="SQL Server" Value="4"></asp:ListItem>

            </asp:DropDownList>

            <script type="text/javascript">

                $('.DropDownListcss').change(function () {

                    alert("DropDownList change() event.");

                    alert($(".DropDownListcss option:selected").text());

                    alert($(".DropDownListcss option:selected").val());

                });

            </script>

        </div>

        </div>

    </form>

</body>

</html>

Github Line: https://github.com/adi501/Asp-net-Examples

DropDownList change event using jQuery in ASP.net

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DropDownList_Change_Event_Using_JQuery_in_ASP_net.aspx.cs" Inherits="WebApplication1.DropDownList_Change_Event_Using_JQuery_in_ASP_net" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="Jquery/jquery-3.6.0.js"></script>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <asp:DropDownList ID="DropDownList1" CssClass="DropDownList1" runat="server">

                <asp:ListItem Text="Select" Value="0"></asp:ListItem>

                <asp:ListItem Text="asp.net" Value="1"></asp:ListItem>

                <asp:ListItem Text="c#" Value="2"></asp:ListItem>

                <asp:ListItem Text="ado.net" Value="3"></asp:ListItem>

                <asp:ListItem Text="SQL Server" Value="4"></asp:ListItem>

            </asp:DropDownList>

            <script type="text/javascript">

                $('#DropDownList1').change(function () {

                    alert("DropDownList change() event.");

                    alert($("#DropDownList1 option:selected").text());

                    alert($("#DropDownList1 option:selected").val());

                });

            </script>

        </div>

    </form>

</body>

</html>

Github Line: https://github.com/adi501/Asp-net-Examples

Template string in javascript

const name = "world";

const message = `Hello ${name}`;

console.log(message);

Output:

Hello world           

Github link : https://github.com/adi501/JavaScriptExamples.git

How to clear div content in jquery

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").empty();
    });
});
</script>
</head>
<body>

<div id="div1">
  Smoe text
</div>

<br>
<br>
<button>Remove</button>

</body>
</html>

sending data from jquery to webservice | calling web service from jquery on ajax/json post in asp.net

hi in this post i will show how to call a webservice from jquery using ajax/Json post in asp.net :


1. add in web.config

    <authorization>
      <allow users="*"/>
    </authorization>
    

2. add a webservice file and in codebehind of it add method to be called on ajax-json post request:

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService()]

public class WebService : System.Web.Services.WebService {

    public WebService () {
       
    }

    [WebMethod]
    public string HelloWorld(string message, string Type)
    {
        return "Hello World";
    }
    
}


3.   Jquery code to be used on the html page to call a webservice on ajax/json post request :


   var Tag = '{message: "' + name.val().toString() + '", Type: "' + 'A' + '"}';

                            $.ajax({ type: "POST", url: "WebService.asmx/HelloWorld", cache: false, contentType: "application/json; charset=utf-8", data: Tag, dataType: "json",
                                success: function (msg) {
                                   
                                    alert('Successful');

                                },

                                error: function (response) {

                                    alert(response);

                                }

                            });