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:
und hier das JS was ich gefunden hab:
Danke schonmal für eventuelle Hilfen!
LG Matze
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
