What is the best way to make an HTML form show fields depending on certain conditions?

Initially, I created an index page containing a form with various fields. The utility was built to handle all the fields, but now there's been a change in requirements. What I need is for only the Controller Type and Test Type fields to be displayed first. Upon submitting data from these two fields, my configuration file will read and parse a YAML file located in one of my local directories. Can someone assist me in modifying the page so that it accepts these two fields initially, and upon submission, displays the remaining parts of the form?

document.getElementById("tab2").innerHTML = "<h4> Chassis 2 Details </h4>" + document.getElementById("extra").innerHTML;
... (remaining CSS styles) ... (remaining HTML code)

javascripthtmlcss

Answer №1

Below is the jQuery code I have added. Hopefully, it will be helpful for you. Thank you.

$('.btn-download').click(function() {

$('.extra-data').addClass('show') })

document.getElementById("tab2").innerHTML = "<h4> Chassis 2 Details </h4>" + document.getElementById("extra").innerHTML;

$('.btn-download').click(function() {
  $('.extra-data').addClass('show')
})
html,
html * {
  box-sizing: border-box;
  border-color: teal;
  font-family: Times;
  font-size: 19px;
}

html {
  background: #ABDCD6
}

input[type=button],
input[type=submit] {
  padding: 0.5rem;
  font-family: Times;
  font-size: 18px;
}

input[type=number] {
  width: 80%;
  height: 35px;
  font-size: 18px;
  display: inline-block;
}

input[type=text],
textarea,
select {
  font: 17px Calibri;
  width: 100%;
  padding: 9px;
  border: 1px solid rgb(19, 18, 18);
  border-radius: 4px;
  color: teal;
}

fieldset {
  border: none;
  padding: 5px;
  overflow: hidden;
  color: rgb(16, 8, 32);
  font-size: 20px;
  font-family: 'Times New Roman', Times, serif;
}

div {
  border: none;
  padding: 5px;
  overflow: hidden;
  color: rgb(16, 8, 32);
  font-size: 25px;
  font-style: initial;
  font-family: 'Times New Roman', Times, serif;
}

.container {
  display: inline-block;
}

#tab1:hover,
#tab2:hover {
  background: #ABDCD6;
}

#tab1btn:hover,
#tab2btn:hover {
  background: #006899;
}

#tab1Content,
#tab2Content {
  width: 500px;
  height: 100px;
  padding: 20px;
  border: 1px solid #B00098;
  border-radius: 10px;
  display: inline;
}

.tab button {
  color: #1e84d8;
  /*margin-bottom: 0 px;*/
  background-color: #e7f6ff;
  float: left;
  cursor: pointer;
  transition: 0.1s;
  width: 50%;
  border-top: 1px solid #ebebeb;
  border-left: 1px solid #ebebeb;
  border-right: none;
  border-bottom: 1px solid #20a3eb;
}

#tab1btn {
  border: 1px solid rgb(19, 18, 18);
  padding: 20px;
  overflow: hidden;
  color: rgb(16, 8, 32);
  font-size: 25px;
  font-style: initial;
  font-family: 'Times New Roman', Times, serif;
}

#tab1btn:focus {
  background-color: #f18973;
}

#tab2btn {
  border: 1px solid rgb(19, 18, 18);
  padding: 20px;
  overflow: hidden;
  color: rgb(16, 8, 32);
  font-size: 25px;
  font-style: initial;
  font-family: 'Times New Roman', Times, serif;
}

#tab2btn:focus {
  background-color: #f18973;
}

#extra {
  display: hidden;
}

.extra-data {
  display: none
}

.show {
  display: block !important
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--<script src="C:\Users\735908\Desktop\Start\jsapp\node_modules\esprima/esprima.js"></script>
    <script src="C:\Users\735908\Desktop\Start\jsapp\node_modules\js-yaml\dist/js-yaml.min.js"></script>
<script src="testfile.js"></script>-->
<script src="testfile.js"></script>

<!-- insert templated additional details here -->

<form name='myForm'>

  <fieldset>
    <label for='Controller Type'><strong>Controller Type </strong></label>
    <select name='controller' id="Controller" required>
      <option value=""> - Select The Controller - </option>
      <option data-extra=true value='RAID'>RAID
        <option data-extra=true value='EBOD'>EBOD
          <option data-extra=true value='AP'>AP
    </select>
  </fieldset>

  <fieldset>
    <label for='Test Type'><strong>Test Type</strong></label>
    <select name='test' id="Test" required>
      <option value=""> - Select The Test - </option>
      <option data-extra=true value='BFT'>BFT
        <option data-extra=true value='CTO'>CTO
          <option data-extra=true value='RAID Generic'>RAID Generic
            <option data-extra=true value='Port Check'>Port Check
              <option data-extra=true value='FW Generic'>FW Generic
                <option data-extra=true value='EBOD Generic'>EBOD Generic
    </select>
  </fieldset>
  <div class="extra-data">
    <fieldset>
      <label for='Protocol Type'><strong> Protocol Type</strong></label>
      <select name='protocol' id="abc" onchange="EnableDisableTextBox(this);" required>
        <option value=""> - Select The Protocol - </option>
        <option data-extra=true value='SAS'>SAS</option>
        <option data-extra=true value='iSCSI'>iSCSI</option>
        <option data-extra=true value='FC'>FC</option>
      </select>
    </fieldset>

    <fieldset>
      <label for='Chasis Input'><strong>Number of Chasis</strong></label>
      <select id="tabsToDisplay" input type='text' name='chassis' required>
        <option value=""> - Number of Chasis - </option>
        <option data-extra=true value='1'>1
          <option data-extra=true value='2'>2
      </select>
    </fieldset>

    <fieldset>
      <label for='Number of Controllers'><strong>Number of Controllers</strong></label>
      <select input type='text' name='ctrls' onchange="EnableDisableDropDown(this);" required>
        <option value=""> - Number of Controllers - </option>
        <option data-extra=true value='1'>1
          <option data-extra=true value='2'>2
      </select>
    </fieldset>

    <fieldset>
      <label for='IP Address'><strong> IP Address </strong></label>
      <input type='text' name='ip' placeholder='Enter your IP address' required />
    </fieldset>

    <div class="container">
      <label for='Left Outlets'><strong>Left Outlets </strong></label>
      <input type='number' name='lo' placeholder='Enter left outlets' required />
    </div>

    <div class="container">
      <label for='Right Outlets'><strong>Right Outlets</strong></label>
      <input type='number' name='ro' placeholder='Enter right outlets' required />
    </div>

    <div class="tab">
      <button type="button" id="tab1btn" value="Chasis_1">Chasis 1</button>
      <button type="button" id="tab2btn" value="Chasis_2">Chasis 2</button>
    </div>

    <div id="tab1" class="tabcontent">
      <h4>Chasis 1 Details</h4>
      <div id="extra" style="display:hidden;">

        <h6>Additional Details Required for Controller A</h6>
        <label for='Controller_ID1'>Controller_ID:</label><input type="text" class="CONTROLLER_ID" value="A" id='Controller_ID1' disabled="disabled" />
        <label for='iSCSI1'>iSCSI IPs:</label><input class="iSCSI_IP" type='text' name='iSCSIip1' id="ip1" placeholder='Enter iSCSI ips' disabled="disabled" />
        <label for='HBA_Ports_A'>HBA_Ports:</label><input class="hba_ports" type='text' id="hba" name='hba_ports1' placeholder='Enter the HBA Ports' disabled="disabled" />
        <label for='MC_IP_A'>MC_IP:</label><input class="mc_ip" type='text' name='extra_ip1' id='mc_ip' placeholder='Enter the MC_IP' />
        <label for='MC_Netmask_A'>MC_Netmask:</label><input class="Netmask_IP" type='text' id='netmask_ip1' placeholder='Enter the MC_Netmask' />
        <label for='MC_Gateway_A'>MC_Gateway:</label><input class="Gateway_IP" type='text' id='gateway_ip1' placeholder='Enter the MC_Gateway' />
        <label for='MC_A'>MC:</label><input class="RBOD_MC" type='text' id='rbod_mc1' placeholder='Enter the MC Port' />
        <label for='SC_A'>SC:</label><input class="RBOD_SC" type='text' id='rbod_sc1' placeholder='Enter the SC Port' />
        <label for='FU_A'>FU:</label><input class="RBOD_FU" type='text' id='rbod_fu1' placeholder='Enter the FU Port' />
        <label for='EC_A'>EC:</label><input class="RBOD_EC" type='text' id='rbod_ec1' placeholder='Enter the EC Port' />
        <br>
        <br>
        <h6>Additional Details Required for Controller B</h6>
        <label for='Controller_ID1'>Controller_ID:</label><input type="text" class="CONTROLLER_ID" value="B" id='Controller_ID' required />
        <label for='iSCSI2'>iSCSI IPs:</label><input class="iSCSI_IP" type='text' name='iSCSIip2' id="ip2" placeholder='Enter iSCSI ips' disabled="disabled" />
        <label for='HBA_Ports'>HBA_Ports:</label><input class="hba_ports" type='text' id="hba1" placeholder='Enter the HBA Ports' disabled="disabled" />
        <label for='MC_IP'>MC_IP:</label><input class="mc_ip" type='text' id='mcip' name='extra_ip' placeholder='Enter the MC_IP' />
        <label for='MC_Netmask'>MC_Netmask:</label><input class="Netmask_IP" type='text' id="netmaskip" placeholder='Enter the MC_Netmask' />
        <label for='MC_Gateway'>MC_Gateway:</label><input class="Gateway_IP" type='text' id="gatewayip" placeholder='Enter the MC_Gateway' />
        <label for='MC'>MC:</label><input class="RBOD_MC" type='text' name='rbod_mc' placeholder='Enter the MC Port' id="rbodmc" />
        <label for='SC'>SC:</label><input class="RBOD_SC" type='text' name='rbod_sc' placeholder='Enter the SC Port' id="rbodsc" />
        <label for='FU'>FU:</label><input class="RBOD_FU" type='text' name='rbod_fu' placeholder='Enter the FU Port' id="rbodfu" />
        <label for='EC'>EC:</label><input class="RBOD_EC" type='text' name='rbod_ec' placeholder='Enter the EC Port' id="rbodec" />

      </div>
    </div>

    <div id="tab2" class="tabcontent">
      <h4>Chasis 2 Details</h4>
      <div id="extra" style="display:hidden;">
      </div>
    </div>
  </div>
  <fieldset>
    <input type='submit' name='save' value='Download File' class="btn-download" />
  </fieldset>
</form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The component cannot be created using shallowMount because vm.$refs['VTU_COMPONENT'] is not defined

Not sure if it's a bug or if I'm making a mistake. I attempted to use shallowMount to mount my main App component, but it doesn't seem to work. The error message I receive is: Cannot set properties of undefined (setting 'hasOwnProper ...

javascriptvue.jsjestjsvue-test-utils

Creating Custom Styles with Polymer for <content> Elements

Seeking help with styling using the ::content selector and custom CSS properties. Any insight would be appreciated! To simplify, I have a Polymer component utilizing a content tag that will always contain a paper-input: <template> <style> ...

csspolymershadow-dom

Numerous perspectives within an angular.js application

Issue I'm currently working on creating a product list with the following initial features: Server-side pagination Server-side filtering I am facing several challenges with my current setup, but the main issue is that I can't figure out how to ...

javascriptangularjs

Prevent the Focus on Submit Button in CSS

Whenever a text field is focused in Opera, the submit button ends up with an unsightly black border. A screenshot clearly shows this issue. At the bottom of the image, you can see how the textarea is focused and the submit button looks unappealing. Is th ...

cssfocusstyling

What's the purpose of clicking on the page number before accessing the information?

After successfully rendering filtered products, I encountered an issue with implementing pagination. The pagination is functional but requires clicking on a page number before it displays correctly. Even though I have included a loading state, it's no ...

javascriptreactjsmaterial-uimern

The function body.getReader() doesn't seem to be functioning properly on Ubuntu

I am currently in the process of deploying a project on Ubuntu Server 22.04. The tech stack I am using is Next.js + Nest.js. I have come across an issue where my Fetch API behaves differently - on my localhost (macOS) everything works smoothly and I rece ...

javascriptnode.jsubuntunext.jsnest

Styling CSS: Create circular images with dynamic text positioning or resizing on screens larger than 768px

I'm struggling to figure out how to create a circular profile picture on a background image that remains responsive and maintains its position across different screen sizes. Currently, I've been using fixed margin values to adjust the position, ...

cssresponsive-designbootstrap-4

The presence of a PDF document within an iframe is causing overlapping with another element

I am facing an issue on a screen where I have to display pdf or html content using an iframe. To show the PDF or HTML, I am using an iframe and then displaying a popup when necessary to cover the entire screen. This setup works perfectly in most browsers. ...

htmlinternet-explorerpdfiframe

What is the best way to dynamically add getJSON's data to a div whenever the loadmore button is clicked?

When a page loads, my getJSON function displays its output in a div called myDiv. Now, I am looking to add a button at the bottom of the page. When the user clicks this button, I want to trigger another call to getJSON. Each time the button is clicked, I ...

javascriptjqueryhtmlajaxgetjson

Show a table containing dynamic information, featuring 10 rows for each column. The header should be present for each additional column that is added

I have incoming dynamic data that I need to display in columns, with 10 records in each row. Currently, I am able to display 10 rows as expected. However, I want the header to repeat each time an additional column is added. How can I achieve this using the ...

htmlcssdynamicbootstrap-4flexbox

Having trouble setting up Strongloop for Loopback v.3 on macOS Catalina?

I'm currently in the process of understanding Loopback v3 (which is being utilized on a project site where I'm actively involved), and I'm attempting to follow the tutorials provided. One of the crucial steps involves installing Strongloop ...

javascriptnode.jsnpmstronglooploopback

What is the best way to extract the ID of an element that triggers an OnChange event?

Just a heads up: The solution to my problem ended up being CSS code that was triggered by clicking on a widget. Once I realized it was CSS, along with the widget name and hover action, I was able to handle it successfully. Previous question before the PS ...

javascriptdomselenium-webdriverfirebuggoogle-chrome-devtools

What is the reason behind the cautionary note associated with Vue's provide and inject functionality?

Considering incorporating Vue's new provide/inject feature into a project, I came across a warning in the official Vue documentation: The documentation states that provide and inject are primarily intended for advanced plugin/component library usage ...

javascriptvue.jsvuejs2

Steps to access a Windows folder after clicking on a link within an HTML page using Asp.net

I attempted to use the following code : <a href="file:///C:\Programs\sort.mw">Link 1</a> <a href="file:///C:\Videos\lecture.mp4">Link 2</a> Unfortunately, this code does not work in Google Chrome or Firefox bro ...

htmlcssasp.net-mvc-4

How can I fill an HTML table with data stored in a JavaScript array of arrays?

I am struggling to populate an HTML table with data formatted as an array of arrays. Despite my efforts in writing the code, the data is only showing up in a single row. I have tried mapping the data in a nested loop but I am unable to implement it correct ...

javascriptarraysreactjscreate-react-app

When setting up columns in a MUI DataGrid, it's important to remember that each field must have a unique name to avoid any conflicts. Having

I am currently working on a DataGrid project where I aim to display the values of ready_by and name. Here is an image for reference: https://i.stack.imgur.com/3qZGa.png In my code configuration, the setup looks like this: (specifically focusing on the la ...

javascriptreactjsreact-reduxmaterial-uidatagrid

Issue with justify-content in Bootstrap 5 still unresolved

Currently working with Bootstrap 5 and have set up 4 cards. My goal is to position the second card on the left side. I've applied the class justify-content-xl-start to the card, however, it doesn't seem to be functioning as expected. I also attem ...

htmlcsstwitter-bootstrapbootstrap-5

Navigating the component class in Angular to access the values of an observable object

When I send an object with two values - an array and a simple variable - it is received in another component using observable. From there, I access the object values directly in the HTML template file. Below is the code snippet: Home Component: // Home ...

javascriptangular

The Mongoose function findbyIdAndRemove is currently not working properly when triggered on the client-side

I have a specific route in my app that uses the mongoose method findByIdAndRemove. Strangely, when I test this route using postman, it successfully deletes documents from my database. However, when I try to call this method from my client-side JavaScript f ...

javascriptnode.jsmongoose

Basic form submission versus using an Ajax loader mechanism

Handling forms can be done in various ways. One way is to submit the form and retrieve variables in PHP, while another method involves sending data with AJAX. During this process, a dialog can be displayed with information about processing the data, along ...

phphtmlajaxjquery-uijquery