Formular mit Javascript bearbeiten?
Hallo, ich habe ein formular mit einem select und méchte je nach auswahl des benutzers die nächsten zwei Formulareingaben entweder einblenden oder ausblenden. Geht da mit Javascript?
Hier das Formular:
<form class="form" method="POST" action="./?route=admin/module/create" enctype="multipart/form-data">
<input type="hidden" name="csrf_token" value="<?php echo csrf_token(); ?>" />
<input type="hidden" name="parent" value="<?php echo $parent["parent"]; ?>" />
<label for="modules-create-title">Titel:</label><br />
<input type="text" name="title" id="modules-create-title" value="<?php if(!empty($_POST['title'])) echo e($_POST['title']); ?>" /><br /><br />
<label>Art des Moduls <br>
<select name="module" size="1">
<option value="slideshow">Slideshow</option>
<option value="image_left_prev">About Vorschau mit Bild</option>
<option value="reviews">Kundenmeinungen</option>
<option value="contact_form">Kontaktformular</option>
<option value="productcards">Angebote</option>
<option value="content">Textfeld mit Titel</option>
<option value="landingpage">Landingpage</option>
<option value="content_right">Textfeld rechts mit Bild</option>
<option value="content_left">Textfeld links mit Bild</option>
</select>
</label><br /><br />
<label for="modules-create-picture">Hintergrundbild:
<input name="image" type="file" id="modules-create-picture" size="50" accept="text/*">
</label> <br /><br />
<label for="editor">Text</label><br />
<textarea id="editor" name="content" cols="35" rows="20"></textarea> <br /><br />
<input type="submit" value="Speichern" />
</form>
3 Antworten
Natürlich, Sie können JavaScript verwenden, um Teile Ihres Formulars basierend auf der Auswahl in einem
<select>
-Element ein- oder auszublenden. Hier ist ein einfaches Beispiel, wie Sie dies tun können:
Zuerst fügen Sie Ihrem HTML-Code eine ID oder Klasse zu den Elementen hinzu, die Sie ein- oder ausblenden möchten. Zum Beispiel:
html
Copy code
<label for="modules-create-picture" id="picture-label">Hintergrundbild: <input name="image" type="file" id="modules-create-picture" size="50" accept="text/*"> </label> <br /><br /> <label for="editor" id="text-label">Text</label><br /> <textarea id="editor" name="content" cols="35" rows="20"></textarea> <br /><br />
Dann fügen Sie JavaScript hinzu, um auf Änderungen im
<select>
-Element zu reagieren und entsprechend die Sichtbarkeit der anderen Elemente anzupassen. Sie können dies direkt in Ihr HTML-Dokument einfügen (vorzugsweise vor dem schließenden
</body>
-Tag) oder in eine separate JavaScript-Datei.
html
Copy code
<script> document.addEventListener('DOMContentLoaded', function () { var selectElement = document.querySelector('select[name="module"]'); var pictureLabel = document.getElementById('picture-label'); var textLabel = document.getElementById('text-label'); function toggleVisibility() { var value = selectElement.value; // Beispiel: Blenden Sie das Bildfeld nur für "slideshow" ein if (value === 'slideshow') { pictureLabel.style.display = 'block'; } else { pictureLabel.style.display = 'none'; } // Beispiel: Blenden Sie das Textfeld nur für "content" ein if (value === 'content') { textLabel.style.display = 'block'; } else { textLabel.style.display = 'none'; } } // Event-Listener für Änderungen am Select-Element selectElement.addEventListener('change', toggleVisibility); // Initialer Aufruf, um die Sichtbarkeit beim Laden der Seite zu setzen toggleVisibility(); }); </script>
In diesem Beispiel habe ich zwei Funktionen
toggleVisibility
erstellt, die basierend auf der Auswahl im
<select>
-Element die Sichtbarkeit der Labels und Eingabefelder steuern. Sie müssen diese Logik entsprechend Ihren spezifischen Anforderungen anpassen.
Ja.
Eine einfache Lösung wäre es hierbei, die beiden Eingabefelder in einen Container zu packen, der bspw. via id-Attribut identifizierbar ist. Für das select-Element kannst du folgend einen Event Handler registrieren, der den Container ein-/ausblendet, indem eine entsprechende CSS-Klasse hinzugefügt/entfernt wird. Gib dem select-Element hierfür ebenso eine ID.
<select id="selection-field" name="module" size="1">
<!-- ... -->
</select>
<div id="container" class="hidden">
<!-- input fields ... -->
</div>
<script>
const selectionField = document.getElementById("selection-field");
const container = document.getElementById("container");
selectionField.addEventListener("change", () => {
if (selectionField.value === "some certain option value ...") {
container.classList.remove("hidden");
}
else {
container.classList.add("hidden");
}
});
</script>
Die CSS-Regel:
.hidden { display: none }
Hi Thooms,
ja das geht damit sogar sehr gut. Es gibt mehrere Wege wie du vorgehen kannst. Der eine Weg ist die Elemente mit CSS zu verstecke und zu deaktivieren.
//Abfragen ob die Seite vollständig geladen wurde
document.addEventListener('DOMContentLoaded', ()=>{
let myModule = document.querySelector('select[name=module]');
let myImageInput = document.querySelector('input[name=image]');
let myEditor = document.getElementById('editor');
myModule.addEventListener('input', ()=>{
verstecken();
switch(myModule.value) {
case 'content_right':
case 'content_left':
myEditor.classList.remove('hidden');
myImageInput.classList.remove('hidden');
myEditor.removeAttribute('disabled');
myImageInput.removeAttribute('disabled');
break;
case 'content':
myEditor.classList.remove('hidden');
myEditor.removeAttribute('disabled');
break;
default:
//nothing
}
});
function verstecke() {
// Du brauchst noch eine CSS-Klasse mit dem Bezeichenr hidden und darin die Eigenschaft display: none;
// Man könnte auch direkt Styles schreiben mit element.styles.display = 'none';
myEditor.classList.add('hidden');
myImageInput.classList.add('hidden');
myEditor.disabled = true;
myImageInput.disabled = true;
}
});
Ich hoffe die Antwort hilft dir weiter. Gerne kannst du zum Thema noch mehr Fragen stellen.
PS: Wenn dir die Antwort gefallen hat, dann würde ich mich auf eine positive Bewertung freuen. Eine Danksagung durch den Button wäre noch besser