Attach Event to all the TextBoxes in a WebPage

All TextBoxes except Email type allow only numbers

All TextBoxes except Email type allow only numbers


Update on 25 April 2014

Blog continues…

Inspired from a Question, I am blogging about a simple technique to attach KeyPress Event to all the TextBoxes of a WebPage.

And what is the Technique?

  • Loop through all the Controls in the WebPage
  • Find which are TextBoxes
  • For those Boxes, attach KeyPress Event

We will do it using JavaScript.

Can you elaborate each step?

Why not !!! Let’s explore.

Loop through all the Controls in the WebPage

var allInputs = new Array();

// store collection of all <input/> elements
allInputs = document.getElementsByTagName('input');

So, allInputs array would contain all the input elements on the WebPage.

Find which are TextBoxes

for (i = 0; i < allInputs.length; i++) {
    // loop through and find <input type="text"/>
    if (allInputs[i].type == 'text') {
        // This is a TextBox. Here we can attach any Event.
    }
}

Here we are looping through all the inputs and checking if its type is text. If satisfied, it is a TextBox.
In that if clause, we can attach any Event we need. We will attach the KeyPress Event in the next Step.

For those Boxes, attach KeyPress Event

We will attach KeyPress Event as an example. For that, we will use jQuery KeyPress.

for (i = 0; i < allInputs.length; i++) {
    // loop through and find <input type="text"/>
    if (allInputs[i].type == 'text') {
        // This is a TextBox. Here we can attach any Event.
        // Let's attach KeyPress Event to the TextBox.
        $(allInputs[i]).keypress(function (event) {
            if (!isNumber(event)) {
                event.preventDefault();
            }
        });
    }
}

Here, we attached the KeyPress Event and inside that Event, we are calling one function isNumber(event). If the pressed key is not a number, it would ignore as event.preventDefault() comes into action, else it will allow.

Note:

The function isNumber(event) just checks, if the pressed key is a numeric key or not. Refer the Demo link given below to see the code for this function.

See this in action

Demo – Here.

Update, Improvements and Quicker jQuery Approach

Thanks to Kshirodra Meher and Subhajit Datta for the valuable suggestions.

What they suggested?

In our first step, we looped through all the TextBoxes present in the Page, which can be optimized with a simpler jQuery block coded below.

$("input[type=text]").bind("keypress", function (e) {
    if (!isNumber(e)) {
        return false;
    }
});

So, the main game changer here is the Selector $("input[type=text]"). It selects all the inputs of type text. To know more click – Attribute Equals Selector [name=”value”].
We have also restricted the paste event on the TextBoxes because it was allowing all characters into the box.

$("input[type=text]").bind("paste", function (e) {
    return false;
});

New Demo

HERE.

Share your thoughts !!!

If you like the Blog, share among your friends. Feel free to comment, if you have any doubts or queries.

Bind DropDownList from DataTable using AJAX WebMethod

DropDownList Bound from Ajax WebMethod

DropDownList Bound from Ajax WebMethod


We will see one Example to bind one DropDownList using jQuery Ajax and C# WebMethod.

How?

Easy !!!

  • Add a WebMethod to Code Behind page
  • Call to that WebMethod from aspx Page
  • Bind the DropDownList when call succeeds

Let’s see the code

WebMethod

Here we are just creating a Dummy DataTable and converting it to XML.

/// <summary>
/// This WebMethod returns the XML for a DropDownList having value and text.
/// </summary>
/// <param name="tableName">string: Name of the Table having DropDownList items.</param>
/// <returns>string: XML containing all the items.</returns>
[System.Web.Services.WebMethod]
public static string GetDropDownItems(string tableName)
{
    // Create a dummy DataTable.
    DataTable dt = new DataTable(tableName);
    dt.Columns.Add("OptionValue");
    dt.Columns.Add("OptionText");
    dt.Rows.Add("0", "Item 0");
    dt.Rows.Add("1", "Item 1");
    dt.Rows.Add("2", "Item 2");
    dt.Rows.Add("3", "Item 3");
    dt.Rows.Add("4", "Item 4");

    // Convert the DataTable to XML.
    string result;
    using (StringWriter sw = new StringWriter())
    {
        dt.WriteXml(sw);
        result = sw.ToString();
    }

    return result;
}

JavaScript GetDropDownData function

The following function would do a jQuery Ajax call for the WebMethod and bind the Data to the DropDownList.

function GetDropDownData() {
	// Get the DropDownList.
	var ddlTestDropDownListXML = $('#ddlTestDropDownListXML');
	
	// Provide Some Table name to pass to the WebMethod as a paramter.
	var tableName = "someTableName";

	$.ajax({
		type: "POST",
		url: "BindDropDownList.aspx/GetDropDownItems",
		data: '{tableName: "' + tableName + '"}',
		contentType: "application/json; charset=utf-8",
		dataType: "json",
		success: function (response) {
			// Now find the Table from response and loop through each item (row).
			$(response.d).find(tableName).each(function () {
				// Get the OptionValue and OptionText Column values.
				var OptionValue = $(this).find('OptionValue').text();
				var OptionText = $(this).find('OptionText').text();
				
				// Create an Option for DropDownList.
				var option = $("<option>" + OptionText + "</option>");
				option.attr("value", OptionValue);

				ddlTestDropDownListXML.append(option);
			});
		},
		failure: function (response) {
			alert(response.d);
		}
	});
}

Important: We are passing one parameter tableName to the WebMethod, which will be the Dummy Table Name and after conversion to XML, it becomes parent of each Row. Refer the following Screenshot of returned XML Schema as seen inside Firebug Console.

XML returned from WebMethod

XML returned from WebMethod

We can see that someTableName is one one node containing the OptionText and OptionValue of a particular Item. These are actually Rows of the Dummy DataTable before conversion to XML.

Your Inputs !

Will be highly appreciated. Please feel free to comment. If you like the Blog, share this among your friends and colleagues.

Microsoft ASP.NET MVP Award 2014

Microsoft MVP 2014 Mail

Microsoft MVP 2014

[Update on 4th April]
My best birthday Gift on 4th April by my CEO Mr. Chinmoy Panda. He narrates my story in his own words. Celebrating Awesomeness

Be awesome. Be Tadit.

[Blog Continues]
Thank God, I was not fooled on April 1. 🙂

I am really happy to announce that I have been awarded as one of the “Most Valuable Professionals” in ASP.NET/IIS category. This is the very first time I am getting awarded by Microsoft for my Technical Community Activities.

What is Microsoft MVP?

Answer : Click here to know more.

The Microsoft Most Valuable Professional (MVP) Award is our way of saying thank you to exceptional, independent community leaders who share their passion, technical expertise, and real-world knowledge of Microsoft products with others. It is part of Microsoft’s commitment to supporting and enriching technical communities. Even before the rises of the Internet and social media, people have come together to willingly offer their ideas and best practices in technical communities.

My Journey So far…

My journey started on 11 July 2011, when I joined Mindfire Solutions. I was passionate for .NET Technologies during my Engineering days and fortunately I got a place in .NET Team after the training sessions.

I made many friends and some are indeed very special to me. They always encourage me for Community Activities and eventually I come to know about Code Project Community. Code Project is an awesome place to write Articles, Tips and Question Answer Activities. So, I went on answering the Questions first, then I gradually tried my hand on Articles and Tips. I got a very good response and votes from the viewers. The CodeProjectians always boost me for my work. I also started writing Blogs. Whenever I get time, I always look at the groups on Facebook and try to answer their queries. Twitter helped me to promote my writings all over the world. Tweeting good Programming resources is something I do regularly. My Reputation Manager had enough faith on me to give me the Moderation work for Dynamics CRM Team Blog.

The Teams I have worked for in my company have taught me many useful tricks to tackle problems on the fly. My previous .NET team was amazing, disciplined and always believe in fun filled workplace. My current Dynamics CRM Team has a bunch of Geeks, who are hard working and always deliver work on time. These champs taught me how to have patience in everything I do.

Then a special moment came !!! 1st January 2014, I got awarded as a Code Project MVP, which strengthened my chances for Microsoft MVP Award. My happiness knew no bounds. Then I worked harder than before.

Finally, on the April Fool’s Day (6:57 PM IST), I got the mail from Biplab that I have been awarded. I was speechless !!!

Most common question now: How do you manage your time !!!

I am just crazy !!!

It makes you excited for the next question, when somebody appreciates the solution, which you have just answered. Try sometime, you will feel better for sure. Read below to know how mad I am.

  • Sleepless nights (not always, if I had replies on my answers or if somebody is waiting for my reply).
  • Working on weekends.
  • Answering questions while sitting at back seat of my friend’s bike.
  • Immensely waiting for the network on my iPad to come at my native place, so that I can just answer one question.
  • Publish the code while working at office and in between the publish operation, answer one question.

There are many other situations, which can’t be described here !!! 🙂

I would like to dedicate this to my…

Grand Father (Ganeswar Tripathy). His love and blessings always take me step by step towards success. All is for you, I miss you. 😦 😦

I would like to thank…

:: Biplab Paul (Community Program Manager, MVP Award Program – South Asia)- for his constant support and encouragement.
:: Siddharth Rout (Microsoft MVP) – This guys listened to all my stupid queries and answered them with patience. He is still busy doing the same for me.
:: Chris Maunder (Co-Founder, CodeProject) – for rebuilding the amazing forum time to time.
:: My CEO Mr. Chinmoy Panda, who is my idol and source of inspiration for me.
:: All Code Project MVPs and Staff.
:: Everybody who appreciated my Articles, Tips, Answers and Blogs.
:: My parents, family, friends, colleagues and relatives.
:: All my Managers, Tech Leads and Reputation Manager – These guys always appreciate my recognitions, which acts as a spur to contribute more.

What’s Next?

As simple as that !!! Continue what I am doing and learn from my senior MVPs and my MVP lead. Involve myself in online/offline events. Add some more skills to my skill set.

Journey will continue… Bless me and wish me luck.
Thanks for reading, God bless you all !!!

Want to know more about me?

See my Brand New Microsoft MVP Profile here | Click here to know more About Me | Click here to Contact Me

Last, but not the least…

Get your Autograph Books ready. 🙂