Uncaught TypeError: Cannot read property ‘value’ of null


Hi

If you getting this error message in java-script, then you might be thinking that you have written some wrong syntax in java-script, but it is not the syntax problem, it is the problem with reading value of that Id which one you have given to read the values. For example in the below code i have given the wrong text-box Id to read the value then i will get this exception.

How to return multiple value from Javascript ?


Hi

If you are working with java-script then you might be get scenario to return multiple value from function. Then we can return the multiple value like this code snippet as given below.

 


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MultipleValueReturn.aspx.cs" Inherits="JavaScriptTest.MultipleValueReturn" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function test() {
            var no1 = 10;
            var no2 = 20;
            return {
                no1: no1,
                no2: no2
            };
        }

        function showAlertMsg() {
            var no3 = test().no1;
            alert(no3);
            var no4 = test().no2;
            alert(no4);
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="showAlertMsg();" />
    </div>
    </form>
</body>
</html>




How to get the checkboxlist text using Javacsript in asp.net


Hi

So many time we will get scenario to read the checkbox list using JavaScript, we can do this task like this

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default3.aspx.vb" Inherits="Test_Default3" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">

function getCheckBoxListItemsChecked(elementId) {
var elementRef = document.getElementById(elementId);
var checkBoxArray = elementRef.getElementsByTagName('input');
var checkedValues = '';

for (var i = 0; i < checkBoxArray.length; i++) {
var checkBoxRef = checkBoxArray[i];

if (checkBoxRef.checked == true) {
// for getting the value
var value1 = checkBoxArray[i].value;
alert(value1)
// For getting the text value

var labelArray = checkBoxRef.parentNode.getElementsByTagName('label');
if (labelArray.length > 0) {
if (checkedValues.length > 0)
checkedValues += ', ';
checkedValues += labelArray[0].innerHTML;

}
}
}

return checkedValues;
}

function readCheckBoxList() {
var checkedItems = getCheckBoxListItemsChecked('<%= CheckBoxList2.ClientID %>');
alert(checkedItems);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:CheckBoxList ID="CheckBoxList2"  runat="server">
<asp:ListItem>C1</asp:ListItem>
<asp:ListItem>C2</asp:ListItem>
</asp:CheckBoxList>
</div>
<input type="button" onclick="readCheckBoxList();" value="Read CheckBoxList" />

</form>
</body>
</html>

How to find the duplicate value in array using Javascript ?


Hi

While working on asp.net project, So many time we will get scenario to check the duplicate input value like on textbox value. We can do like this.


<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
    <script type="text/javascript">

    function testValues() {
        var no1 = document.getElementById('<%= TextBox1.ClientID %>').value;
        var no2 = document.getElementById('<%= TextBox2.ClientID %>').value;
        var no3 = document.getElementById('<%= TextBox3.ClientID %>').value;
        var no4 = document.getElementById('<%= TextBox4.ClientID %>').value;
        var arrInput = [no1,no2,no3,no4];
        var sorted_arr = arrInput.sort(); 
        var results = [];
        for (var i = 0; i < arrInput.length - 1; i++) {
            if (sorted_arr[i + 1] == sorted_arr[i]) {
                results.push(sorted_arr[i]);
            }
        }

        alert("duplicate Value:  " + results);
    }

    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <asp:TextBox ID="TextBox1" runat="server" />
    <br />
    <asp:TextBox ID="TextBox2" runat="server" />
    <br />
    <asp:TextBox ID="TextBox3" runat="server" />
    <br />
    <asp:TextBox ID="TextBox4" runat="server" />
    <br />
    <br />
    <asp:Button ID="Button1" Text="Submit" OnClientClick="testValues();" runat="server" />
</asp:Content>


How to hide and display panel in asp.net using Javascript ?


PanelHide
Hi

While working on asp.net we will get scenario to hide and display panel or Div or any asp.net control. So many person used to fire event on that asp.net control and write code in code behind file.

But this process is not a good one. It will decrease the performance so much. We can do this task using Javascript or Jquery on client side only. It will give very good user experience.


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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .style1
        {
            width: 100%;
        }
    </style>
    <script type="text/javascript">

        function ChangePanel() {
            var dll = document.getElementById('<%=DropDownList1.ClientID %>');
            var panelCountry = document.getElementById('<%=PanelCountry.ClientID %>');
            var val = dll.options[dll.selectedIndex].value;
            if (val == 1) {
                panelCountry.style.visibility = "visible";
            }
            else {
                panelCountry.style.visibility = "hidden";
            }
        }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
    <table class="style1">
        <tr>
            <td>
                &nbsp;
            </td>
            <td>
            <br />
            <br />

                <asp:DropDownList ID="DropDownList1" onchange="return ChangePanel()" runat="server">
                    <asp:ListItem Value="0">Select</asp:ListItem>
                    <asp:ListItem Value="1">India</asp:ListItem>
                    <asp:ListItem Value="2">Nepal</asp:ListItem>
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;
            </td>
            <td>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;
            </td>
            <td>
                <asp:Panel ID="PanelCountry" runat="server">
                 <fieldset>
                <legend> This is the design part for India Registration Form</legend>
                    <asp:Label ID="lblmsg" runat="server" Font-Bold="true" Text="This design for Country"></asp:Label>
                    <br />
                    <br />
                    <br />
                 </fieldset>
               </asp:Panel>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>