In meinen bisherigen Artikeln bin auch auf die Verwendung von jQuery für Diashows und Bannerwechsel eingegangen, aber man kann es auch sehr gut für Formulare verwenden. Sehr häufig werden vor allem Select-Tags mit jQuery bearbeitet, wenn mehrere verwendet werden und die Optionen des zweiten vom ersten abhängen.

Ich möchte z.B. auf einer Webseite Treiber für Produkte verschiedener Hersteller zum Download bereit stellen. Im ersten Select wählt der Besucher den Hersteller aus. Von diesem Hersteller werden dann im zweiten Select die Produkte angezeigt.

Der HTML-Code für das Formular könnte folgendermaßen aussehen:

<form action="#" method="post">
  <table>
    <tr>
      <td>Hersteller</td>
      <td>
        <select name="hersteller" id="hersteller">
          <option>---</option>
          <option>toller Hersteller (tH)</option>
          <option>anderer Hersteller (aH)</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Produkt</td>
      <td>
        <select disabled="disabled" name="produkt" id="produkt">
        </select>
      </td>
    </tr>
  </table>
</form>

Das zweite Select hier ist noch deaktivier und hat noch keine Optionen, da dies dann mit jQuery befüllt wird. Im Header der Seite sollte natürlich jQuery eingebunden sein.

jQuery(document).ready(function(){
  jQuery("#hersteller").change(function(){
    if (jQuery("#hersteller").attr("value") == "---"){
      jQuery("#produkt").attr({disabled: "disabled"});
      jQuery("#produkt").html("");
    }
    else {
      var hersteller = jQuery("#hersteller").attr("value");
      jQuery.post("get_products.php", {hersteller: hersteller}, function(html) {
        var returnvalue =  html;                             
        jQuery("#produkt").html(
          returnvalue
        );
      }, "html");
      jQuery("#produkt").attr({disabled: ""});
    }
  });
});

Sobald sich der Wert des Hersteller-Selects ändert wird überprüft, ob ein Hersteller ausgewählt wurde. Wenn kein Hersteller gewählt wurde, wird das zweite Select geleert und deaktiviert. Wenn ein Hersteller gewählt wurde, wird der Hersteller per POST an ein PHP-Skript übergeben, dass abhängig vom Hersteller die Produkte in Option-Tags zurückliefert. Diese werden dann von jQuery in das Produkte-Select eingefügt und dessen disabled-Attribut entfernt.

Hier gehts zum Beispiel-Formular.

Ähnliche Beiträge:

1. Diashow mit jQuery Wer etwas bewegung in die eigene Webseite bringen möchte, macht das am besten mit einer kleine Diashow. Mit dem Javascript-Framework...
2. Bilder tauschen mit jQuery Ein schöner Effekt ist das Tauschen von Bildern beim Überfahren mit der Maus. Hier kann man ein großes Bild schön...
3. Bannerwechsel mit jQuery Mit jQuery kann man nicht nur kleine Diashows erstellen. Mit nur ein paar kleinen Anpassungen kann man damit auch einen...