How to disable or enable input field using JQuery

If you want to disable any input field like button or checkbox or textbox etc, you can do it using JQuery.

Consider you have the following input fields in your page

<input type="text" id="tb1" />
<input type="button" id="btn1" />
<input type="checkbox" id="chkbx1" />
<input type="radio" id="radio1" />

Now if you don't want to allow a user to enter text into textbox(in cases when you are showing pre-loaded data) or if you don't want to allow a user to click on the submit/send button until all the form fields are valid, then in the above cases you can disable those input fileds using jQuery's prop() method.

jQuery code to disable the input fields:

Disable textbox using jQuery

$("#tb1").prop('disabled', true);  //for jQuery 1.6+
$("#tb1").attr('disabled', 'disabled'); //for jQuery 1.5 and below

Re-enable textbox using jQuery

$("#tb1").prop('disabled', false); //for jQuery 1.6+
$("#tb1").removeAttr('disabled'); //for jQuery 1.5 and below

Disable button using jQuery

$("#btn1").prop('disabled', true);  //for jQuery 1.6+
$("#btn1").attr('disabled', 'disabled'); //for jQuery 1.5 and below

Re-enable button using jQuery

$("#btn1").prop('disabled', false); //for jQuery 1.6+
$("#btn1").removeAttr('disabled'); //for jQuery 1.5 and below

You can also disable radio button or checkbox using jQuery in the same way.

In this way you can disable the input fields using jQuery. Let me no if it helped you through comments section. Feel free to share any information.

For more posts on jQuery please visit: jQuery

Read more...

Get Asp.Net TextBox or Label value using JavaScript

If you have a Asp.Net TextBox or Label then you can get the value of that textbox/label using javascript.

Get TextBox value:

Lets say you have a asp.net textbox like below

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

then you can get the value of the above textbox using javascript using the below code

var name = document.getElementById("<%=txtName.ClientID %>").value;

Get Label value :

Lets say you have a asp.net label like below

<asp:Label ID="lblName" runat="server" Text="codeSolver"/>

then you can get the value of the above label using javascript using the below code

var name = document.getElementById("<%=lblName.ClientID %>").innerHTML;

Note: If you notice the selector in the above code, we are using "ClientID" to get the value of the control. This is because Asp.Net controls are rendered as html controls in the browser. The "id" will be not same as what you have given to that control.

So if you simply write getElementById("txtName") it won't work. We use that syntax to get the value of a HTML input(type="text") element.

In this way we can get the Asp.Net TextBox or Label values using javascript.

For more posts on Javascript visit: javascript

Read more...

How to Set/Get the textbox value using JQuery/Javascript

If you have a textbox, then you can get the value of the textbox or you can set the value of the textbox using JQuery.

Example:

Lets say you have a textbox like below

First Name:<input type="text" id="txtFirstName" />

JQuery code to get textbox value

var value=$('#txtFirstName').val();

Javascript code to get textbox value

var Firstname = document.getElementById('txtFirstName').value;

JQuery code to set textbox value

$('#txtFirstName').val("your name");

Javascript code to to set textbox value

document.getElementById('txtFirstName').value = "your name";

In this way you can set/get textbox value using jquery/javascript.

For more posts on Javascript/JQuery visit: jquery

Read more...