Set selected option by text of dropdownlist


In this post we will see how to set selected option by text to dropdownlist. In web application we need to set dropdownlist value at client side. By using option property of dropdown list we will check if dropdown contains text that we want to set And after that using selected attribute we will set it true so that it will show the option selected that we have set using text.
set selected option in dropdownlist using jquery

Sample to set selected option by text to dropdownlist[jQuery]


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <title>Set dropdownlist selected option by text</title>
    <script type="text/javascript">
      $(document).ready(function () {
        $("#go").click(function () {
         var inputText = $("#inputText").val();
          $("#numbers option:contains(" + inputText + ")").attr('selected', 'selected'); 
        });
      });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <label>Enter value between 1-3</label>
      <input type="text" id="inputText"/>
    <asp:DropDownList ID="numbers" runat="server">
    <asp:ListItem Text="1" Value="1"></asp:ListItem>
    <asp:ListItem Text="2" Value="2"></asp:ListItem>
    <asp:ListItem Text="3" Value="3"></asp:ListItem>
    </asp:DropDownList>
    </div>
    <input type="button" id="go" value="Go" />
    </form>
</body>
</html>


Summary:By using $("#numbers option:contains(" + inputText + ")").attr('selected', 'selected'); we have dynamically set the selected option of a drop-down list using JQuery.We can set selected option of dropdown list by it's value likeset selected option of dropdown box by value

Set value to textarea - jQuery

In this post we will see how to set value to textarea in jQuery. To assign value to textarea in jquery we can use .val() method of textarea. In example we will take value from input testbox and assign it to textarea.

set value to textarea in jquery

Example to set value to textarea [jQuery]

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/i18n/jquery-ui-i18n.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
    <title>Set textarea value in jQuery</title>
    <script type="text/javascript">
      $(document).ready(function () {
        $("#submitbtn").click(function () {
          var inputVal = $("#inputText").val();
          $("#txtMessage").val(inputVal);
        });
      });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <label>Type Text here</label>
        <input type="text" id="inputText" /><br/>
        <textarea cols="50" rows="5" id="txtMessage"></textarea><br/>
        <input type="button" id="submitbtn" value="Submit" />
    </div>
    </form>
</body>
</html>

Regex for email validation JavaScript

In this post we will see how to validate email format in Javascript using regular expression. We can use regular expression (/^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$/i) to validate the email address in javascript.

Regular expression to validate email format in JavaScript

Example of email validation using regex in javascript

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Regex to validate email format in JavaScript</title>
  <script language="javascript" type="text/javascript">
    function Validate() {
      var emailRegex = new RegExp(/^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$/i);
      var emailAddress = document.getElementById("<%= txtemail.ClientID %>").value;
      var valid = emailRegex.test(emailAddress);
      if (!valid) {
        alert("Invalid e-mail address");
        return false;
      } else
        return true;
    }
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <asp:TextBox runat="server" ID="txtemail"></asp:TextBox>
    <asp:Button runat="server" ID="Send" OnClientClick="return Validate();" Text="Send" />
  </div>
  </form>
</body>
</html>

Validate email format - RegularExpressionValidator

In asp.net in order to validate email address format we can use RegularExpressionValidator. We will see how to use RegularExpressionValidator to validate the email address format.For that we need to specify the Regular expression or regex in ValidationExpression property of the RegularExpressionValidator. Also we need to specify few other properties like ErrorMessage to display error message when email address is invalid. also we need to specify ControlToValidate property where we have to give textbox controls name in which user enters email address.

Validate email address using regular expression validator

Example to validate email address using RegularExpressionValidator

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Validate email format </title>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <asp:TextBox ID="txtEmail" runat="server" />
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
    <asp:RegularExpressionValidator ID="validateEmail" runat="server" ErrorMessage="Invalid email."
      ControlToValidate="txtEmail" ValidationExpression="^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$" />
  </div>
  </form>
</body>


Also we need to check !Page.IsValid in event hadler of control like button or link...etc like
  protected void btnSubmit_Click(object sender, EventArgs e)
    {
      if (!Page.IsValid)
        return;
    }

Remove special characters - jQuery

In this post we will see how to remove special characters like !,@,$,*,^ ...etc. from the string. For that we need to specify the special characters in regular expressions. Then by passing specified regular expression to .replace method in jquery and replace it with '' blank.

remove special characters from string in jquery

Example to remove special characters from string - jquery

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <title>Remove special character fromstring</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Send").click(function () {
                var originalstring = $("#txtinput").val();
                var filteredString = originalstring.toLowerCase().replace( /[\*\^\'\!\@\$]/g , '');
                alert(filteredString);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:TextBox runat="server" ID="txtinput"></asp:TextBox>
    <asp:Button runat="server" ID="Send" Text="Send" />
    </div>
    </form>
</body>
</html>


We can use regular expressions to define the special character set that we need to remove from string. so if you want to remove * from the string the regular expression will be /[\*]/g. Now if you want to remove ! also the add ! to regular expression like /[\*\!]/g and so on.

c# regex for email address

In c# while dealing with email we need to validate email address. In order to validate email address we just check whether the email address format is correct or not. In C# we can use System.Text.RegularExpressions namesapce to match the email address for validation. In Regular Expressions namespace we have Regex class and from which .Match() method can be used to match the email address with the regular express defined using Regex class.

c# regex for email address

C# code to validate email format.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>C# validate email format regex</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox runat="server" ID="txtemail"></asp:TextBox>
        <asp:Button runat="server" ID="Send" OnClick="Send_Click" Text="Send" />
    </div>
    </form>
</body>
</html>

using System;
using System.Text.RegularExpressions;
public partial class Csharpregularexpressionemail : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        protected void Send_Click(object sender, EventArgs e)
        {
            ValidateEmail();
        }
        private void ValidateEmail()
        {
            string email = txtemail.Text;
            Regex regex = new Regex(@"^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$");
            Match match = regex.Match(email);
            if (match.Success)
                Response.Write(email + " is corrct");
            else
                Response.Write(email + " is incorrct");
        }
    }


In above example we have specified format for email regex using constructure call of Regex class. Then we have used .Match method to match the regular express pattern for email to match. And after that we have checked if match is successfull or not.

.parent() - Get the parent of element jQuery

Get the parent of element
In web applications while working with clientside we may need to get parent element of elected element. jQuery provides function .parent() that we can use to easily get parent of the element.

Here we will see example where we have link inside div and on clicking on link we will get it's parent div.

Code to get parent of element [jQuery]

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <title>Get parent of element</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#submitbtn").click(function () {
                var parent = $(this).parent();
                alert(parent.text());
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="border:1px blue solid; background-color:seashell; width:200px; height:100px;">
       This is parent
       <br/>
       <input type="button" id="submitbtn" value="Click Me"/>
    </div>
    </form>
</body>
</html>

Remove css style dynamically in jquery

remove css style dynamically in jquery
Here we will see how to remove css style of the element in jquery. In web applications we need to remove css style dynamically to give user friendly ui effects and for that we can use .removeClass() function in jquery. Here we will see example of div in which when user clicks on link it will change color of div by applying css style dynamically.

Example to remove css style dynamically

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <title>Remove css style dynamically</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#clickme").click(function () {
                $("#dynamic-style").removeClass("myStyle");
            });
        });
    </script>
    <style type="text/css">
        .myStyle
        {
            width: 500px;
            height: 300px;
            background-color: wheat;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <a href="#" id="clickme">Change</a>
    <div id="dynamic-style" class="myStyle">
        Click change to change color.
    </div>
    </form>
</body>
</html>

Add css style dynamically in jquery

add css style dynamically injquery

In this post we will see how to add css style to element in jquery. In web applications we need to add css style dynamically to give user friendly ui effects and for that we can use .addClass() function in jquery. Here we will see example of div in which when user clicks on link it will change color of div by applying css style dynamically.

Example to add css style dynamically

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <title>Add css style dynamically</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#clickme").click(function () {
                $("#dynamic-style").addClass("newStyle");
            });
        });
    </script>
    <style type="text/css">
        .newStyle
        {
            width: 500px;
            height: 300px;
            background-color: wheat;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <a href="#" id="clickme">Change</a>
    <div id="dynamic-style">
        Click change to change color.
    </div>
    </form>
</body>
</html>

Get html control value in code behind without runat = server

access html control value in codebehind without runat server
In asp.net application we need to access value of html control in code behind without runat="server". For that purpose we can use name property of control. And Request.Form we can get value to code behind.So if we have html text input and you want to pass value of html input to code behind set it name property like <input name="username" />  and access it using Rquest.Form["usename"] you will get value to code behind of control without runat="server".

Code to get html control value to code behind without runat server

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
  <script type="text/javascript">
      function SubmitForm() {
         var theform;
          if (window.navigator.appName.toUpperCase().indexOf("NETSCAPE") > -1) {
              theform = document.forms["form1"];
          }
          else {
              theform = document.forms.form1;
          }
          theform.__EVENTTARGET = "btn";   
          theform.__EVENTARGUMENT = "";
          theform.submit();
      }    
</script>  
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="text" id="username" name="username" />
        <input type="button" id="btn" onclick="SubmitForm()"  value="GO"/>
    </div>
    </form>
</body>
</html>


Code behind to access html control value


using System;

namespace aspnetcontrol
{
    public partial class Getvaluewithoutrunatservercontrol : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string value = Request.Form["username"];
            Response.Write(value);
        }
    }
}