ViewState with JavaScript/Hidden input fields

I've got an interactive form which dynamically displays per-field instructions and highlights table cells using javascript.  However, when a postback occurs, none of this is saved.  I'm trying to store the information about which cells are highlighted and which instruction is displayed using input fields with runat=server set, but the information doesn't seem to be getting saved at all.  Is this possible to do?
LVL 1
DanielSchafferAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

raterusCommented:
You're on the right track with hidden fields, exactly what are you doing?  I assure you it can be done, might not be "pretty" though.
DanielSchafferAuthor Commented:
Several parts of this form have extra parts to them (I call them "browsers")- for example, a calendar and time selector, and user selector and a file system browser. These "browsers" are hidden except for when the user is entering data into the relevant field.

When a user clicks on or enters into a field, several things happen:

1. That table cell is highlighted
2. Field category-specific instructions are displayed
3. The field's "browser" is displayed, if applicable.

Everything works nicely. All the information regarding which cell is highlighted, which instruction is being displayed and which, if any, "browser" is visible is stored in the hidden fields. The problem is, when a postback occurs, any data that was written to these hidden fields is lost. There is no data posted to these fields when I look at the source html, and even Request.Form returns nothing.
raterusCommented:
So your saying your hidden fields are not posting back at all?  What do your hidden fields look like in the html, you do have a name attribute set right?  Also, asp.net will not restore the posted value to the input fields unless they are runat="server".
Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

DanielSchafferAuthor Commented:
They are not posting back at all.

<input id="cBrowser" name="cBrowser" type="hidden" runat="server">
<input id="cCell" name="cCell" type="hidden" runat="server">
<input id="cTip" name="cTip" type="hidden" runat="server">
raterusCommented:
And they are within the form runat="server" (I'm sure they have to be being runat="server").  This I'd really have to see for myself if you say they aren't posting back their values!

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
DanielSchafferAuthor Commented:
Well if you'd like to see it, here's the code...

submit.aspx:

<%@ Page language="c#" Codebehind="submit.aspx.cs" AutoEventWireup="false" Inherits="_8AFOutlookToday.submit" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
      <HEAD>
            <title id="Title">HQ 8 AF Intranet - Submit a New Item</title>
            <meta content="JavaScript" name="vs_defaultClientScript">
            <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
            <LINK href="styles.css" type="text/css" rel="stylesheet">
            <LINK href="submit.css" type="text/css" rel="stylesheet">
            <script language="javascript" src="submit.js" type="text/javascript"></script>
      </HEAD>
      <body id="PageBody" runat="server">
            <!--
            
            Field Tips
            -----------------------
            Index | Name
              0   | Subject
              1   | Event Date Time
              2   | Location
              3   | Attachments
              4   | POC(s)
              5   | Body
             
            -->
            <input id="cBrowser" name="cBrowser" type="hidden" runat="server">
            <input id="cCell" name="cCell" type="hidden" runat="server">
            <input id="cTip" name="cTip" type="hidden" runat="server">
            <form id="Form1" method="post" encType="multipart/form-data" runat="server">
                  <table id="Table1" cellSpacing="0" cellPadding="0" width="600" border="0">
                        <tr>
                              <td id="PageTitle" colSpan="3">HQ 8 AF Intranet -
                                    <asp:label id="ItemActionLabel" Runat="server">Submit a New Item</asp:label></td>
                        </tr>
                        <tr>
                              <td id="TopLinks" colSpan="3"><asp:label id="Category" Runat="server"></asp:label></td>
                        </tr>
                        <tr>
                              <td id="SubjectCell" onclick="config(0, '', this);">
                                    <div class="Header HeaderTop">Subject: <span class="Required">*</span></div>
                                    <asp:textbox id="Subject" Runat="server" MaxLength="255" Width="100%" Rows="3" TextMode="MultiLine"></asp:textbox>
                                    </td>
                              <td id="TipCell" rowSpan="3" runat="server">
                                    <div id="Tips"></div>
                              </td>
                              <td id="AttachmentCell" onclick="config(3, 'AttachmentBrowser', this);" rowSpan="2"
                                    runat="server">
                                    <div class="Header HeaderTop">Attachment(s):</div>
                                    <div style="PADDING-LEFT: 5px; FONT-SIZE: 8pt">You currently have
                                          <asp:label id="AttachmentCount" Runat="server">0</asp:label>files attached.
                                    </div>
                                    <div><asp:placeholder id="AttachmentList" Runat="server"></asp:placeholder><asp:button id="UpdateAttachments" Runat="server"></asp:button></div>
                                    <div id="AddAttachmentButton" style="MARGIN-TOP: 5px" align="center"><input type="button" value="Add Attachment">
                                    </div>
                                    <div id="AttachmentBrowser" style="DISPLAY: none"><input id="AttachmentFile" type="file" runat="server">
                                          <asp:button id="AddAttachment" Runat="server" Text="Add"></asp:button></div>
                              </td>
                        </tr>
                        <tr id="DateTimeRow" runat="server">
                              <td id="DateTimeCell" onclick="config(1, 'DateTimeBrowser', this);" rowSpan="2">
                                    <div class="Header HeaderMid">Event Date/Time:<span class="Required"> *</span> <span id="DateTimeHelper" title="Events with multiple dates will show up as multiple entries.">
                                                ?</span>
                                    </div>
                                    <asp:listbox id="EventDateTimes" Runat="server"></asp:listbox><br>
                                    <asp:button id="RemoveDateTime" Runat="server" Text="Remove"></asp:button>
                                    <div id="DateTimeBrowser" style="DISPLAY: none"><iframe id="DateTimeFrame" src="selectDateTime.aspx" frameBorder="no" width="200" scrolling="no"
                                                height="250"></iframe>
                                    </div>
                              </td>
                        </tr>
                        <tr id="POCRow" runat="server">
                              <td id="POCCell" onclick="config(4, 'POCBrowser', this);" rowSpan="2">
                                    <div class="Header HeaderMid">POC(s):</div>
                                    <asp:listbox id="POCList" Runat="server"></asp:listbox><br>
                                    <asp:button id="RemovePOCs" Runat="server" Text="Remove Selected"></asp:button>
                                    <div id="POCBrowser" style="DISPLAY: none">Unit:
                                          <asp:dropdownlist id="POCUserRoot" Runat="server"></asp:dropdownlist><br>
                                          Search:
                                          <asp:textbox id="POCInputFilter" Runat="server"></asp:textbox><br>
                                          <asp:listbox id="POCUserList" Runat="server" SelectionMode="Multiple"></asp:listbox><br>
                                          <asp:button id="AddSelectedPOCs" Runat="server" Text="Add Selected User(s)"></asp:button></div>
                              </td>
                        </tr>
                        <tr id="LocationRow" runat="server">
                              <td id="LocationCell" onclick="config(2, '', this);" colSpan="2">
                                    <div class="Header HeaderTop">Location:<span class="Required"> *</span></div>
                                    <asp:textbox id="Location" Runat="server" MaxLength="255"></asp:textbox></td>
                        </tr>
                        <tr>
                              <td id="BodyCell" onclick="config(5, '', this);" colSpan="3" runat="server">
                                    <div class="Header HeaderMid">Message Body:<span class="Required"> **</span></div>
                                    <div align="center"><asp:textbox id="Body" Runat="server" Width="98%" Rows="9" TextMode="MultiLine"></asp:textbox></div>
                              </td>
                        </tr>
                        <tr>
                              <td id="Footer" align="center" colSpan="3">
                                    <asp:button id="FormSubmit" Runat="server" Text="Submit Item" />
                                    <div class="RequiredText"><span class="Required">*</span> - Required field.</div>
                                    <div class="RequiredText"><span class="Required">**</span> - Required when no
                                          attachments are added.</div>
                              </td>
                        </tr>
                  </table>
            </form>
      </body>
</HTML>


submit.aspx.cs:

private void Page_Load(object sender, System.EventArgs e)
{
      PageBody.Attributes.Add("onload", "loadTips();");
      if(!this.IsPostBack) PageBody.Attributes["onload"] += "document.getElementById('Subject').focus();";
      else PageBody.Attributes["onload"] += "postBackRecover();";
}

submit.css:

textarea, select
{
      width: 95%;
      margin: 0px 4px 0px 4px;
}

input, textarea, select
{
      font-size: 8pt;
}

.Highlight
{
      background-color: ffffcc;
}

.Required
{
      color: Red;
      font-family: Trebuchet MS;
      font-size: 8pt;
      font-weight: bold;
}

.RequiredText
{
      font-family: Trebuchet MS;
      font-size: 8pt;
      text-align: left;
}

#PageTitle
{
      font-size: 14pt;
}


#TopLinks
{
      padding: 2px 0px 2px 10px;
      font-weight:bold;
      font-size:10pt;
      font-style:italic;
      color:silver;
      border-bottom-width: 1px;
      border-right-width: 1px;
}

#SubjectCell
{
      width: 200px;
      height: 50px;
}

#TipCell
{
      background-color: white;
      width: 160px;
      border-width: 1px;
      border-top-width: 0px;
      padding: 4px 4px 0px 4px;
}

#Tips
{
      width: 100%;
      overflow: auto;      
      font-family: Trebuchet MS;
      font-size: 8pt;
}

#AttachmentCell
{
      width: 250px;
      border-right-width: 1px;
}

#AttachmentFile
{
      font-size:8pt;
}

#AttachmentBrowser
{
      margin: 5px 0px 0px 4px;
}

#DateTimeCell
{
      border-bottom-width: 1px;
}

#DateTimeHelper
{
      font-size: 8pt;
      text-align: right;
      text-decoration: underline;
      width: 63px;
      padding-bottom: 2px;
}

#RemoveDateTime
{
      margin: 0px 0px 4px 4px;
}

#LocationCell
{
      border-right-width: 1px;
}

#Location
{
      width: 100%;
      margin: 4px;
}

#POCCell
{
      border-right-width: 1px;
}

#POCList
{
      padding: 4px;
      
}

#RemovePOCs
{
      margin: 0px 0px 4px 4px;
}

#POCBrowser
{
      margin: 4px 4px 4px 4px;
      font-family: Trebuchet MS;
      font-size: 8pt;
}

#POCUserRoot
{
      width: 90%;
}

#POCInputFilter
{
      margin-left: 4px;
      width: 95%;
}

#POCUserList
{
      width: 90%;
}

#AddSelectedPOCs
{
      margin: 0px 0px 4px 2px;
}

#BodyCell
{
      border-right-width: 1px;
}

submit.js:

var sectionTips = new Array();

function loadTips()
{
      // 0 - Subject
      sectionTips[0] = 'Enter a short title for your item. DO NOT include any PoC, Date/Time or any other information in this field. This is a required field.';
      // 1- Event Date Time
      sectionTips[1] = 'Using the calendar control, select the date of your event. Then, using the dropdown lists below it, select the military time (local) of your event. Then, click the "Add Date/Time" button. If your event has multiple dates or times, repeat these steps as necessary. This is a required field.';
      // 2 - Location
      sectionTips[2] = 'Enter in the location your event will be taking place. BE SPECIFIC! For example, "HQ 8 AF Rear Parking Lot" or "On Base Gymnasium". This is a required field.';
      // 3 - Attachments
      sectionTips[3] = 'If you have any files associated with this item, click the "Browse..." button and locate the file on your computer, then click the "Add" button. Repeat as necessary for multiple files.';
      // 4 - POC(s)
      sectionTips[4] = 'Select a user or multiple users as a PoC. To speed up your search, you may choose the user\'s unit from the dropdown list. Additionally, you may narrow your search by typing the first few letters of the user\'s last and first names into the search box. For example, you may type "Smi Joe" if you are looking for someone named Joseph Smith. When your item is viewed, the selected users\' contact name, rank and contact information will automatically be displayed. If no POC is specified, this field will default to your name and contact information.';
      // 5 - Body
      sectionTips[5] = 'Type the text of your item in this textbox. Do not enter POC, Date/Time or Location information in this field! If left blank, you must have at least one attachment specified and the text of this field will default to "Please see attachment(s)". If no attachments are specified, this is a required field.';
}

function postBackRecover()
{
      var tipIndex = document.getElementById('cTip').value;
      var browserName = document.getElementById('cBrowser').value;
      var cell = document.getElementById('cCell').value;
      
      config(tipIndex, browserName, cell);      
}

function config(tipIndex, browserName, cell)
{
      showTip(tipIndex);
      
      if(browserName != '') toggleBrowser(browserName);
      else hideBrowser();
      
      highlightCell(cell);      
}

function toggleBrowser(name)
{
      hideBrowser();            
      
      document.getElementById('cBrowser').value = name;
      document.getElementById(name).style.display = 'block';                  
}

function hideBrowser()
{
      if(document.getElementById('cBrowser').value != '')
      {
            var browser = document.getElementById(document.getElementById('cBrowser').value);

            if(browser != null) browser.style.display = 'none';
            document.getElementById('cBrowser').value = '';
      }
}

function showTip(index)
{
      document.getElementById('Tips').innerText = sectionTips[index];
      document.getElementById('cTip').value = index;
}

function highlightCell(cell)
{
      var theCell = null;
      if(document.getElementById('cCell').value != '')
            theCell = document.getElementById(document.getElementById('cCell').value);

      if(theCell != null) theCell.className = '';
      theCell = cell;
      theCell.className += ' Highlight';
            
      document.getElementById('cCell').value = cell.id;
}
DanielSchafferAuthor Commented:
**deleted by raterus**
DanielSchafferAuthor Commented:
I think I just did something very stupid....  like putting my input fields outside the form....   :smack!:
raterusCommented:
yeah, was just about to mention that...actually already did
DanielSchafferAuthor Commented:
Yeah. You get points for dealing with my stupidity. Thanks.
raterusCommented:
Glad you worked it out!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.