How to fire the client side onclick() event of asp radio button?

In this tutorial you will learn how to fire the client side onclick() event of asp radio button. Using same technique you can fire the onclick() event of asp textbox, asp button, etc too. It is not a big deal. Let's have a look over how to do so.

How to fire the client side onclick() event of asp radio button?

The method to do this is very simple, you just have to write the

onclick="yourjavascriptfunction();"

and that’s it.

One thing remember that the intelliSense of visual studio will not show you the onClick() event in the list of available events for asp radio button when you will press the spacebar but you have to write this yourself in order to execute your javascript code using client side onclick() event of asp radio button because when your aspx page is rendered then asp radio button will become input radio button.

Now let's have a look over the complete example of the topic that we are discussing.

Home.aspx

<script language="javascript" type="text/javascript">
function ShowAlert()
{

alert("client side onClick event of asp radio button has been fired");

}
</script>
<table cellpadding="0" cellspacing="2" border="0" width="100%">
<tr>
<td width="28%">First Name:</td><td><asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Last Name:</td><td><asp:TextBox ID="txtLastName" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Do you want to join us?</td><td><asp:RadioButton ID="rdoYes" runat="server" GroupName="Group1"
Text="Yes" onclick="ShowAlert();"/> <asp:RadioButton ID="rdoNo" runat="server" GroupName="Group1" Text="No"  onclick="ShowAlert();"/></td>
</tr>
</table>

So that's it. I hope you will find this tutorial very informative.

Read more...

Format the Phone Number in asp.net using c#

In this tutorial you will learn how to format the phone number entered in a textbox. Phone number can be entered in a textbox as 1234567890 but you can format it as (123)456-789 and this is our topic.

Let's have a look how to do so.

Format the Phone Number in asp.net using c#

Let's suppose we have an asp:textbox in our .aspx page in which user will enter the phone number. The id of asp:textbox is txtPhoneNumber.

public string PhoneNoFormation()
{
string formatedPhoneNo;
if (!string.IsNullOrEmpty(txtPhoneNumber.Text.ToString()) && txtPhoneNumber.Text.Length == 10)
{
string Phone1 = "(" + txtPhoneNumber. Text.Substring(0, 3) + ")";
string Phone2 = " " + txtPhoneNumber. Text.Substring(3, 3);
string Phone3 = "-" + txtPhoneNumber. Text.Substring(6, 4);
formatedPhoneNo = Phone1 + Phone2 + Phone3;
}

else
{
formatedPhoneNo = txtPhoneNumber.Text;
}

return formatedPhoneNo;
}

Now your phone number is in formatted form and you can save it in database if you want to do so.

So that's it. I hope you will find this tutorial very informative.

I love your feedback.

Read more...

How to add javascript file and css stylesheet dynamically to the header of the page in asp.net using c#?

In this tutorial you will learn how to add the javascript files and css stylesheets dynamically to the header of asp.net page inheriting masterpage using c#. Let's Suppose you have added a new module in your website inside a new folder, the folder name is NewModule. This module has its own css stylesheet and javascript files that will be attached to the more than 100 aspx webpages in it.

Now we have to add the javascript file and stylesheet to all these webpages of NewModule Dynamically. It’s not better approach to add these javascript file and css stylesheet to the masterpage and when these webpages of NewModule will be rendered then these javascript files and stylesheet will be automatically attached to the webpages located inside the NewModule folder. The reason why this approach is not good because the javascript file and stylesheet will be automatically attached to all those webpages other than NewModule folder that inherits from masterpage.

So let’s have a look example below that will cover the scenario that i discuss above.

How to add javascript file and css stylesheet dynamically to the header of the page in asp.net using c#?

Yourmasterpage.master.cs

protected override void OnPreRender(EventArgs e)
{
if (Request.RawUrl.ToLower().Contains("/newmodule /"))
{
LinkCss(); //It will Add CSS to Header
LinkJs(); //It will Add javascript to header
}
base.OnPreRender(e);
}
protected void LinkJs()
{
HtmlHead head = (HtmlHead)Page.Header;
HtmlGenericControl js = new HtmlGenericControl("script");
js.Attributes.Add("type", "text/javascript");
js.Attributes.Add("language", "javascript");
js.Attributes.Add("src", Page.ResolveUrl("~/js/yourjsfile.js"));
head.Controls.Add(js);
}
protected void LinkCss()
{
HtmlHead head = (HtmlHead)Page.Header;
HtmlLink css = new HtmlLink();
css.Attributes.Add("href", Page.ResolveUrl("~/styles/yourstylesheet.css"));
css.Attributes.Add("type","text/css");
css.Attributes.Add("rel","stylesheet");
head.Controls.Add(css);
}

Now let’s understand the code.

First of all in OnPreRender(EventArgs e) event of masterpage, I am checking whether the url in the address bar contains the NewModule flder name(the folder containing all the new developed webpages in which I want to add the javascript and stylesheet dynamically) using Request.RawUrl, if it contains the NewModule folder name then the LinkCss() and LinkJs() functions will get call and javascript file and css stylesheet will be attached to the aspx webpages dynamically. You can call LinkJs() and LinkCss functions in the page_load() function of your masterpage too.

So that's it. I hope you will find this tutorial very informative.

I love your feedback.

Read more...

How to Specify Multiple Actions from Single Form Using Javascript?

In this programming tutorial we will learn how to specify multiple actions from single form using javascript. As we all know that there is always one submit button available in one form, so if you want to submit your form to multiple Web Pages then you have to use input buttons instead of submit button and javascript code for this purpose.

How to Specify Multiple Actions from Single Form Using Javascript?

Lets have a look over the example given below.
yourpage.php

<html>
<head>
<title>Specify Multiple Actions From Single Form</title>
<script language="javascript" type="text/javascript">
function FuncButton1()
{
document.form1.action = "Page1.php" //Sets the action attribute of the form
document.form1.submit(); // Submit the page
return true;
}

function FuncButton2()
{
document.form1.action = "Page2.php" //Sets the action attribute of the form
document.form1.submit(); // Submit the page
return true;
}

</script>
</head>

<body>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<form name="form1" method="post">
<tr>
<td>First Name</td><td><input type="text" id="txt_Firstname" name="txt_Firstname"/></td>
</tr>
<tr>
<td>Last Name</td><td><input type="text" id="txt_Lastname" name="txt_Lastname"/></td>
</tr>
<tr>
<td>Email</td><td><input type="text" id="txt_Email" name="txt_Email"/></td>
</tr>
<tr>
<td>Username</td><td><input type="text" id="txt_Username" name="txt_Username"/></td>
</tr>
<tr>
<td><input type="button" value="Button1" onClick="return FuncButton1();" /></td><td><input type="button" value="Button2" onClick="return FuncButton2();"/></td>
</tr>
</form>
</tr>
</table>
</body>
</html>

Now lets understand.

First of all I have created a simple html form with two noticeable things. First noticeable thing is that there is no submit (type="submit") button in the form and secondly I have not set any action attribute of the form.

To post the data to two different web pages I have created two input buttons and using onClick event of these buttons I am setting the "action" of the form dynamically and then submit the form. So whenever user clicks the Button1 then the Page1.php will be called and whenever user clicks the Button2 then the Page2.php will be called.

So that's it. I love your feedback

Read more...