Changing asp:HiddenField.value with JS on ButtonClick

Question

I have four textboxes in my html; one is a serverside asp:textbox and the others are rendered on the client side using dynamic javascript. The javascript creates the textareas; there may be 6, there may be 90. In this example there are 3.

<asp:Textbox id="tbxReal" runat="server"/>
<asp:button id="btnReal" runat="server" Value="go" />
<asp:HiddenField ID="hdnID" runat="server" />

<textarea rows="10" cols="60" id="one"></textarea>
<input onclick="sub('one');" type="button" value="Go_One" />

<textarea rows="10" cols="60" id="two"></textarea>
<input onclick="sub('two');" type="button" value="Go_Three" />

<textarea rows="10" cols="60" id="one"></textarea>
<input onclick="sub('three');" type="button" value="Go_Three" />

I want to be able to submit the javascript rendered textbox/buttons through the 1 set of server side controls.

Here is my javascript:

function sub(id)
{
    hdn = document.getElementById('WhatGetsAppended_hdnID');
    hdn.value = id;
    alert(hdnID.value);

    var Real = document.getElementById('WhatGetsAppended_tbxReal');
    var Fake = document.getElementById(id);
    Real.value = Fake.value;

    var button = document.getElementById('WhatGetsAppended_btnReal');
    button.click();    
}

Then the C# event handler for the tbxReal:

protected void btnReal_Click(object sender, EventArgs e)
{
    Response.Write(Convert.ToInt32(hdnID.Value) + "<BR />");
    Response.Write(tbxReal.Text + "<BR />");
}

My code works for changing the text within tbxReal, but I can't change the value of hdnId when the postback occurs. How do I fix my code so that I can change the value of the HiddenField in Javascript and have the postback read that new value?

Edit: Acknowledged that I know what the clientIDs of the serverside controls are within the JS.

Answer 1

Shouldn't you change your JavaScript to use the controls' ClientID properties?

function sub(id)
{
    hdn = document.getElementById("<%=hdnID.ClientID%>");
    hdn.value = id;
    alert(hdnID.value);
    var Real = document.getElementById("<%=tbxReal.ClientID%>");
    var Fake = document.getElementById(id);
    Real.value = Fake.value;
    var button = document.getElementById("<%=btnReal.ClientID%>");
    button.click();    
}

Maybe it happened to work for the Button and TextBox controls, but since you've set runat="server", the ID is for the server-side control.

Ah, also I see you're using a lowercase id property for the Button and TextBox, but an upper-case ID property for the HiddenField. I think this also makes a difference.

Answer 2

I assume that that alert(hdnID.value); is displaying the correct value that you are expecting to see server side.

Check to make sure you are not setting the hdnID or rebinding the data (if it is bound) in the Page_Load or else the modified value will be replaced by the time you reach btnReal_Click.

Answer 3

the logic looks fine, so either you're getting a reference to the wrong hidden control or you overwriting the value somewhere else before you get a chance to read it back. posting your rendered html may help. it may or may not be relevant that you have repeated an id for your client side inputs in your example.