Geek Answers Handbook

Setting a hidden input value in Javascript and then accessing it in codebehind

I am trying to set the value of a hidden input using Javascript, and then access the value from my C # code. When I run the code that is copied below, the value assigned to the assigned identifiers is "", which I assume is the default value for hidden input. If I manually set the value in the html tag, then the IDID value is assigned.

This behavior tells me that the input value is reset (re-mapped?) Between the onClientClick and onClick events.

I would be grateful for any help in this matter. I spent hours trying to solve what seems like a very simple problem.

HTML / JavaScript:

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Admin Page - Manage Tasks</title> <script language="javascript" type="text/javascript"> function PopulateAssignedIDHiddenInput() { var source = document.getElementById('assignedLinguistListBox'); var s = ""; var count = source.length; for (var i = count - 1; i >= 0; i--) { var item = source.options[i]; if (s == "") { s = source.options[i].value; } else { s = s.concat(",",source.options[i].value); } } document.getElementById('assignedIDHiddenInput').Value = s; // I have confirmed that, at this point, the value of // the hidden input is set properly } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:Panel id="EditMode" runat="server"> <table style="border: none;"> <tr> <td> <asp:Label ID="availableLinguistLabel" runat="server" Text="Available"></asp:Label><br /> <asp:ListBox ID="availableLinguistListBox" runat="server" Rows="10" SelectionMode="Multiple"></asp:ListBox> </td> <td> <input type="button" name="right" value="&gt;&gt;" onclick="Javascript:MoveItem('availableLinguistListBox', 'assignedLinguistListBox');" /><br /><br /> <input type="button" name="left" value="&lt;&lt;" onclick="Javascript:MoveItem('assignedLinguistListBox', 'availableLinguistListBox');" /> </td> <td> <asp:Label ID="assignedLinguistLabel" runat="server" Text="Assigned To"></asp:Label><br /> <asp:ListBox ID="assignedLinguistListBox" runat="server" Rows="10" SelectionMode="Multiple"></asp:ListBox> </td> </tr> </table> //-snip- <asp:Button ID="save_task_changes_button" runat="server" ToolTip="Click to save changes to task" Text="Save Changes" OnClick="save_task_changes_button_click" OnClientClick="Javascript:PopulateAssignedIDHiddenInput()" /> </asp:Panel> <!-- Hidden Inputs --> <!-- Note that I have also tried setting runat="server" with no change --> <input id="assignedIDHiddenInput" name="assignedIDHiddenInput" type="hidden" /> </div> </form> </body>

FROM#

 protected void save_task_changes_button_click(object sender, EventArgs e) { string assignedIDs = Request.Form["assignedIDHiddenInput"]; // Here, assignedIDs == ""; also, Request.Params["assignedIDHiddenInput"] == "" // -snip- }
+6
javascript html c #
source share
3 answers

In javascript, you need the value property to be lowercase, for example:

 document.getElementById('assignedIDHiddenInput').value = s;

Then it will be installed correctly :) Here you can see an example

Although if you tell .Value it will show your value, you really added the new .Value property, but you did not set the input property .Value , which is sent to the server. The link example above illustrates this both ways.

You can also do this a little faster, especially if you have many options, using an array instead of concatenating strings, for example:

 var source = document.getElementById('assignedLinguistListBox'); var opts = []; for (var i = 0; i < source.options.length; i++) { opts.push(source.options[i].value); } var s = opts.join(',');

Edit: The above code has been updated, CMS is right that the previous method was browser dependent, the above should now behave sequentially. Also, if jQuery is an option, there are shorter ways to get this information, for example:

 var s = $('#assignedLinguistListBox option').map(function() { return this.value; }).get().join(','); $('#assignedIDHiddenInput').val(s);

You can see a working example of this here.

+7
source share

I assume ASP.NET is here.

If so, your problem is the control identifier in the HTML generated by ASP.NET will not be "assigned the IDHiddenInput" that you reference in the script. ASP.NET modifies these settings before displaying the HTML from what you specify declaratively on the HTML page. Make a view source on the page and you will see what I mean.

Here's how to do it:

 document.getElementById('<%=assignedIDHiddenInput.ClientID %>').value = s;

Update. As noted in the comments, this only makes sense if the control is set to RunAt = Server.

+1
source share

I think ASP.NET calls javascript to do the postback on this control before your javascript function is called to populate this hidden value.

I think you can disable the default sending and handle it yourself, but I'm sure others can advise better.

Insert a warning () in your function to see if it is actually called before it fires post-back.

0
source share

More articles:


All Articles