How to setup a multi-department form using JavaScript


Tags: javascript,html5,css3

Problem :

I"m hoping there is a way to do this. I'm creating a webpage in HTML5 and JavaScript that three different departments will use in order to log calls. I have three buttons one for each department. I was able to make it load a blank page, then when a button is clicked it displays the HTML form for that specific department. I used code here I found on another question.

The issue I'm running into is when the form is submitted, it switches the page back to the blank default. How do I make it keep the previous department form that was last used?

In other words if department 1 is displayed and the user clicks submit, it reloads department 1, if they are using department 2 form and they click submit, it reloads department 2 form, etc for department 3.

Right now they have to reclick their department to reload the form. I tried using things like onsubmit, or on click to do so but it won't trigger.

Here is my code:

HTML

<div class="department">
   <input type="button" class="DeptTitle" value="Department 1" onClick="return changeDept1()" />
   <input type="button" class="DeptTitle" value="Department 2" onClick="return changeDept2()" />
   <input type="button" class="DeptTitle" value="Department3" onClick="return changeDept3()" />
</div>
<div class="body" id="default"></div>
<div class="body" id="Dept1"><form id="calllog" action="" method="post"><input type="Submit" value="Submit" /></form></div>
<div class="body" id="Dept2"><form id="calllog" action="" method="post"><input type="Submit" value="Submit" /></form></div>
<div class="body" id="Dept3"><form id="calllog" action="" method="post"><input type="Submit" value="Submit" /></form></div>

Here is my CSS that I used to hide and show the departments

/* Different Departments, hides all but default */

#default {display: block;}
#Dept1 {display: none;}
#Dept2 {display: none;}
#Dept3 {display: none;}

Lastly here is the JavaScript code that I use from another answer here to switch between the different forms.

function changeDept1() {
document.getElementById('default').style.display = "none"; // hide default div tag
document.getElementById('Dept1').style.display = "block"; // show Dept1 Form div tag
document.getElementById('Dept2').style.display = "none"; // hide Dept2 Form div tag
document.getElementById('Dept3').style.display = "none"; // hide Dept3 div tag
}

function changeDept2() {
document.getElementById('default').style.display = "none"; // hide default div tag
document.getElementById('Dept1').style.display = "none"; // hide Dept1 Form div tag
document.getElementById('Dept2').style.display = "block"; // show Dept2 Form div tag
document.getElementById('Dept3').style.display = "none"; // hide Dept3 div tag
}

function changeDept3() {
document.getElementById('default').style.display = "none"; // hide default div tag
document.getElementById('Dept1').style.display = "none"; // hide Dept1 Form div tag
document.getElementById('Dept2').style.display = "none"; // hide Dept2 Form div tag
document.getElementById('Dept3').style.display = "block"; // show Dept3 div tag
}

The above works to change between forms, just that it won't keep it once the form submits. I tried adding onsubmit to both the submit button and the form itself to get it to redisplay the form. The script I tried to use is here:

function showDept1 () {
document.getElementById('Dept1').style.display = "block"; // show Dept1 Form div tag
}

I was only testing with the first department as a test to keep it from disappearing when submitted.

Also is there a way to make the form reset everytime it's switched out. If I start to fill out one form, then switch to another department then back again, the first form is still filled out. Not sure if these two issues would be related.

Thanks in advance everyone.



Solution :

Skip the JavaScript and just use named anchors.

For example, I have a CodePen with the bare minimum code you will need: http://codepen.io/aardrian/pen/OPgmPe

If you want to see it in action, here it is showing each of the three options (you can obviously tweak this to use elements other than a list):

You can then just post each form (since you already have three <form> elements) to the URL with the appropriate named anchor, which are basically the URLs above.

There is no JavaScript.

The entirety of the CSS:

.expando {
  display: none;
}

.expando:target {
  display: block;
}

The entirety of the HTML (with the content):

  <ul>
    <li><a href="#Expando1">The Tick</a>
      <ul class="expando" id="Expando1">
        <li>Has superhuman strength and mass;</li>
        <li>Is nigh-invulnerable; </li>
        <li>Has powers that increase as the situation becomes more dramatic;</li>
        <li>Does not seem to require oxygen;</li>
        <li>Cannot keep his balance if his antennae are removed.</li>
      </ul>    
    </li>
  </ul>

  <ul>
    <li><a href="#Expando2">Sewer Urchin</a>
      <ul class="expando" id="Expando2">
        <li>Has slime &amp; stench secreting spikes on his suit enable him to stick on any surface;</li>
        <li>Is equipped with lemon grenades, butter shooters, bars of soap and other various apparel to aid him in his underground endeavors; </li>
        <li>Has an oxygen tank and mask which enable him to breath in the thickest of sewer sludge;</li>
        <li>Has a submarine that he garbage-picked.</li>
      </ul>    
    </li>
  </ul>

  <ul>
    <li><a href="#Expando3">Arthur</a>
      <ul class="expando" id="Expando3">
        <li>Has a suit that enables wobbly flight;</li>
        <li>Has an accounting background.</li>
      </ul>    
    </li>
  </ul>

    CSS Howto..

    How to add and use jquery and css file in joomla module..?

    How to transform (move whole child dives) div to max width with css?

    How to create dropdown navigationbar without float?

    How to make and use LESS templates?

    jqueryUI custom button not showing up

    How can I make it so that my logo on the top left of the page lines up with the text underneath it?

    How to increase the gap between text and underlining in CSS

    How to remove/add jQueryUI CSS theme from specific element?

    How to make dropdown list unselectable?

    How to change overlay whole div by an image via CSS

    How to set the select to have the width of the selected option

    how do i make the “box-shadow” to the whole div

    How to structure selectors in css when using specificity?

    how to setup capybara-webkit to test ajax calls and get screenshots(html with css and javascript loaded)

    How to make a background text appear under youtube video?

    how to override theme in primefaces on Dialog window and set user define CSS

    how to give space between tr tag and divide by | in html

    How to add a google map icon to this code?

    How to hide a div from another div using CSS

    CSS how to align one word left and another word right within the same div?

    How to figure out the CSS bugs?

    How to remove unused CSS but keep comments?

    CSS: How to set up gradient background cross browser (only missing IE8 and IE9)

    Show div when hover another div using only css

    how to make css curve box with gradient & shadow

    How to align image to top left of div

    How to “mark” a UL/LI nav item as “active” based on click?

    jQuery, CSS: Two divs, how can I make them “show”next to each other?

    Is my code HTML and CSS proper, and how do I add a hover effect to just the text in the nav bar?

    How to find a div / panel in repeater and apply css?