mit Dropdown Menü verschiedene Formularfelder freischalten

matze511

New member
Hallo liebe JS User,

könnte mir bitte jemand weiter helfen, nach langer Suche im Inet bin ich endlich auf einen Codesnipsel gestoßen. Nur weiß ich nicht ob das der richtige Anfang ist, da ich einfach nicht weiter komme. Ich bin kein JS User, Html und PHP ist eher für mich ein Ding und da bin ich auf kein Profi eher nur Heimanwender.
Ich möchte gern das in meinem Formular einzelne Felder freigeschaltet werden, je nach Menüpunkt, da die aben nicht Serverseitig passieren kann bin ich gezwungen JS zu verwenden.
Hier der Code für das Formular:
HTML:
<body id="page" class="off-canvas slide-nav">
    <div class="container">
     <div class="row">
          <section role="main">
            <h4>Eingabe der vorhandenen Maße!</h4>
              <div class="row">
                  <div class="twelve columns">
                        
<fieldset>
 <legend>bitte bekannte Maße eingeben</legend>

  <table>
   <form action="berechnung.php" method="post" enctype="multipart/form-data" name="form1" >
    <tr>
        <td><label for="wasistgegeben">Was ist gegeben: </label></td>
        <td><select name="wasistgegeben" id="wasistgegeben">
            <option value="--"> -- </option>
            <option value="traufhöVordachNeigung">Grdmaß-Traufhö-Vordach-Neigung</option>
            <option value="firsthöTraufhöVordach">Grdmaß-Firsthö-Traufhö-Vordach</option>
            <option value="vordachNeigungOKFußpf">Grdmaß-Vordach-Neigung-OKFußpf</option>
            <option value="traufhöVordachOKFußpf">Grdmaß-Traufhö-Vordach-OKFußpf</option>
            <option value="traufhöNeigungOKFußpf">Grdmaß-Traufhö-Neigung-OKFußpf</option>
            <option value="firsthöTraufhöNeigung">Grdmaß-Firsthö-Traufhö-Neigung</option>
            <option value="firsthöTraufhöOKFußpf">Grdmaß-Firsthö-Traufhö-OKFußpf</option>
            <option value="traufhöNeigungOKFiPf">Grdmaß-Traufhö-Neigung-OKFiPf</option>
            <option value="firsthöVordachNeigung">Grdmaß-Firsthö-Vordach-Neigung</option>
            <option value="firsthöVordachOKFußpf">Grdmaß-Firsthö-Vordach-OKFußpf</option>
            <option value="vordachNeigungOKFiPf">Grdmaß-Vordach-Neigung-OKFiPf</option>
            <option value="vordachOKFußpfOKFiPf">Grdmaß-Vordach-OKFußpf-OKFiPf</option>
            </select></td>
    </tr>
    <tr>   
        <td><label for="profil"><h6><u>Profil:</u></h6></label></td>
    <td><label for="profil"><h6><u>in m mit 3 Stellen nach Komma</u></h6></label></td>
    <td></td>
    <td></td>
    </tr>
    <tr>   
        <td><label for="basicMeasurement">Grundmaß:</label></td>
        <td><input name="basicMeasurement" id="basicMeasurement" type="text" inputmode="numeric" min="0" pattern="\d+(,\d{1,3})?" size="30" maxlength="40" placeholder="5,00" readonly="readonly" /></td>
        <td><label for="roofPitch">Dachneigung:</label></td>
        <td><input name="roofPitch" id="roofPitch" type="text" inputmode="numeric" pattern="\d+(,\d{1,3})?" size="30" maxlength="50" placeholder="30,0" readonly="readonly" /></td>
    </tr>
    <tr>   
        <td><label for="roofOverhang">Dachüberstand:</label></td>
        <td><input name="roofOverhang" id="roofOverhang" type="text" pattern="\d+(,\d{1,3})?" size="30" maxlength="50" placeholder="0,50" readonly="readonly" /></td>   
        <td><label for="eaveHeight">Traufhöhe +/-:</label></td>
        <td><input name="eaveHeight" id="eaveHeight" type="text" pattern="\d+(,\d{1,3})?" size="30" maxlength="50" placeholder="3,000" readonly="readonly" /></td>
    </tr>
    <tr>   
        <td><label for="ridgeHeight">Firsthöhe:</label></td>
        <td><input name="ridgeHeight" id="ridgeHeight" type="text" pattern="\d+(,\d{1,3})?" size="30" maxlength="50" placeholder="3,007" readonly="readonly" /></td>
        <td><label for="eavePurlinsReturn">Fußpfettenrücksprung:</label></td>
        <td><input name="eavePurlinsReturn" id="eavePurlinsReturn" type="text" pattern="\d+(,\d{1,3})?" size="30" maxlength="50" placeholder="0,060"/></td>
    </tr>
    <tr>   
        <td><label for="topEavePurlin">OK Fußpfette:</label></td>
        <td><input name="topEavePurlin" id="topEavePurlin" type="text" pattern="\d+(,\d{1,3})?" size="30" maxlength="50" placeholder="0,120" readonly="readonly" /></td> 
        <td><label for="topRidgePurlin">OK Firstpfette:</label></td>
        <td><input name="topRidgePurlin" id="topRidgePurlin" type="text" pattern="\d+(,\d{1,3})?" size="30" maxlength="50" placeholder="2,799" readonly="readonly" /></td>
    </tr>
    <tr>   
        <td><label for="roomHeightCarcass">Raumhöhe Rohbau:</label></td>
        <td><input name="roomHeightCarcass" id="roomHeightCarcass" type="text" pattern="\d+(,\d{1,3})?" size="30" maxlength="50" placeholder="2,650"/></td>
    </tr>
       </form>
      </table>
     </fieldset>
</div>
</div>
</section>


</div>

      <span class="content">
        <footer class="site-footer row" role="contentinfo">
      </span>
      </footer>
      </div>
      




</body>

und hier das JS was ich gefunden hab:
Javascript:
document.addEventListener('DOMContentLoaded', function () {

    document.form1.wasistgegeben.addEventListener('change', CheckAuswahl);
 
    function CheckAuswahl () {
        var menu = document.form1.wasistgegeben;
        document.querySelector('output').innerHTML = menu.options[menu.selectedIndex].value;       
    }

});

Danke schonmal für eventuelle Hilfen!

LG Matze
 
Hallo liebe Gemeinde,

könnte mal bitte jemand drüber gucken ob das so okay wäre oder ob man das noch kürzer fassen könnte?
Javascript:
  document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('--').selected = true;
    document.querySelector('#auswahl').addEventListener('click', weiter);
 
    function weiter() {     
      if (document.querySelector("#traufhöVordachNeigung").selected  == true) {
        document.querySelector("#grundmaß").removeAttribute('disabled');
        document.querySelector("#traufhöhe").removeAttribute('disabled');
        document.querySelector("#dachüberstand").removeAttribute('disabled');
        document.querySelector("#dachneigung").removeAttribute('disabled');
        document.querySelector("#firsthöhe").setAttribute('disabled','disabled');
        document.querySelector("#okFußpfette").setAttribute('disabled','disabled');
        document.querySelector("#okFirstpfette").setAttribute('disabled','disabled');
      }
      if (document.querySelector("#firsthöTraufhöVordach").selected  == true) {
        document.querySelector("#grundmaß").removeAttribute('disabled');
        document.querySelector("#firsthöhe").removeAttribute('disabled');
        document.querySelector("#traufhöhe").removeAttribute('disabled');
        document.querySelector("#dachüberstand").removeAttribute('disabled');
        document.querySelector("#dachneigung").removeAttributeAttribute('disabled');
        document.querySelector("#okFußpfette").setAttribute('disabled','disabled');
        document.querySelector("#okFirstpfette").setAttribute('disabled','disabled');
      }
      if (document.querySelector("#vordachNeigungOKFußpf").selected  == true) {
        document.querySelector("#grundmaß").removeAttribute('disabled');
        document.querySelector("#okFußpfette").removeAttribute('disabled');
        document.querySelector("#dachüberstand").removeAttribute('disabled');
        document.querySelector("#dachneigung").removeAttribute('disabled');
        document.querySelector("#firsthöhe").setAttribute('disabled','disabled');
        document.querySelector("#traufhöhe").setAttribute('disabled','disabled');
        document.querySelector("#okFirstpfette").setAttribute('disabled','disabled');
      }   
        if (document.querySelector("#traufhöVordachOKFußpf").selected  == true) {
        document.querySelector("#grundmaß").removeAttribute('disabled');
        document.querySelector("#traufhöhe").removeAttribute('disabled');
        document.querySelector("#dachüberstand").removeAttribute('disabled');
        document.querySelector("#okFirstpfette").removeAttribute('disabled');
        document.querySelector("#firsthöhe").setAttribute('disabled','disabled');
        document.querySelector("#dachneigung").setAttribute('disabled','disabled');
        document.querySelector("#okFirstpfette").setAttribute('disabled','disabled');
      }
      if (document.querySelector("#traufhöNeigungOKFußpf").selected  == true) {
        document.querySelector("#grundmaß").removeAttribute('disabled');
        document.querySelector("#traufhöhe").removeAttribute('disabled');
        document.querySelector("#okFußpfette").removeAttribute('disabled');
        document.querySelector("#dachneigung").removeAttribute('disabled');
        document.querySelector("#firsthöhe").setAttribute('disabled','disabled');
        document.querySelector("#dachüberstand").setAttribute('disabled','disabled');
        document.querySelector("#okFirstpfette").setAttribute('disabled','disabled');
      }
      if (document.querySelector("#firsthöTraufhöNeigung").selected  == true) {
        document.querySelector("#grundmaß").removeAttribute('disabled');
        document.querySelector("#traufhöhe").removeAttribute('disabled');
        document.querySelector("#firsthöhe").removeAttribute('disabled');
        document.querySelector("#dachneigung").removeAttribute('disabled');
        document.querySelector("#dachüberstand").setAttribute('disabled','disabled');
        document.querySelector("#okFußpfette").setAttribute('disabled','disabled');
        document.querySelector("#okFirstpfette").setAttribute('disabled','disabled');
      }
      if (document.querySelector("#firsthöTraufhöOKFußpf").selected  == true) {
        document.querySelector("#grundmaß").removeAttribute('disabled');
        document.querySelector("#traufhöhe").removeAttribute('disabled');
        document.querySelector("#firsthöhe").removeAttribute('disabled');
        document.querySelector("#okFußpfette").removeAttribute('disabled');
        document.querySelector("#dachneigung").setAttribute('disabled','disabled');
        document.querySelector("#dachüberstand").setAttribute('disabled','disabled');
        document.querySelector("#okFirstpfette").setAttribute('disabled','disabled');
      }
      if (document.querySelector("#traufhöNeigungOKFiPf").selected  == true) {
        document.querySelector("#grundmaß").removeAttribute('disabled');
        document.querySelector("#traufhöhe").removeAttribute('disabled');
        document.querySelector("#okFirstpfette").removeAttribute('disabled');
        document.querySelector("#dachneigung").removeAttribute('disabled');
        document.querySelector("#firsthöhe").setAttribute('disabled','disabled');
        document.querySelector("#okFußpfette").setAttribute('disabled','disabled');
        document.querySelector("#dachüberstand").setAttribute('disabled','disabled');
      }
      if (document.querySelector("#firsthöVordachNeigung").selected  == true) {
        document.querySelector("#grundmaß").removeAttribute('disabled');
        document.querySelector("#firsthöhe").removeAttribute('disabled');
        document.querySelector("#dachüberstand").removeAttribute('disabled');
        document.querySelector("#dachneigung").removeAttribute('disabled');
        document.querySelector("#traufhöhe").setAttribute('disabled','disabled');
        document.querySelector("#okFußpfette").setAttribute('disabled','disabled');
        document.querySelector("#okFirstpfette").setAttribute('disabled','disabled');
      }
      if (document.querySelector("#firsthöVordachOKFußpf").selected  == true) {
        document.querySelector("#grundmaß").removeAttribute('disabled');
        document.querySelector("#firsthöhe").removeAttribute('disabled');
        document.querySelector("#dachüberstand").removeAttribute('disabled');
        document.querySelector("#okFußpfette").removeAttribute('disabled');
        document.querySelector("#dachneigung").setAttribute('disabled','disabled');
        document.querySelector("#traufhöhe").setAttribute('disabled','disabled');
        document.querySelector("#okFirstpfette").setAttribute('disabled','disabled');
      }
      if (document.querySelector("#vordachNeigungOKFiPf").selected  == true) {
        document.querySelector("#grundmaß").removeAttribute('disabled');
        document.querySelector("#okFirstpfette").removeAttribute('disabled');
        document.querySelector("#dachüberstand").removeAttribute('disabled');
        document.querySelector("#dachneigung").removeAttribute('disabled');
        document.querySelector("#firsthöhe").setAttribute('disabled','disabled');
        document.querySelector("#okFußpfette").setAttribute('disabled','disabled');
        document.querySelector("#traufhöhe").setAttribute('disabled','disabled');
      }
      if (document.querySelector("#vordachOKFußpfOKFiPf").selected  == true) {
        document.querySelector("#grundmaß").removeAttribute('disabled');
        document.querySelector("#okFußpfette").removeAttribute('disabled');
        document.querySelector("#dachüberstand").removeAttribute('disabled');
        document.querySelector("#okFirstpfette").removeAttribute('disabled');
        document.querySelector("#firsthöhe").setAttribute('disabled','disabled');
        document.querySelector("#traufhöhe").setAttribute('disabled','disabled');
        document.querySelector("#dachneigung").setAttribute('disabled','disabled');
      }
      if (document.querySelector("#--").selected  == true) {
        document.querySelector("#grundmaß").setAttribute('disabled','disabled');
        document.querySelector("#traufhöhe").setAttribute('disabled','disabled');
        document.querySelector("#dachüberstand").setAttribute('disabled','disabled');
        document.querySelector("#dachneigung").setAttribute('disabled','disabled');
        document.querySelector("#firsthöhe").setAttribute('disabled','disabled');
        document.querySelector("#okFußpfette").setAttribute('disabled','disabled');
        document.querySelector("#okFirstpfette").setAttribute('disabled','disabled');
      }
    }
 
  });
 
Schau mal, passt´s so?

Javascript:
document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('--').selected = true;
  document.querySelector('#auswahl').addEventListener('click', weiter);

  function weiter() {
    const config = {
      traufhöVordachNeigung: ["#grundmaß", "#traufhöhe", "#dachüberstand", "#dachneigung"],
      firsthöTraufhöVordach: ["#grundmaß", "#firsthöhe", "#traufhöhe", "#dachüberstand", "#dachneigung"],
      vordachNeigungOKFußpf: ["#grundmaß", "#okFußpfette", "#dachüberstand", "#dachneigung"],
      traufhöVordachOKFußpf: ["#grundmaß", "#traufhöhe", "#dachüberstand", "#okFirstpfette"],
      traufhöNeigungOKFußpf: ["#grundmaß", "#traufhöhe", "#okFußpfette", "#dachneigung"],
      firsthöTraufhöNeigung: ["#grundmaß", "#traufhöhe", "#firsthöhe", "#dachneigung"],
      firsthöTraufhöOKFußpf: ["#grundmaß", "#traufhöhe", "#firsthöhe", "#okFußpfette"],
      traufhöNeigungOKFiPf: ["#grundmaß", "#traufhöhe", "#okFirstpfette", "#dachneigung"],
      firsthöVordachNeigung: ["#grundmaß", "#firsthöhe", "#dachüberstand", "#dachneigung"],
      firsthöVordachOKFußpf: ["#grundmaß", "#firsthöhe", "#dachüberstand", "#okFußpfette"],
      vordachNeigungOKFiPf: ["#grundmaß", "#okFirstpfette", "#dachüberstand", "#dachneigung"],
      vordachOKFußpfOKFiPf: ["#grundmaß", "#okFußpfette", "#dachüberstand", "#okFirstpfette"],
      "--": []
    };

    const disableAll = ["#grundmaß", "#traufhöhe", "#firsthöhe", "#dachüberstand", "#dachneigung", "#okFußpfette", "#okFirstpfette"];
    disableAll.forEach(id => document.querySelector(id).setAttribute('disabled', 'disabled'));

    const selectedOption = Object.keys(config).find(option => document.querySelector(`#${option}`).selected);
    if (selectedOption) {
      config[selectedOption].forEach(id => document.querySelector(id).removeAttribute('disabled'));
    }
  }
});
 
Hallo mo;

besten dank und ja es passt so!
da hätte ich noch tage zu gebraucht um es so hinzubekommen nur mit lehrer google.
 
  • Like
Reaktionen: mo
An die selektierte Option kommt man viel leichter mit
document.querySelector('#wasistgegeben').value
dann brauchen die Options nicht extra ids bekommen.
 
Zurück
Oben