Question

I am having a problem setting/getting a hidden input’s value with JavaScript, and can’t see what I’m doing wrong.

What I am basically trying to do is maintain the state of expandable/collapsable divs on my page across form submissions. So I put a hidden input on the page to hold the state of the divs. When a div is expanded/collapsed, I change the value of the input. When the page loads, I read the value of the input and set the state of the divs.

But the value of the input is getting lost. I verify through alerts that it is being set correctly, and then when I read it on load, I verify with an alert that it is empty. Here is the pertinent code:

<input type="hidden" name="ECState" id="hdnECState" />

<script language="javascript" type="text/javascript">
<!--
    var ecValue;

    function ec(div, btn) {
        //expands or collapses an error detail div
        var e = document.getElementById(div);
        var b = document.getElementById(btn);
        var ecStr = div.toString() + ',' + btn.toString() + '|'
        if (e.style.display == 'block') {
            e.style.display = 'none';
            b.src = '../../Images/plus.gif';
            ecValue = ecValue.replace(ecStr, '');
        }
        else {
            e.style.display = 'block';
            b.src = '../../Images/minus.gif';
            ecValue = ecValue + ecStr;
        }
        alert(ecValue);
        document.getElementById('hdnECState').value = ecValue;
    }
    function reexpand() {
        //restores the expanded state of the error detail divs
        var pipe, comma, db, div, btn, e, b;
        var n = document.getElementById('hdnECState').value;
        alert('n=' + n);
        if (n != '') {
            pipe = n.indexOf('|');
            while (pipe > 0) {
                db = n.substring(0, pipe);
                comma = db.indexOf(',');
                if (comma > 0) {
                    div = db.substring(0, comma);
                    btn = db.substring(comma + 1);
                    e = document.getElementById(div);
                    b = document.getElementById(btn);
                    e.style.display = 'block';
                    b.src = '../../Images/minus.gif';
                }
                n = n.substring(pipe+1);
                pipe = n.indexOf('|');
            }
        }
    }

    reexpand();

//-->
</script>

When I expand a div, I see the alert from ec() showing that ecValue is ‘foo,bar|’.

But after submitting the form, I see the alert from reexpand() saying ‘n=’.

Anybody see what I’m missing?

Answer 1

Rudu supplied the answer in a comment, but since I can’t mark a comment as the answer, here it is:

I was forgetting that hidden inputs don’t automatically keep their value in ViewState across form submissions. I needed to re-value the hidden input on the back end in page load and then everything worked fine.