How to set Value of HiddenField on Page load and access in Javascript in asp.net?

Question

I have a Page which contains the image control which displays the images from Specific Folder (Slide Show) using Javascript. I have set the value of HiddenField Value on Page Load and want to access these values using Javascript. But, after setting the value of Hidden Field on Page Load the value of Hidden Field in Javascript shows NULL.

In .aspx page:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js"></script>


</head>
     <script type="text/javascript">

         var folderNm = document.getElementById('<%#HiddenFieldFolderName.ClientID%>');
         var MaxIndex = document.getElementById('<%#HiddenFieldMaxIndex.ClientID%>');
         var mainImage = document.getElementById('mainImage');
         //mainImage.src = "Presentations/7/Slide1.GIF";
         //Initilize start value to 1 'For Slide1.GIF'
         var currentIndex = 1;

         //NOTE: Set this value to the number of slides you have in the presentation.
         //var maxIndex = 7;
         var maxIndex = MaxIndex;
         alert("Folder Name " + folderNm + "\n MaxIndex  " + MaxIndex);
         function swapImage(imageIndex) {
             //Check if we are at the last image already, return if we are.
             if (imageIndex > maxIndex) {
                 currentIndex = maxIndex;
                 return;
             }

             //Check if we are at the first image already, return if we are.
             if (imageIndex < 1) {
                 currentIndex = 1;
                 return;
             }

             currentIndex = imageIndex;
             //Otherwise update mainImage
             //document.getElementById("mainImage").src = 'PPT/GIFs/Slide' + currentIndex + '.GIF';
             document.getElementById("mainImage").src = 'Presentations/' + folderNm + '/' + 'Slide' + currentIndex + '.GIF';
             // document.getElementById("mainImage").src = 'Presentations/7/Slide' + currentIndex + '.GIF';
             return;
         }
    </script>
<body>
    <form id="form1" runat="server" >
        <div>
            <div>

               <%-- <img src="PPT/GIFs/Slide1.GIF" id="mainImage" name="mainImage" width="50%" height="50%" alt="">--%>
                <img  id="mainImage" name="mainImage" width="25%" height="25%" alt="">
            </div>
            <div>
                <a href="#" onclick="swapImage(0);">
                    <img src="/images/firstss.png" border="0" alt="First"></a>
                <a href="#" onclick="swapImage(currentIndex-1);">
                    <img src="/images/prev.png" border="0" alt="Previous"></a>
                <a href="#" onclick="swapImage(currentIndex+1);">
                    <img src="/images/nexts.png" border="0" alt="Next"></a>
                <a href="#" onclick="swapImage(maxIndex);">
                    <img src="/images/lasts.png" border="0" alt="Last"></a>
            </div>
            <div>
                <asp:HiddenField ID="HiddenFieldMaxIndex" runat="server" />
                <asp:HiddenField ID="HiddenFieldFolderName" runat="server" />

            </div>
        </div>
    </form>
</body>

</html>

In .aspx.cs file:

protected void Page_Load(object sender, EventArgs e)
        {
            string foldername = string.Empty;
            if (Request.QueryString["di"] != null)
            {
                foldername = Request.QueryString["di"].ToString();
                HiddenFieldFolderName.Value = foldername;
                HiddenFieldMaxIndex.Value = Request.QueryString["Files"].ToString();
            }

    }

Here, the Hidden Field value shows null in alert() box. Help Appreciated.

Community · Accepted Answer · 2017-05-23 12:04:57Z

1

You need to modify

<%#HiddenFieldFolderName.ClientID%>

to

<%= HiddenFieldFolderName.ClientID %>

Do the same for <%#HiddenFieldMaxIndex.ClientID%> See ASP.NET inline expressions and this question

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Apr 17, 2013 at 9:46

Habib

224k30 gold badges420 silver badges446 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Yeronimo Over a year ago

Also make sure you take the value and not the object itself. var folderNm = document.getElementById('<%#HiddenFieldFolderName.ClientID%>').value;

Habib Over a year ago

@SHEKHARSHETE, did you try it with <%= instead of <%#

Yeronimo Over a year ago

Yes my bad for not correcting that. Should be this: var folderNm = document.getElementById('<%=HiddenFieldFolderName.ClientID%>').value;

Bart De Meyer · Accepted Answer · 2013-04-17 09:49:38Z

0

If you check the source of your page, do you see the hidden inputs?

If I'm correct (haven't used webforms a lot lately) the buildin asp:HiddenField doens't put the field in the generated HTML. Therefor your javascript function can't find the field and is returning null.

You can use the asp:TextBox component and hide it using css (display:none;). That way the textbox is rendered in the HTML but not visible for the end user (except when he's searching trough the source of the page). You javascript will find the control and will be able to read the value of the text box.

Try to use tools like Firebug for Firefox or the page inspector for Chrome to deal with this kinds of bugs.

answered Apr 17, 2013 at 9:49

Bart De Meyer

1477 bronze badges

2 Comments

SHEKHAR SHETE Over a year ago

i have tried TextBox too but still it shows 'null' please any other solution?

Bart De Meyer Over a year ago

Is the webpage somewhere online? Can you give an URL? Then I can take a look

Damith · Accepted Answer · 2013-04-17 10:50:14Z

You already add reference to jquery, so why don't you use it?

var folderNm= $("#<%= HiddenFieldFolderName.ClientID %>").val();
var index= $("#<%= HiddenFieldMaxIndex.ClientID %>").val();

alert("Folder Name " + folderNm+ "\n MaxIndex  " + index);

do the same for others..

Even using above only will not work, because when you access hidden fields document may not be ready.

 var currentIndex = 1;
   var folderNm  = 0;
   var MaxIndex = 0;
   alert($("#<%= HiddenFieldFolderName.ClientID %>").val()); // this will return null

   // but when document ready you can get values, 
    $(document).ready(function () {
        folderNm= $("#<%= HiddenFieldFolderName.ClientID %>").val();
        MaxIndex= $("#<%= HiddenFieldMaxIndex.ClientID %>").val();
        alert("Folder Name " + folderNm+ "\n MaxIndex  " + MaxIndex); 
    });

If you need to check this without jquery put all your code inside swapImage function and check, it will work.

REF : jquery ID Selector (“#id”)

Collectives™ on Stack Overflow

How to set Value of HiddenField on Page load and access in Javascript in asp.net?

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related