How do I make different HTML forms show up based upon a selection box?

user_13919390 0
Viewed 208

I'm trying to make a custom calculator that will have a select box at the top of the page. The select box will have the options: Input, Output and Summary. Based upon what option is clicked, I would like the corresponding HTML form to show up. Right now my HTML looks something like this:

<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
    <link rel="stylesheet" href="styler.css">
</head>
<body>
  <form name = "Input">
    <!-- All of the input boxes and a "Calculate" button -->
  </form>
  <form name = "Output">
    <!-- All of the output boxes -->
  </form>
  <form name = "Summary">
    <!-- A few more output boxes -->
  </form>

(I have javascript below for the "calculate" button)

How do I make a select box with those three options that will display each of those forms when that box is selected (and only the selected boxes form)?

Also, I'm working in Webstorm and I would rather not deal with importing jquery. It's also worth noting that all three of the forms need to be in the same file because the calculate function pulls data from the inputs and returns it into the outputs.

html javascript
2 Answers

you can do that:

const formSelect = document.getElementById('form-selector')
  ,   myForms    = document.getElementById('my-forms')
  ;
formSelect.oninput=()=>{ myForms.className = `f-${formSelect.value}` }
#my-forms form { display:none }
#my-forms.f-Input form[name=Input],
#my-forms.f-Output form[name=Output],
#my-forms.f-Summary form[name=Summary] { display:block }
<select id="form-selector">
  <option value="_" selected disabled>pick one !</option>
  <option value="Input">Input</option>
  <option value="Output">Output</option>
  <option value="Summary">Summary</option>
</select>

<div id="my-forms">
  <form name="Input">
    <!-- All of the input boxes and a "Calculate" button -->
    <h4> form Input</h4>
  </form>
  <form name="Output">
    <!-- All of the output boxes -->
    <h4> form Output</h4>
  </form>
  <form name="Summary">
    <!-- A few more output boxes -->
    <h4> form Summary</h4>
  </form>
</div>

user_106690100

first hide all with a class of "hidden", assign to it display:none, then give each one an id, make a select input with options whose values correspond to that id (of each form ), then on the change event for the select, add the hidden class to all forms (perhaps make an array of id values), then take it away from the one with the id of the current option value. so:

formIDs=[
   "Input",
   "Output",
   "Summary"
]
hideEm()
s.onchange=e=>{
  hideEm()
  if(window[s.value]){
    window[s.value]
    .classList.remove("h")
  }
}

function hideEm() {
  formIDs.forEach(x=>{
    var f = document.getElementById(x)
    if(f){
      if(!f.classList.contains("h")) {
        f.classList.add("h")
      }
    }
  })
}
.h{
  display :none
}
<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
    <link rel="stylesheet" href="styler.css">
</head>
<body>
    <form id = "Input">
 All of the input boxes and a "Calculate" button 
</form>
<form id = "Output">
All of the output boxes
</form>
<form id = "Summary">
A few more output boxes
</form>
<select id=s>
<option value="nothin">nothin</option>
<option value="Input">Input</option>
<option value="Output">Output</option>
<option value="Summary">Summary</option>
</select>

user_20168310
Related