Member Avatar for greenbluekidz

I have been asked to create a webform for my company to replace an excel document we use. Basically it is an interval report that gets filled out and emailed to all upper management. The webform layout is the same as what we would have used in Excel. The whole idea is just to standardize the information that is being filled out.

I have the layout of the form completed. We send the reports out in intervals during the day - 9AM , 1PM, 5PM, 9PM, and EOD. What I am trying to setup is that when one of the reporting staff chooses an interval, only text boxes relating to that interval are shown. The rest remain hidden. Is it possible to do this?

I am not a programmer at all - I graduated from a program two years ago and my area of interest was Java. My current role is a Schedule Analyst - I work with numbers all day, not code. Our main programmer is on a leave of absence and that is how I got this project.

  • 2 Contributors
  • 2 Replies
  • 1K Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by greenbluekidz
bouali commented: bouali +0
Member Avatar for Taywin

There are a lot of ways to do what you are explaining. It depends on how you design & layout... Some may use JQuery, but I prefer primitive JavaScript. :P Below is a simple example...

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style type="text/css">
  div.hideContent {
    display: none;
    visibility: hidden;
  }
  div.showContent {
    display: block;
    /* ignore visibility property, no need to be explicit */
  }
  div.commonContent {
    position: absolute;
    top: 0px;
    left: 0px;
  }
  </style>

  <script type="text/javascript">
  function showContent(selectObject) {
    // selectObject is a select element which is passed by using "this" argument
    // didn't check for value or object, so it is not flexible
    var selectedIndex = selectObject.selectedIndex;
    var tmpElem
    // skip the 0 index because it has no associated block to display
    for (var i=1; i<selectObject.options.length; i++) {
      tmpElem = document.getElementById(selectObject.options[i].value);
      if (i==selectedIndex) {  // show the element
        tmpElem.className = tmpElem.className.replace("hideContent", "showContent")
      }
      else {  // hide it
        tmpElem.className = tmpElem.className.replace("showContent", "hideContent")
      }
    }
  }
  </script>
  </head>

  <body>
  Select Time:
  <select id="time_interval" name="time_interval" onchange="showContent(this)">
  <option value=0>Select A Time</option>
  <option value="9oclock">9AM</option>
  <option value="13oclock">1PM</option>
  <option value="17oclock">5PM</option>
  <option value="21oclock">9PM</option>
  <option value="24oclock">EOD</option>
  </select>

  <br><br>

  <!-- this div is to hold all div inside -->
  <!-- each div inside will be on top of each other -->
  <div style="position:relative;width:100%">
    <div id="9oclock" name="9oclock" class="commonContent hideContent">
    <b>Content of 9AM!!!</b>
    </div>

    <div id="13oclock" name="13oclock" class="commonContent hideContent">
    <b>Content of 1PM!!!</b><br>
    Surpriiiiise.
    </div>

    <div id="17oclock" name="17oclock" class="commonContent hideContent">
    <b>Content of 5PM!!!</b><br>
    One more line<br>
    And one more...
    </div>

    <div id="21oclock" name="21oclock" class="commonContent hideContent">
    <b>Content of 9PM!!!</b> Short one here
    </div>

    <div id="24oclock" name="24oclock" class="commonContent hideContent">
    <b>Content of End of Day!!!</b><br>
    Night night.
    </div>
  </div>
  </body>
</html>
Edited by Taywin
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.