Question

I have a hidden TextBox control on my page that updates a span tag on the keyup event using jQuery. When the page is posted back to the server, the innerHTML attribute is empty.

How do I get the value that was set during the keyup event?

Client side code:

<script language="javascript" type="text/javascript">
    $(document).ready(function(){
        $('#MyHiddenTextBox').keyup(function(){
            if($(this).val().length > 0){
                SetSpanValue();
            }
        });
    });

    function SetSpanValue() {
        var mytext = $('#MyHiddenTextBox').val();
        $('#MySpanTag').html(mytext);
    }
</script>
<style type="text/css">
    .USBBox
    {
        position: absolute;
        left: -999em;
    }
</style>
<asp:TextBox ID="MyHiddenTextBox" runat="server" CssClass="USBBox"  />
<span id="MySpanTag" runat="server" enableviewstate="true" />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />

Server side code

protected void btnSubmit_Click(object sender, EventArgs e)
{
    string x = MySpanTag.InnerHtml; //this is coming back empty
}

Answer 1

Span tags are not posted back to the server, they are not input controls, regardless of runat or enableviewstate settings. I would recommend entering the data into an input element when entered into the span tag, then you can access the value of that input element (TextBox/HiddenField etc) when the postback occurrs.