How to check Entered Value in TextBox is Number or not in JavaScript


Sometimes we stuck in a situation like we have to take only integer number from textbox and leave if the value is not a number in JavaScript…

we have the solution with isNaN() function in JavaScript see this example to understand clearly.

Example :

JavaScript:

<script type="text/javascript">
        function CheckNumberOrNot() {
            var Age = document.getElementById("Age");
            var result = isNaN(Age.value);
            if (!result) {
                alert("You are : " + Age.value + " years old.");
            } else {
                alert("Not recognized as Valid No.");
            }
        }
    </script>

 

Complete Code (Jsp):

<%@ Page Language="java" import="java.util.*" pageEncoding="ISO-8859-1" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";

%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>

    <script type="text/javascript">
        function CheckNumberOrNot() {
            var Age = document.getElementById("Age");
            var result = isNaN(Age.value);
            if (!result) {
                alert("You are : " + Age.value + " years old.");
            } else {
                alert("Not recognized as Valid No.");
            }
        }
    </script>

</head>
<body>
    This is my JSP page.
    <br />
    <br />
    Age:
    <input type="text" id="Age" name="Age">
    <br />
    <br />
    <input type="button" value="submit" onclick="CheckNumberOrNot();" align="center" />
</body>
</html>

OutPut :

FormDesign

Invalid Number

Valid Number

How to convert decimal number or string to Indian currency format


Here we can learn how to convert decimal number or string to Indian format using culture information

Display format:

1.00

10.00

100.00

1,000.00

10,000.00

1,00,000.00

10,00,000.00

1,00,00,000.00

Example:

CultureInfo CInfo = new CultureInfo(“hi-IN”);
string Prc = “100000000000”;
//string Prc = decimalvalue.ToString();//if decimal
Response.Write(Convert.ToDecimal(Prc).ToString(“N”, CInfo));

Output:

1,00,00,00,00,000.00

How to Implement SwitchCase in Javascript


Script:

<script language="javascript" type="text/javascript">
// <!CDATA[

        function Button_onclick(operator) {
            var Operand1 = parseInt(document.getElementById("Text1").value);
            var Operand2 = parseInt(document.getElementById("Text2").value);
            switch (operator) {
                case "+":
                    document.getElementById("Result").innerHTML = Operand1 + Operand2;
                    break;
                case "-":
                    document.getElementById("Result").innerHTML = Operand1 – Operand2;
                    break;
                case "*":
                    document.getElementById("Result").innerHTML = Operand1 * Operand2;
                    break;
                case "/":
                    document.getElementById("Result").innerHTML = Operand1 / Operand2;
                    break;
                case "%":
                    document.getElementById("Result").innerHTML = Operand1 % Operand2;
                    break;
            }
        }

// ]]>
    </script>

TotalCode:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
    <title></title>

    <script language="javascript" type="text/javascript">
// <!CDATA[

        function Button_onclick(operator) {
            var Operand1 = parseInt(document.getElementById("Text1").value);
            var Operand2 = parseInt(document.getElementById("Text2").value);
            switch (operator) {
                case "+":
                    document.getElementById("Result").innerHTML = Operand1 + Operand2;
                    break;
                case "-":
                    document.getElementById("Result").innerHTML = Operand1 – Operand2;
                    break;
                case "*":
                    document.getElementById("Result").innerHTML = Operand1 * Operand2;
                    break;
                case "/":
                    document.getElementById("Result").innerHTML = Operand1 / Operand2;
                    break;
                case "%":
                    document.getElementById("Result").innerHTML = Operand1 % Operand2;
                    break;
            }
        }

// ]]>
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    Operand1
                </td>
                <td>
                    <input id="Text1" type="text" />
                </td>
            </tr>
            <tr>
                <td>
                    Operand2
                </td>
                <td>
                    <input id="Text2" type="text" />
                </td>
            </tr>
            <tr>
                <td>
                    Result:
                </td>
                <td id="Result">
                </td>
            </tr>
            <tr>
                <td>
                    Operator
                </td>
                <td>
                    <input id="Button1" type="button" value="+" onclick="return Button_onclick('+');" />
                    <input id="Button2" type="button" value="-" onclick="return Button_onclick('-');" />
                    <input id="Button3" type="button" value="*" onclick="return Button_onclick('*');" />
                    <input id="Button4" type="button" value="/" onclick="return Button_onclick('/');" />
                    <input id="Button5" type="button" value="%" onclick="return Button_onclick('%');" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Output:

Math Functions

How to create Dynamic HTML Controls Using Javascript


Here we Learn how to create dynamic html controls like textBox, dropdownlist, Radiobutton and Radiobutton List or group using Javascript

For this Just know about basic asp.net controls and Html contrls

Javascript Code:

<script language="javascript" type="text/javascript">
// <!CDATA[

        function Button1_onclick(ControlType) {
            var Count = document.getElementById("Text1").value;

            if (ControlType == "TEXTBOX") {
                div_Controls.innerHTML = "";
                for (i = 0; i < Count; i++) {
                    var TextBox = document.createElement("INPUT");
                    TextBox.setAttribute("type", "text");
                    TextBox.setAttribute("onkeypress", "return allowOnlyDigits(event,this)");
                    TextBox.setAttribute("maxlength", "5");
                    TextBox.onpaste = function(e) { e.preventDefault() };
                    TextBox.setAttribute("size", "4");
                    TextBox.setAttribute("onchange", "validateHhMm(this);UpdateTimes(this.id);");
                    TextBox.setAttribute('id', 'txtTime_' + i);
                    div_Controls.appendChild(TextBox);
                }
            }

            if (ControlType == "DROPDOWNLIST") {
                div_Controls.innerHTML = "";
                for (i = 0; i < Count; i++) {
                    var DropDownList = document.createElement("SELECT");
                    DropDownList.setAttribute("onchange", "UpdateTimes(this.id);");
                    option0 = new Option("AM", "AM");
                    option1 = new Option("PM", "PM");
                    DropDownList.options[0] = option0;
                    DropDownList.options[1] = option1;
                    div_Controls.appendChild(DropDownList);
                }
            }
            if (ControlType == "RADIOBUTTON") {
                div_Controls.innerHTML = "";
                for (i = 0; i < Count; i++) {
                    var RadioButton = document.createElement("input");
                    var labelForRadio = document.createElement("label");
                    RadioButton.type = "radio";
                    RadioButton.setAttribute('id', 'RadioTime_' + i);
                    labelForRadio.setAttribute('for', 'RadioTime_' + i)
                    labelForRadio.innerHTML = 'Day' + (i + 1);
                    RadioButton.setAttribute('Value', 'Day' + (i + 1));
                    div_Controls.appendChild(RadioButton);
                    div_Controls.appendChild(labelForRadio);
                }
            }
            if (ControlType == "RADIOBUTTONGROUP") {
                div_Controls.innerHTML = "";
                for (i = 0; i < Count; i++) {
                    var RadioButton = document.createElement("input");
                    var labelForRadio = document.createElement("label");
                    RadioButton.type = "radio";
                    RadioButton.setAttribute('id', 'RadioTime_' + i);
                    labelForRadio.setAttribute('for', 'RadioTime_' + i)
                    RadioButton.setAttribute('name', 'RadioTime');
                    labelForRadio.innerHTML = 'Day' + (i + 1);
                    div_Controls.appendChild(RadioButton);
                    div_Controls.appendChild(labelForRadio);
                }
            }
            return false;
        }

// ]]>
    </script>

 

HTML Code:

<div>
        <table>
            <tr>
                <td>
                    No.Of Controls<input id="Text1" type="text" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Button ID="Button2" runat="server" Text="Generate TextBox" OnClientClick=" return Button1_onclick('TEXTBOX');" /><br />
                    <asp:Button ID="Button3" runat="server" Text="Generate Dropdown List" OnClientClick=" return Button1_onclick('DROPDOWNLIST');" /><br />
                    <asp:Button ID="Button4" runat="server" Text="Generate Radio Button" OnClientClick=" return Button1_onclick('RADIOBUTTON');" /><br />
                    <asp:Button ID="Button1" runat="server" Text="Generate Radiobutton Group" OnClientClick=" return Button1_onclick('RADIOBUTTONGROUP');" />
                </td>
            </tr>
            <tr>
                <td id="div_Controls">
                </td>
            </tr>
        </table>
    </div>

Total Code:

<%@ 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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
    <title></title>

    <script language="javascript" type="text/javascript">
// <!CDATA[

        function Button1_onclick(ControlType) {
            var Count = document.getElementById("Text1").value;

            if (ControlType == "TEXTBOX") {
                div_Controls.innerHTML = "";
                for (i = 0; i < Count; i++) {
                    var TextBox = document.createElement("INPUT");
                    TextBox.setAttribute("type", "text");
                    TextBox.setAttribute("onkeypress", "return allowOnlyDigits(event,this)");
                    TextBox.setAttribute("maxlength", "5");
                    TextBox.onpaste = function(e) { e.preventDefault() };
                    TextBox.setAttribute("size", "4");
                    TextBox.setAttribute("onchange", "validateHhMm(this);UpdateTimes(this.id);");
                    TextBox.setAttribute('id', 'txtTime_' + i);
                    div_Controls.appendChild(TextBox);
                }
            }

            if (ControlType == "DROPDOWNLIST") {
                div_Controls.innerHTML = "";
                for (i = 0; i < Count; i++) {
                    var DropDownList = document.createElement("SELECT");
                    DropDownList.setAttribute("onchange", "UpdateTimes(this.id);");
                    option0 = new Option("AM", "AM");
                    option1 = new Option("PM", "PM");
                    DropDownList.options[0] = option0;
                    DropDownList.options[1] = option1;
                    div_Controls.appendChild(DropDownList);
                }
            }
            if (ControlType == "RADIOBUTTON") {
                div_Controls.innerHTML = "";
                for (i = 0; i < Count; i++) {
                    var RadioButton = document.createElement("input");
                    var labelForRadio = document.createElement("label");
                    RadioButton.type = "radio";
                    RadioButton.setAttribute('id', 'RadioTime_' + i);
                    labelForRadio.setAttribute('for', 'RadioTime_' + i)
                    labelForRadio.innerHTML = 'Day' + (i + 1);
                    RadioButton.setAttribute('Value', 'Day' + (i + 1));
                    div_Controls.appendChild(RadioButton);
                    div_Controls.appendChild(labelForRadio);
                }
            }
            if (ControlType == "RADIOBUTTONGROUP") {
                div_Controls.innerHTML = "";
                for (i = 0; i < Count; i++) {
                    var RadioButton = document.createElement("input");
                    var labelForRadio = document.createElement("label");
                    RadioButton.type = "radio";
                    RadioButton.setAttribute('id', 'RadioTime_' + i);
                    labelForRadio.setAttribute('for', 'RadioTime_' + i)
                    RadioButton.setAttribute('name', 'RadioTime');
                    labelForRadio.innerHTML = 'Day' + (i + 1);
                    div_Controls.appendChild(RadioButton);
                    div_Controls.appendChild(labelForRadio);
                }
            }
            return false;
        }

// ]]>
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    No.Of Controls<input id="Text1" type="text" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Button ID="Button2" runat="server" Text="Generate TextBox" OnClientClick=" return Button1_onclick('TEXTBOX');" /><br />
                    <asp:Button ID="Button3" runat="server" Text="Generate Dropdown List" OnClientClick=" return Button1_onclick('DROPDOWNLIST');" /><br />
                    <asp:Button ID="Button4" runat="server" Text="Generate Radio Button" OnClientClick=" return Button1_onclick('RADIOBUTTON');" /><br />
                    <asp:Button ID="Button1" runat="server" Text="Generate Radiobutton Group" OnClientClick=" return Button1_onclick('RADIOBUTTONGROUP');" />
                </td>
            </tr>
            <tr>
                <td id="div_Controls">
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Output:

Generating TextBoxes

 Generating DropdownLists

 Generating Radiobuttons

 Generating Radiobutton Group

How to add RadComboboxItem and attributes in clientside javascript


<script type="text/javascript">
        function pageLoad() {
            var RadComboBox1 = $find("<%=RadComboBox1.ClientID %>");
            var RadComboBox1Item = new Telerik.Web.UI.RadComboBoxItem();
            RadComboBox1Item.set_text("—Choose Employee—");
            RadComboBox1Item.set_value("-1");
            hdn_PatientName.value = lbl_Opdname.innerHTML;
            RadComboBox1Item.get_attributes().setAttribute("DefaultItem", "Yes");
            RadComboBox1Item.get_attributes().setAttribute("IsValid", "No");
            RadComboBox1.trackChanges();
            RadComboBox1.get_items().add(RadComboBox1Item);
            RadComboBox1Item.select();
            RadComboBox1.commitChanges();
            RadComboBox1Item.scrollIntoView();
        }
    </script>