... ich hab mir jetzt n Script geschrieben, welches mir dir Daten aus dem Html per DOMDocument() schön nice zuliefert...
auch das Fehlerhandling ist bedacht worden. 
Am Schluss enthält das Template also schön sauber 4 Arrays mit Daten bezüglich:
- Label
- Value
- Error (natürlich mit message)
- Hidden Fields
Das ganze sieht dann so aus: siehe Bild
script.png
Also kann man sein HTML gestalten wie man möchte. Für meinen Fall "kompliziertes customized Form" - perfekt.
So sieht das HTML / PHP aus (Einsatz):
(ersetzt das jetzige "print($this->field)")
PHP-Code:
<div id="form_inner">
<?php if(SHOW_ORI_HTML) print($this->field); ?>
<!--hidden_fields -->
<?php foreach($field_hidden as $hf){print($hf . "\n");};?>
<!--section_1 -->
<div id="section_1">
<!--form_item ctrl_name -->
<div id="field_ctrl_name" class="item <?php print $field_error['ctrl_name'] != NULL ? 'error' : ''; ?>">
<label for="ctrl_name"><?php print $field_label['ctrl_name'][0]->text ?></label>
<input type="text" name="name" id="ctrl_name" class="text" value="<?php print $field_value['ctrl_name'][0]->text ?>" class="<?php print ($field_error['ctrl_name'] != NULL) ? 'error' : ''; ?>">
<?php if($field_error['ctrl_name'] != "") :?>
<div class="my_error_div"><?php print $field_error['ctrl_name']; ?></div>
<?php endif; ?>
</div>
</div>
OUTPUT ANDERE HTML ELEMENTE // TAB NAVIGATION ???
<!--form_item field_ctrl_other -->
<div id="field_ctrl_other" class="item <?php print ($field_error['field_ctrl_other'] != NULL) ? 'error' : ''; ?>">
<label for="ctrl_name"><?php print $field_label['field_ctrl_other'][0]->text ?></label>
<input type="text" name="name" id="ctrl_name" class="text" value="<?php print $field_value['field_ctrl_other'][0]->text ?>" class="<?php print ($field_error['field_ctrl_other'] != NULL) ? 'error' : ''; ?>">
<?php if($field_error['field_ctrl_other'] != "") :?>
<div class="my_error_div"><?php print $field_error['field_ctrl_other']; ?></div>
<?php endif; ?>
</div>
</div>
</div>
Das Script im Kopf des Templates:
PHP-Code:
//CONFIG
const SHOW_ORI_HTML = FALSE;
//
function get_inner_html( $node ) {
$innerHTML= '';
$children = $node->childNodes;
foreach ($children as $child) {
$innerHTML .= $child->ownerDocument->saveXML( $child );
}
return $innerHTML;
}
function get_html( $node ) {
return $node->ownerDocument->saveXML( $node );
}
if(!SHOW_ORI_HTML){
$html = new DOMDocument();
$html->loadHTML(utf8_decode($this->field));
$field_hidden = array();
$field_val = array();
$field_label = array();
$field_error = array();
$last_field_id = "";
foreach($html->getElementsByTagName('*') as $element) {
//FUNC::trc($element);
//label
if($element->tagName == "label" && $element->hasAttribute('for')){
$obj = new stdClass();
$obj->text = $element->nodeValue;
//check for error
if($element->hasAttribute('class')){
if($element->getAttribute('class') == "error"){
$obj->error = true;
}
}
//push
$field_label[$element->getAttribute('for')] = array($obj);
//tell last element_id // so that the error locaton can be set
$last_field_id = $element->getAttribute('for');
}
//input
else if($element->tagName == "input" && $element->hasAttribute('type')){
//normal text input
if($element->getAttribute('type') == "text" && $element->hasAttribute('id')){
$obj = new stdClass();
$obj->text = $element->getAttribute('value');
//check for error
if($element->hasAttribute('class')){
if($element->getAttribute('class') == "error"){
$obj->error = true;
}
}
$field_val[$element->getAttribute('id')] = array($obj);
}
//hidden input
else if($element->getAttribute('type') == "hidden"){
array_push($field_hidden, get_html($element));
}
}
//textarea
else if($element->tagName == "textarea" && $element->hasAttribute('id')){
$obj = new stdClass();
$obj->text = $element->nodeValue;
//check for error
if($element->hasAttribute('class')){
if($element->getAttribute('class') == "error"){
$obj->error = true;
}
}
$field_val[$element->getAttribute('id')] = array($obj);
}
//select
else if($element->tagName == "select" && $element->hasAttribute('id')){
$field_val[$element->getAttribute('id')] = array();
foreach($element->getElementsByTagName('option') as $option) {
$obj = new stdClass();
$obj->text = $option->nodeValue;
$obj->val = $option->getAttribute('value');
//$obj->checked = ();
array_push($field_val[$element->getAttribute('id')], $obj);
}
}
//error
else if($element->tagName == "p" && $element->hasAttribute('class')){
if($element->getAttribute('class') == "error"){
$field_error[$last_field_id] = $element->nodeValue;
}
}
}
}
Am einfachsten ist es
- 1) die Konstante "SHOW_ORI_HTML" auf TRUE zu setzen und den Sorce Code für den DIV #form_inner zu ziehen
- 2) Es zu modifizieren wie man Lustig ist.. also sein Custom HTML zu bauen.. um die Elemente herum - Man kann die Tags auch verändern - Hauptsache die ID's und label's bleiben bestehen. Man kann natürlich auch radiobuttons anstelle nehmen. Oder eigene Elemente bauen, objekte disablen. Wie man sein html gestaltet ist einem komplett selbst ueberlassen.
- 3) Konstante wieder auf False zu setzen
Sollte Laufen
Für mich funktioniert das super. Wie es mit anderen Formtypen aussieht werde ich im Laufe des Projektes sehen.. und das Script anpassen. Denke schon uber einen Ajax Request fuer die von Contao produzierten Fehlermeldungen nach.
Cheers
mogio
Catalog Form // Custom Template
Lesezeichen