Eingabefelder bedingt sichtbar

[Mathias Brodala]

Hallo Samuel.

Ich hab ein Forumlar in dem nur checkboxen existieren. Jetzt werden einige davon aktiviert und man klickt auf abschicken. Jetzt soll ein Javascript prompt() kommen in dem man noch eine zusaetzliche information angibt, die dann auch auf der naechsten Seite durch PHP "benutzbar" ist.

Ich persönlich fände diese Bedienung ziemlich hakelig und wenig benutzerfreundlich. Daher mache ich dir einen anderen Vorschlag:

HTML: Füge in dein Formular alle Checkboxen und, wo erforderlich, Eingabefelder ein:

<form action="script.php" method="post">  
  <p>  
    <label>Foo: <input type="checkbox" name="foocheck" /></label>  
    <input type="text" name="foo" />  
  </p>  
  <p>  
    <label>Bar: <input type="checkbox" name="barcheck" /></label>  
    <input type="text" name="bar" />  
  </p>  
  <p>  
    <label>Baz: <input type="checkbox" name="bazcheck" /></label>  
    <input type="text" name="baz" />  
  </p>  
  <p><input type="submit" /></p>  
</form>

JavaScript: Blende beim Laden erst einmal alle Eingabefelder in deinem Formular aus und stelle die Funktionalität zum Einblenden selbiger bereit:

window.onload = function() {  
  
  // Alle Formularelemente im 1. Formular des Dokumentes  
  var elems = document.forms[0].elements;  
  
  for (var i = 0; i < elems.length; ++i) {  
  
    // Alle Eingabefelder ausblenden  
    if (elems[i].type == "text") {  
  
      elems[i].style.display = 'none';  
  
    // Alle Checkboxen mit Einblende-Funktionalität versehen  
    } else if (elems[i].type == "checkbox") {  
  
      // Auf onchange-Event reagieren  
      elems[i].onchange = function() {  
  
        /* this: Checkbox  
           this.parentNode: Label  
           this.parentNode.parentNode: Absatz  
           this.parentNode.parentNode.getElementsByTagName('input'): Checkbox & Eingabefeld  
           this.parentNode.parentNode.getElementsByTagName('input')[1]: Eingabefeld  
         */  
        var input = this.parentNode.parentNode.getElementsByTagName('input')[1];  
  
        // Wenn Checkbox aktiviert  
        if (this.checked) {  
  
          // display-Eigenschaft zurücksetzen => Eingabefeld einblenden  
          input.style.display = '';  
        } else {  
  
          // Eingabefeld ausblenden  
          input.style.display = 'none';  
        }  
      };  
    }  
  }  
};

Steht nun JS und CSS zur Verfügung, wird ein Eingabefeld nur dann eingeblendet, wenn die jeweilige Checkbox aktiviert wird.

PHP: Überprüfe nun in jedem Fall serverseitig die Eingaben. Nimm also den Wert für „Foo“ zum Beispiel nur dann an, wenn die jeweilige Checkbox aktiviert und in das zugehörige Eingabefeld etwas eingetragen wurde:

<?php  
  
if (isset($_POST)) {  
  
  print_r($_POST);  
}  
  
?>

Der Vorteil an diesem Aufbau: den Nutzer muss es nicht interessieren, was wie im Hintergrund vor sich geht und er wird nicht Popup-ähnlichen Nervereien belästigt.

Einen schönen Mittwoch noch.

Gruß, Mathias