Как можно сделать поля отображения формы HTML на основе заданного условия c? - PullRequest
Новая
       0

Как можно сделать поля отображения формы HTML на основе заданного условия c?

0 голосов
/ 05 марта 2020

У меня есть страница индекса, которая имеет форму с различными полями. Я создал целую утилиту со следующими полями, но теперь требования изменились. Я хочу, чтобы сначала отображались только поля «Тип контроллера» и «Тип теста», и при отправке данных этих двух полей я использую мой файл конфигурации для чтения и анализа файла YAML в одном из моих локальных каталогов. Может ли кто-нибудь помочь мне изменить страницу, чтобы она принимала эти два поля, а затем при отправке отображала оставшуюся часть формы? 

document.getElementById("tab2").innerHTML = "<h4> Chassis 2 Details </h4>" + document.getElementById("extra").innerHTML;
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/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>

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

  <fieldset>
    <input type='submit' name='save' value='Download File' />
  </fieldset>
</form>

1 Ответ

0 голосов
/ 05 марта 2020

добавлено ниже jquery код. надеюсь, это поможет вам. Спасибо 

$('.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...