Solved: ViewState with JavaScript/Hidden input fields

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.

DanielSchaffer

ASKER

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.

raterus

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".

DanielSchaffer

ASKER

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">

DanielSchaffer

ASKER

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">
            
            <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;
}

DanielSchaffer

ASKER

**deleted by raterus**

DanielSchaffer

ASKER

I think I just did something very stupid.... like putting my input fields outside the form.... :smack!:

raterus

yeah, was just about to mention that...actually already did

DanielSchaffer

ASKER

Yeah. You get points for dealing with my stupidity. Thanks.

raterus

Glad you worked it out!