Client side data to server side

Question

I'm trying to use a JavaScript popup box (prompt) to get some user input on my website, and then do some more actions on the server-side based on what the user does.

The popup box is, for lack of words, popping up.

The following is the code that I have tried to use for this:

<div>
    <asp:HiddenField ID="hidden" runat="server" />
</div>
<script>
    function userInput() {
        var reason = prompt("Enter reason for deleting:", "");
        //User pressed okay but didn't type anything
        while (reason == "") {
            //Keeps cycling until reason given or cancel is hit
            reason = prompt("Enter reason for deleting:", "");
        }
        if (reason != "" && reason != "Code:CancelDelete") {
            //User typed something and hit okay
            document.getElementById('hidden').innerHTML = reason.toString();
            $('#deleteReason').val(reason.toString());
            $("#hidden").val(reason.toString());
        }
        else {
            //User hits cancel
            document.getElementById('hidden').nodeValue = "Code:CancelDelete";
        }
    }
</script>

The while loop in the script works for what I need it to do. The problem from what I can tell is trying to set the value of the HiddenField. I have tried the following ways:

• innerHTML
• innerText
• nodeValue

While looking into this, I have seen .value used a lot and have tried it myself but when I go to type document.getElementById('hidden').value = , there is no popup option or description for .value .

I have tested the server side code and so I know that works. It all comes down to getting the user input. Either way, here is an excerpt from the c# code:

string deleteReason = hidden.Value;
//string deleteReason = test.InnerHtml.ToString();
if (deleteReason.Equals("Code:CancelDelete"))
{

}
else if (!deleteReason.Equals("Code:CancelDelete") && !deleteReason.Equals(""))
{

More or less at a loss on this one.

Update 1: Here is the html code generated on the client side browser(Firefox) for the hidden field:

<input name="ctl00$IndividualPageContent$hidden" 
id="IndividualPageContent_hidden" type="hidden">

Answer 1

When you type an element ID on webform, the asp.net gives it a unique ID based on some things (Your form, your repeater, etc...)

If you want to use jQuery with this ID, you can use the ClientId prop.

Something like this:

if (reason != "" && reason != "Code:CancelDelete") {
            //If your server id= "hidden"
            ele = $("#<%= hidden.ClientID %>");
            ele.html() = reason.toString();
            ...
        }

Another option is to add the static ID to your server element, and then your code will work as is. (the html will be rendered with ID = hidden)

ClientIDMode="static"

<div>
    <asp:HiddenField ID="hidden" runat="server" ClientIDMode="static"/>
</div>

Answer 2

You are trying to set the value of an element with id 'hidden', but that's not the id of your hidden input.

The correct id is 'IndividualPageContent_hidden'.

Set the value like this instead:

document.getElementById('IndividualPageContent_hidden').value = 'Your value here';