CODEWITHSUNDEEP
javascriptjqueryasp.net
Mohemmad K
Mohemmad K

Reputation: 839

Unable to get <asp:HiddenField> value in javascript

I am assigning the value to hidden field and I want to access that value in the JavaScript.

My declarative part is:

<asp:HiddenField ID="chkImages" runat="server" />
<div id="main" runat="server" style="display:none;"></div>
<a id="NewsTitle" runat="server" class="specialNews-label"></a>

My JavaScript code is:

$(document).ready(function () {
    $( "#bxsliderid" ).parent().css( "display", "block" );
    $('.bxslider').bxSlider({
        controls:false,
        pager:false,
        auto:true,
        speed: 9000,   
        easing: 'linear', 
        mode: 'fade',
        pause: 5000,
    });

    if(document.getElementById('<%= chkImages.ClientId%>').value == "1") {
        $( ".specialNews-label" ).css( "display", "block" );
    }
});

I opened the page and see in Firebug that the hidden field is rendered but I am not getting the value of it, while debugging the JavaScript I am getting error like: Unable to get property 'value' of undefined or null reference

What am I missing?

Upvotes: 2

Views: 2844

Answers (6)

Bhavesh Kachhadiya
Bhavesh Kachhadiya

Reputation: 3962

You not need to change any thing in your HTML code you just change your javascript as follow:

In your Jquery code:

$(document).ready(function () {
    $( "#bxsliderid" ).parent().css( "display", "block" );
    $('.bxslider').bxSlider({
        controls:false,
        pager:false,
        auto:true,
        speed: 9000,   
        easing: 'linear', 
        mode: 'fade',
        pause: 5000,
    });

    if($("input[type='hidden'][id$='chkImages']").val() == "1") {
        //alert('test');
        $( ".specialNews-label" ).css( "display", "block" );
    }
});

See Demo for your rendered HTML :

JS Fiddle

Upvotes: 1

Anthony Graglia
Anthony Graglia

Reputation: 5435

Use .attr('value') in your code instead of .value. Since you appear to be using jQuery, you can do this.

$(document).ready(function () {
    if ($('#chkImages').attr('value') == "1") {
        alert("Working...");
    }
});

http://jsfiddle.net/zW3fj/

Upvotes: 0

rajesh kakawat
rajesh kakawat

Reputation: 10896

check id is same in my case it is my_id

js

document.getElementById('my_id').value == "1"

html 

<input name="image_name" id="my_id" type="hidden" value="1"/>

Upvotes: 0

Nitin S
Nitin S

Reputation: 7591

try this

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:HiddenField ID="hdnField" runat="server" />
    </div>
    </form>

    <script type="text/javascript">
        $(document).ready(function () {
            alert($("#<%= hdnField.ClientID %>").val());
        });
    </script>
</body>
</html>

Upvotes: 0

Vishal Patel
Vishal Patel

Reputation: 973

please try below... It is working fine... It

<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function () {
            alert($('#chkImages').val());
            if ($('#chkImages').val() == "1") {
                $("#NewsTitle").css('display', '');
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:HiddenField ID="chkImages" runat="server" Value="1" />
        <div id="main" runat="server" style="display: none;">
            Test
        </div>
        <a id="NewsTitle" runat="server" style="display: none" class="specialNews-label">AAAA</a>
    </div>
    </form>
</body>

Upvotes: 1

Ravi_Mishra
Ravi_Mishra

Reputation: 62

hey brother there is letter case problem

try this-----

ClientID instead of ClientId

Upvotes: 0

Related Questions