Asp.Net JavaScript and jQuery Examples

This asp.net tutorial, we will discuss various Asp.net JavaScript and jQuery examples. We will discuss below examples:

  • Disable right-click on images or page in Asp.Net using jQuery
  • How to open hyperlink in new tab using jQuery or JavaScript?
  • Show/hide div using jQuery in asp.net
  • JavaScript Body onload function in content page in asp.net
  • How to get body height using jQuery in Asp.Net?
  • JavaScript textbox validation example in Asp.Net
  • Show confirmation dialog box using JavaScript in Asp.Net
  • Call JavaScript function from code behind file in Asp.Net
  • How to disable right click by using jQuery in asp.net?
  • How to validate user input to accept only 10 character using Regular expressions in Javascript
  • How to validate user input for a mobile number using Regular Expression in Javascript
  • Date validation using JavaScript in Asp.Net
  • JavaScript runtime error: Automation server can’t create object
  • Get only alphabet characters from string in asp.net
  • Readonly textbox value lost on postback asp.net
  • Close browser in button click in Asp.Net
  • create drop-down menu for login and signup using jQuery in asp.net
  • Populate dropdown using jQuery from an array
  • Bind and retrieve value from dropdown list from array using jQuery

Learn few more asp.net tutorials:

Disable right-click on images or page in Asp.Net using jQuery

This asp.net tutorial, we will discuss how to disable right click on images or disable right click on pages in Asp.Net using jQuery.

Below is the code to disable right click on images using jQuery in asp.net.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
     $(function () {
            $('img').on("contextmenu", function () {
                return false;
            });
        });
</script>

Below is the code to disable right click on page using jQuery:

<script type="text/javascript">
     $(function () {
            $(this).on("contextmenu", function () {
                return false;
            });
        });
</script>

How to open hyperlink in new tab using jQuery or JavaScript?

Now, we will discuss how to open hyperlinks in a new tab using jQuery and JavaScript.

Follow below steps to open hyperlink in new tab using jquery:

Add .js file to page as like below:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

Write the script like below:

<script type="text/javascript">
$('.divclassname a').live('mouseover', function () {
$(this).attr('target', '_blank');
});
</script>

Follow below steps to open hyperlink in new tab using JavaScript:

<script type="text/javascript">
$(function () {
$("a").attr("target", "_blank");
});
</script>

Remember we have to write the above code inside <head> </head> tag in our .aspx page

Show/hide div using jQuery in asp.net

Now, we will discuss how to show/hide a div using jQuery in our asp.net application.

First we have to give reference to the jQuery library like below:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

Then we need to write the function. Below is the full .aspx code.

.aspx code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowHideDiv.aspx.cs" Inherits="ShowHideDiv" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<title>Show hide div using jQuery</title>
<script type="text/javascript">
$(document).ready(function (){
$(".mydiv").hide();
$(".show_hide").show();
$('.show_hide').click(function () {
$(".mydiv").slideToggle();
});
});
</script>
</head>
<body>
<form id="form1″ runat="server">
<div><a href="#" class="show_hide">Show/hide</a>
<div class="mydiv">This div will behave like show or hide !!!</div>
</div>
</form>
</body>
</html>

JavaScript Body onload function in content page in asp.net

Now, we will see how to use body onload function in content pages in asp.net.

There are two approaches we can write body onload function in content pages.

1st approach:

<script type="text/javascript">
        document.body.onload = function () {alert(‘I am OK’); }
</script>

2nd Approach:

Modify the body tag by adding runat = “server” attribute like below:

<body id="body" runat="server">

Then in the content page in Page_Load write like below:

protected void Page_Load(object sender, EventArgs e)
    {
        HtmlGenericControl body = (HtmlGenericControl)Master.FindControl("body");
        body.Attributes.Add("onLoad", "alert(‘I am also OK’);");
}

How to get body height using jQuery in Asp.Net?

Now, we will see how to get the body height using jQuery in asp.net.

We can get the body height by using the $(document).height() or by using the $(window).height() method.

Below is the full code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default13.aspx.cs" Inherits="Default13″ %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1″ runat="server">
<title>get body height using jQuery in Asp.Net</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var pageheight = $(document).height() + "px";
alert(pageheight);
var windowheight = $(window).height() + "px";
alert(windowheight);
});
</script>
</head>
<body>
<form id="form1″ runat="server">
<div>
</div>
</form>
</body>
</html>

JavaScript textbox validation example in Asp.Net

Now, we will check a simple textbox required field validation in Asp.Net using JavaScript.

Here in this exapmle when ever a user clicks on the submit button without entering anything in the textbox, one alert message will be shown as “Enter Name”.

We have written the JavaScript function and calling that function in the OnClientClick property of the button.

Below is the full code for JavaScript textbox validation in Asp.Net

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JavaScriptValidation.aspx.cs" Inherits="JavaScriptValidation" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Simple JavaScript validation example</title>
<script language="javascript" type="text/javascript">
function validateName() {
if (document.getElementById("txtName").value == "") {
document.getElementById("txtName").focus();
alert(‘Enter Name’);
return false;
}
}
</script>
</head>
<body>
<form id="form1″ runat="server">
<div>
Enter Name:<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<br />
<asp:Button ID="btnTest" runat="server" Text="Click to Validate" OnClick="btnTest_Click" OnClientClick="return validateName();" />
</div>
</form>
</body>
</html>

The output will be like as shown in the figure below:

JavaScript textbox validation example in Asp.Net

Show confirmation dialog box using JavaScript in Asp.Net

Now, we will check how to show confirmation message on button click using JavaScript in Asp.Net.

We can show confirmation message on button click by using JavaScript.

First, we will write the JavaScript function like below inside the </head> tag and then we will put the button inside the form tag. So our code will be like below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function deleteConfirmation() {
            if (confirm("Are you sure you want to delete this record?") == true)
                return true;
            else
                return false;
        }
    </script>
</head>
<body>
    <form id="form1″ runat="server">
        <div>
            <asp:Button ID="btnDelete" runat="server" Text="Delete" OnClick="btnDelete_Click" />
        </div>
    </form>
</body>
</html>

Then we can register the JavaScript to the button in the Page_Load like below:

btnDelete.Attributes.Add("onclick", "return deleteConfirmation();");

So the full code will be like below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Default10 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        btnDelete.Attributes.Add("onclick", "return deleteConfirmation();");
    }
    protected void btnDelete_Click(object sender, EventArgs e)
    {
    }
}

When the user clicks on the button the confirmation message will come like below:

Show confirmation dialogbox using JavaScript in asp.net

When a user clicks on OK then the server-side OnClick (btnDelete_Click) will execute. If the user clicks on Cancel, then the server-side OnClick will not execute.

Call JavaScript function from code behind file in Asp.Net

Now, let us understand how to call a JavaScript function from a code-behind file in Asp.Net.

In this example, we will call a JavaScript method from a button click in asp.net.

.Aspx Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default18.aspx.cs" Inherits="Default18" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Call JavaScript method from code behind file</title>
<script type="text/javascript">
function JavaScritFromCodeBehind() {
alert(‘Welcome to JavaScript Call from Code Behind file’);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnClick" runat="server" Text="Click to call JavaScript Function" OnClick="btnClick_Click" />
</div>
</form>
</body>
</html>

.cs Code:

protected void btnClick_Click(object sender, EventArgs e)
{
Page.ClientScript.RegisterStartupScript(this.GetType(),
“Welcome", “JavaScritFromCodeBehind();", true);
}

or if you are using AJAX in Asp.Net, then you can try like this:

ScriptManager.RegisterStartupScript(this, this.GetType(), “CallMyFunction", “JavaScriptFunctioName();", true);

Now when you run the code and click on the button, the dialog box will appear.

How to disable right click by using jQuery in asp.net?

In this post we will discuss how we can disable right click in .aspx page in Asp.Net. We will use jQuery for this.

Follow below steps to disable right click:

Here we will first give reference to jQuery library like below:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

Below is the jQuery function that will disable right click on a page:

<script type="text/javascript" language="javascript">
$(function () {
$(this).bind(“contextmenu", function () {
return false
});
});
</script>

Remember in .aspx page we have to write the above code inside the <head> </head> tag in asp.net page.

How to validate user input to accept only 10 character using Regular expressions in Javascript

The below Html code explains the validation for a name which accepts only lower case and upper case alphabets (10 characters) using Regular Expressions in asp.net

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script language="ecmascript" type="text/ecmascript">
function validateEmpName() {
var name = document.getElementById(" <%=empName.ClientID%>").value;
// Reg Exp to accept only A-Z and a-z
var p1 = /^([A-z])+$/;
var x1 = name.match(p1);
if (x1 == null) {
document.getElementById("empName").style.color = "red";
alert("Employee name is not in the corrrect format");
document.getElementById("<%=empName.ClientID%>").focus;
return false;
}
return true;
}
</script>

</head><body>
<form id="form1″ runat="server">
<div>
Enter Employee Name:
<asp:TextBox ID="empName" runat="server" Width="132px"></asp:TextBox>
<asp:Button ID="Button1″ runat="server" Text="Check Name" OnClientClick = "return validateEmpName();" />
</div>
</form>
</body>
</html>

This is how we can validate user input to accept only 10 characters using Regular expressions in JavaScript.

How to validate user input for a mobile number using Regular Expression in Javascript

The below Html code explains the client-side validation for a mobile number using Regular Expressions in JavaScript.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>validate user input for mobile number using Regular Expression in Javascript</title>
<script language="ecmascript" type="text/ecmascript">
function validateMobileNo() {
var p1 = /^([0-9]{10})$/;
var mobile_no = form1.Text1.value;
var x1 = mobile_no.match(p1);
if (x1 == null) {
alert(“Invalid User Input");
return false;
}
return true;
}
</script>
</head><body>
<form id="form1" runat="server">
<div>
Enter Mobile Number:
<input id="Text1" name="txt1" type="text" /><br />
<br />
<asp:Button ID="Button2" OnClientClick ="return validateMobileNo();" Text="MobileNoCheck" runat="server" />
</div>
</form>
</body>
</html>

This is how we can validate user input for mobile number using Regular Expression in Javascript in asp.net.

Date validation using JavaScript in Asp.Net

Now we will see how to do a date validation using javascript in asp.net.

Here is a date validation through JavaScript that will give an alert message if you try to give a date less than today. It will always take the future date.

Below is the full HTML code:

<head runat="server">
 <script language="javascript" type="text/javascript">
     function validateDate() {
         var expDate = document.getElementById(‘txtDate’).value;
         var date = expDate.substring(0, 2);
         var month = expDate.substring(3, 5);
         var year = expDate.substring(6, 10);
         var myDate = new Date(year, month – 1, date);
         var today = new Date();
         if (myDate > today) {
         }
         else {
             alert(‘Please enter a date greater than today !’);
             return false;
         }
     }
    </script>
    <title>JavaScript date validation</title>
</head>
<body>
    <form id="form1″ runat="server">
    <div>
        <asp:TextBox ID="txtDate" runat="server"></asp:TextBox><br />
        <asp:Button ID="btnValidate" runat="server" Text="Click to Validate" OnClientClick="return validateDate();" />
    </div>
    </form>
</body>

Check the figure below for more information:

Date validation using JavaScript in Asp.Net

JavaScript runtime error: Automation server can’t create object

Now, we will see how to fix error “JavaScript runtime error: Automation server can’t create object” which comes when we try to use ActiveXObject with JavaScript in Asp.Net.

Recently I got this error while trying to use ActiveXObject through JavaScript.

I was trying to call like below:

<script type="text/jscript">
function GetDongleDetails() {
var x = new ActiveXObject('AxControls.HelloWorld');
var count = x.GetText();
};
</script>

And I was getting the error in the below line:

var x = new ActiveXObject('AxControls.HelloWorld');

I remembered I have reset my IE setting one day back.

We need to enable some security options in IE settings.

Go to Tools -> Internet Options -> Then select Security tab and then Click on Custom Level button.

Here we need to enable the below options:

  • Run ActiveX controls and plug-ins
  • Initialize and script ActiveX controls not marked as safe for scripting.

After this, the error should not come.

Get only alphabet characters from string in asp.net

Now, we will see how to get only alphabet characters from a string in asp.net using Regular Expressions.

To retrieve alphabet characters from the string we can use a RegularExpressions.

Below is the full code:

First, we have the using statement like below:

using System.Text.RegularExpressions;

.aspx code:

 Input String: <asp:Label ID="lblInput" runat="server" Text="qa1rb0h)g(2d#edgtkhrint98@#09&&*_—+=!~123Avcf"></asp:Label><br />
        <asp:Button ID="btnGetAlphabets" runat="server" Text="Get Alphabets" OnClick="btnGetAlphabets_Click" /><br />
        <asp:Label ID="lblResult" runat="server" Text=""></asp:Label>

.cs code:

 protected void btnGetAlphabets_Click(object sender, EventArgs e)
    {
        Regex reg = new Regex(@"[^a-zA-Z]");
        string result = reg.Replace(lblInput.Text, "");
        lblResult.Text ="Result:  "+ result;
    }

The result will come like below:

Get only alphabet characters from string in asp.net

Readonly textbox value lost on postback asp.net

Now, we will discuss how to retain values in the read-only textbox on postback if it lost in Asp.net.

In my scenario, I was setting some value to some textboxes using JavaScript on page load. And the textboxes are read-only text boxes.

I was setting the value like below:

<script type="text/jscript">
document.getElementById('ContentPlaceHolder1_txtHello').value = 'Hello World'
</script>
<asp:TextBox ID="txtHello" runat="server" ReadOnly="true"></asp:TextBox>
<asp:Button ID="btnGetValue" runat="server" Text="Cancel" OnClick="btnGetValue_Click" />

And on the button click event, I want to retrieve the textbox value.

In the page load the value is set properly but when I tried to get the value in the button click it was giving me “”. And If I remove the ReadOnly attribute then I am able to get the value.

There are two approaches to retain the value for read-only text boxes.

1st Approach:

Instead of putting ReadOnly=” true” Put ContentEditable=”false”, this will work same as ReadOnly that is used will not able to modify the value. Now in the button click, you will able to get the value.

2nd Approach:

Add the attribute in the Page_Load like below:

protected void Page_Load(object sender, EventArgs e)
{
     txtHello.Attributes.Add("readonly", "readonly");
}

After this line, you will able to get the read-only textbox value in postback.

Close browser in button click in Asp.Net

Now, we will see how to close the browser in button click in Asp.Net.

There are two approaches we can close the browser in button click. In both the approaches it will ask for a confirmation message.

Approach-1:
In the Page_Load write the code like below:

protected void Page_Load(object sender, EventArgs e)
    {
        btnCloseBrowser.Attributes.Add("onclick", "self.close()");
    }

Here btnCloseBrowser is the button ID.

Approach-2:

You can also write the below code in the button click event like below:

protected void btnCloseBrowser_Click(object sender, EventArgs e)
    {
        Response.Write ("<script>self.close() ;</script>");
    }

In both the case it will ask for a confirmation message like below:

Close browser in button click in Asp.Net

Once you click on OK, it will close the browser.

create drop down menu for login and signup using jQuery in asp.net

Here in this article, we will discuss how to create a drop-down menu for login and signup using jQuery.

Let’s see an example to see the menu in working.

In the <Head> tag of the design page(.aspx) add the jQuery reference and function.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script type="text/javascript">
$(document).ready(function(){
$('#login-trigger').click(function () {
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');

if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
else $(this).find('span').html('&#x25BC;')
})
});
</script>

In the <form> tag of the design page(.aspx) design the page as:

<div>
<nav>
<ul>
<li id="login">
<a id="login-trigger" href="#">
Log in <span>?</span>
</a>
<div id="login-content">

<fieldset id="inputs">
<asp:TextBox ID="txtUserName" runat="server" placeholder="Your email address" type="email" required></asp:TextBox>
<asp:TextBox ID="txtPwd" runat="server" TextMode="Password" placeholder="Password" required></asp:TextBox>
</fieldset>
<fieldset id="actions">
<asp:Button ID="btnLogin" runat="server" Text="Login" CssClass="submit"
onclick="btnLogin_Click"></asp:Button>
<asp:CheckBox ID="chkRemember" runat="server" Checked="true"></asp:CheckBox>Remember me
</fieldset>
<a href="#" style="float:right;">Forgot password?</a>
</div>
</li>
<li id="signup">
<a href="#">Sign up</a>
</li>
</ul>
</nav>
</div>

You can also add some style sheets to this application.

Uncaught TypeError: $(…).datepicker is not a function

Recently while working with jQuery I got the below error which says: Uncaught TypeError: $(…).datepicker is not a function

Below is the code which I was using.

$("#Checkindate").datepicker({
beforeShow: function (el) {
// set the current value before showing the widget
$(this).data('previous', $(el).val());
},

Solution:

If there is another library that is using the $ variable, you can do this:

var $j = jQuery.noConflict();

$("#Checkindate").datepicker({
beforeShow: function (el) {
// set the current value before showing the widget
$(this).data('previous', $(el).val());
},

Populate dropdown using jQuery from array

In this jQuery tutorial, we will discuss how to populate dropdown using jQuery from array. We will see how to populate dropdown using jquery.

Here I have an array which has 3 elements like below:

var allwebsites = new Array ("TSInfo Technologies.com","EnjoySharePoint.com","SharePointSky.com");

We will try to bind a drop-down list from this array using jQuery on a button click.

Below is the full code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="Bind Web Sites" id="btnBind" />
<select id="ddlWebSites"></select>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#btnBind").click(function () {
BindWebSites();
});
});

function BindWebSites(){
var allwebsites = new Array ("TSInfo Technologies.com","EnjoySharePoint.com","SharePointSky.com");

for (i = 0; i < allwebsites.length; i++) {
$(‘#ddlWebSites’).append(‘<option>’ + allwebsites[i] + ‘</option>’)
}
}
</script>

Here I have called a method knwon as BindWebSites() on the button click using jQuery. Once the user clicks on the button, it will populate dropdown from an array in jQuery. You can see the result like below:

Populate dropdown using jQuery from array

In this jQuery tutorial, we discussed how to populate dropdown using jquery from an array.

Bind and retrieve value from dropdown list from array using jQuery

Now, we will discuss how to bind dropdown list from an array using jQuery. And then we will discuss how we can retrieve form fileds values using jQuery. Here we can retrieve values from HTML textbox, radio button and dropdown list using jQuery.

So first we will create the HTML form and place the HTML controls like dropdown list, textbox, radio button and a submit button.

HTML Input Form:

Here we have taken one text box, three radio buttons, one dropdown list, and a submit button. Here we have not added an option to the drop-down list, because we will bind the dropdown list at run time from an array.

Below is an HTML code to create the form as per the above requirement.

<!DOCTYPE HTML>
<HTML>
<head>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Bihusdevelopment2/development3.js"></script>
</head>
<body id="body">
<table>
<tr>
<td colspan="3″>
</td>
<td>Name</td>
<td><input type="text" id="txtName"></td>
</tr>
<tr>
<td colspan="3″></td>
<td>Gender</td>
<td>
<input type="radio" name="gender" id="male" value="Male" > Male<br>
<input type="radio" name="gender" id="female" value="Female"> Female<br>
<input type="radio" name="gender" id="other" value="Other"> Other
</td>
</tr>
<tr>
<td colspan="3″></td>
<td>Country</td>
<td>
<select id="ddlcountry">
<option></option>
</select>
</td>
<td>
<input type="button" value="submit" id="btnClick">
</td>
</tr>
</table>
</body>
</html>

Bind Dropdownlist from an array using jQuery:

To bind the dropdownlist we have created method like below:

function BindCountry()
{
var countryArray = new Array("INDIA", "PAKISTAN", "SRILANKA", "AUSTRALIA");
for (i = 0; i < countryArray.length; i++) {
$("#ddlcountry").append('<option>' + countryArray[i] + '</option>')
}
}

And we are calling this method on the $(document).ready() method. So the full code will be like below:

$(document).ready(function()
{
BindCountry();

});

function BindCountry()
{
var countryArray = new Array("INDIA", "PAKISTAN", "SRILANKA", "AUSTRALIA");
for (i = 0; i < countryArray.length; i++) {
$("#ddlcountry").append('<option>' + countryArray[i] + '</option>')
}
}

Retrieve values from input controls using jQuery

Now we will see how we can retrieve the values from the input control in the button click.

By using jQuery we can attach the button click event and on the button click event, we will call a function to retrieve the control values.

$(document).ready(function()
{
$("#btnClick").click(function(){
RetrieveFormControlValues();
});
});

function BindCountry()
{
var countryArray = new Array("INDIA", "PAKISTAN", "SRILANKA", "AUSTRALIA");
for (i = 0; i < countryArray.length; i++) {
$("#ddlcountry").append('<option>' + countryArray[i] + '</option>')
}
}

function RetrieveFormControlValues()
{
var txtValue= $("#txtName").val(); // This way we can retrieve values from a html textbox using jQuery
alert(txtValue);
var radioValue = $("input[name='gender']:checked").val(); // This way we can retrieve radio button value using jQuery
alert(radioValue);
var dropdownValue=$('#ddlcountry :selected').text(); // This way we can retrieve dropdown list value using jQuery
alert(dropdownValue);
}

This is how, we can bind dropdown list from array using jQuery and retrieve form control values using jQuery?

You may like following jQuery tutorials:

This asp.net tutorial, we learned various Asp.net JavaScript and jQuery examples.

  • Disable right-click on images or page in Asp.Net using jQuery
  • How to open hyperlink in new tab using jQuery or JavaScript?
  • Show/hide div using jQuery in asp.net
  • JavaScript Body onload function in content page in asp.net
  • How to get body height using jQuery in Asp.Net?
  • JavaScript textbox validation example in Asp.Net
  • Show confirmation dialog box using JavaScript in Asp.Net
  • Call JavaScript function from code behind file in Asp.Net
  • How to disable right click by using jQuery in asp.net?
  • How to validate user input to accept only 10 character using Regular expressions in Javascript
  • How to validate user input for a mobile number using Regular Expression in Javascript
  • Date validation using JavaScript in Asp.Net
  • JavaScript runtime error: Automation server can’t create object
  • Get only alphabet characters from string in asp.net
  • Readonly textbox value lost on postback asp.net
  • Close browser in button click in Asp.Net
  • create drop down menu for login and signup using jQuery in asp.net
  • Populate dropdown using jQuery from array
  • Bind and retrieve value from dropdown list from array using jQuery
Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SPGuides.com

>