HTML_QuickForm2 - JavaScript für Formular-Felder einsetzen

Wer mit Formularen arbeitet, der greift häufig auf JavaScript zurück, um auf Nutzereingaben mittels OnClick, OnChange oder OnMouseOver zu reagieren. HTML_QuickForm2 ermöglicht das Einbinden von JavaScript-Attributen, indem man addElement ein Array mit typischen HTML-Attributen anhängt.

Das Prinzip ist dabei immer dasselbe:

$form->addElement( 
   {HTML_FORMULAR},
   {INPUT_NAME},
   array(
     {HTML_ATTRIBUT}=>{INHALT},
     {HTML_ATTRIBUT}=>{INHALT},
     {HTML_ATTRIBUT}=>{INHALT}
   )
);

Somit kann man jedes beliebe INPUT- bzw. HTML-Attribut einbinden, welches man bei der normalen Formular-Gestaltung verwendet. Beispielsweise style, id, placeholder und vieles mehr. In folgendem Beispiel definieren wir ein klassisches onclick:

/*
 * Formular erstellen 
 */
$form = new HTML_QuickForm2('Formular_mit_JavaScript');

/*
 * Formular_Feld inklusive JAvaScript-Attribut wie OnClick, OnChange oder OnMouseOver
 */
$fsCommon = $form->addElement('fieldset')->setLabel('Allgemein');
$name = $fsCommon->addElement('text', 'F_NICKNAME', array('id' => 'F_NICKNAME', 'onclick'=>'toggleMask(\'id_mask\')')));

echo $form;

Das Ergebnis ist - wie nicht anders zu erwarten - folgendes:

<div class="quickform">
<form action="Formular_mit_JavaScript.php" id="Formular_mit_JavaScript" method="post">
<div>
<input type="hidden" name="_qf__Formular_mit_JavaScript" id="qf:Formular_mit_JavaScript">
<div class="row">
    <p class="label"></p>
    <div class="element">
        <input type="text" name="F_NICKNAME" onclick="toggleMask('id_mask')">
    </div>
</div>
</div>
</form>
</div>